aria-describedby для дополнительного контекста
Добавляйте подсказки и справочные сведения, которые читаются после имени.
«aria-describedby для дополнительного контекста» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
За пределами имени
Иногда элементу управления недостаточно одного имени. aria-describedby добавляет дополнительный контекст, который программа чтения с экрана произносит после имени.
Он ссылается на идентификаторы
Как и labelledby, aria-describedby содержит идентификатор другого элемента. Браузер добавляет текст этого элемента к описанию.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Сначала имя, затем описание
Программа чтения с экрана сначала произносит имя, затем делает короткую паузу и произносит описание. Такой порядок помогает пользователям быстро понять назначение элемента управления.
Идеально подходит для подсказок
Подсказки для полей, например правила формата, следует помещать в aria-describedby, чтобы они автоматически произносились при получении полем фокуса.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>Оно не заменяет имя
Описание является дополнительной информацией. Если у элемента есть только aria-describedby и нет имени, он всё равно фактически остаётся без подписи.
Объединяйте несколько идентификаторов
Укажите в aria-describedby несколько идентификаторов, разделённых пробелами, и браузер объединит их текст. Это удобно для подсказки и сообщения об ошибке.
<input aria-describedby="hint err">Ошибки тоже являются описаниями
Свяжите aria-describedby с сообщением проверки, чтобы ошибка озвучивалась вместе с полем, а не оставалась где-то ещё на странице.
<input aria-describedby="err">
<p id="err">Email is required</p>Делайте описания краткими
Описание должно быть коротким предложением. Длинный текст aria-describedby каждый раз читается полностью и быстро начинает утомлять.
Оно остаётся видимым
В отличие от скрытой подписи, связанная подсказка обычно остаётся видимой на экране, одновременно помогая зрячим пользователям и другим пользователям.
Поддержка может различаться
Большинство программ чтения с экрана обрабатывают aria-describedby, но некоторые объявляют его только в определённых режимах, поэтому проверьте подсказку с помощью настоящей программы чтения с экрана.
describedby и labelledby
Используйте aria-labelledby, чтобы указать название элемента управления, а aria-describedby — для дополнительных сведений о нём. Эти атрибуты выполняют разные задачи.
Быстрая проверка
Вы хотите, чтобы правило для пароля читалось после имени поля. Какой атрибут подходит?
Итоги: добавление контекста
Вы узнали, что aria-describedby ссылается на идентификаторы, чтобы читать подсказки и ошибки после имени, дополняя его, но никогда не заменяя. 💬
Часто задаваемые вопросы
Урок «aria-describedby для дополнительного контекста» бесплатный?
Да — полный текст урока «aria-describedby для дополнительного контекста» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «aria-describedby для дополнительного контекста»?
Добавляйте подсказки и справочные сведения, которые читаются после имени. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «aria-describedby для дополнительного контекста»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Вычисление доступного имени без загадок
- aria-label и aria-labelledby
- aria-describedby для дополнительного контекста
- Распространённые ошибки именования, из-за которых элементы управления становятся беззвучными