Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными
Избегайте шаблонов, из-за которых элементы остаются без имени.
«Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
When Controls Go Silent
A control with no computed name is read as just button or link. These naming mistakes leave users guessing what an element does.
Icon-Only Buttons
A button holding only an icon often computes no name. Add an aria-label so the wordless control still announces its action.
<button aria-label="Delete">🗑️</button>Placeholder Is Not a Name
A placeholder is not a reliable accessible name. It vanishes on typing and many readers ignore it, so add a real label.
<input placeholder="Email">Broken labelledby IDs
An aria-labelledby pointing at a missing or misspelled id produces no name at all, silently undoing the label you intended.
<button aria-labelledby="ttl">x</button>Empty aria-label
An aria-label set to an empty string wipes out the name. The element ends up with nothing for a screen reader to announce.
<button aria-label="">Save</button>Hiding the Only Text
Putting aria-hidden on the only text inside a button removes its name source, so the control becomes anonymous to readers.
<button><span aria-hidden="true">Next</span></button>Generic Link Text
Links named Read more or Click here are technically named but useless out of context, since users hear no destination.
<a href="/post">Read more</a>Trusting title Alone
Relying on title as the only name is risky. It is the lowest priority source and several screen readers skip it entirely.
Inputs With No label
A bare input with no associated label often computes no name, leaving users unsure what to type into the field.
<input type="text">Duplicated Names
Ten buttons all named Edit force users to guess which row they affect. Give each a distinct name that includes its target.
<button aria-label="Edit profile">Edit</button>Verify With the Inspector
Open the browser accessibility panel and read the computed name for each control. If it is blank, you have a mistake to fix.
Quick Check
An icon button shows only a trash glyph. Why might it be silent?
Recap: Keep Controls Named
You learned the traps that silence controls, from icon-only buttons to broken ids, and to verify every name in the inspector. ✅
Часто задаваемые вопросы
Урок «Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными» бесплатный?
Да — полный текст урока «Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными»?
Избегайте шаблонов, из-за которых элементы остаются без имени. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Вычисление доступного имени без загадок
- aria-label и aria-labelledby
- aria-describedby для дополнительного контекста
- Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными