Что такое aria-describedby? – Дополнительные описания для доступности
Информация о статье
Автор: Дмитрий Дугарев
Как веб-разработчик, Вы хотите убедиться, что Ваши интерфейсы не только хорошо выглядят, но и понятны для всех. Иногда элемент — например, сложное поле формы или кнопка с неясным контекстом — требует дополнительного объяснения. Именно здесь вступает в игру атрибут WAI-ARIA aria-describedby. Это Ваш инструмент для наведения моста между элементом пользовательского интерфейса и его более подробным описанием без перегрузки визуального дизайна. Он предоставляет вспомогательным технологиям, таким как скринридеры, необходимый контекст, который зрячие пользователи часто могут вывести из макета.
Что такое aria-describedby?
Официальная спецификация WAI-ARIA определяет aria-describedby следующим образом:
Identifies the element (or elements) that describes the object. [1]
Это означает, что aria-describedby устанавливает программную связь между элементом и одним или несколькими другими элементами, которые его описывают.
Подробное объяснение
Представьте себе aria-describedby как своего рода расширенную всплывающую подсказку для вспомогательных технологий. В то время как метка (<label> или aria-labelledby) указывает название элемента ("что"), описание (через aria-describedby) предоставляет дополнительную, контекстную информацию ("как" или "почему").
Значение атрибута представляет собой разделенный пробелами список атрибутов id. Эти id должны ссылаться на элементы, которые существуют где-либо в том же документе. Содержимое этих ссылаемых элементов затем зачитывается скринридерами в качестве описания исходного элемента.
Ключевое отличие от метки заключается в способе представления информации. Метка, как правило, зачитывается непосредственно вместе с ролью элемента (например, "Имя пользователя, поле ввода"). Описание, на которое ссылается aria-describedby, часто объявляется после короткой паузы или по явному действию пользователя. Это сигнализирует пользователю о том, что это дополнительная, а не существенная информация.
Текстовое описание схемы "Процесс вывода информации скринридером при использовании aria-describedby."
Блок-схема начинается, когда пользователь фокусирует элемент. Система проверяет, имеет ли элемент атрибут aria-describedby.
- Если да, скринридер сначала зачитывает роль и имя элемента. После короткой паузы зачитывается содержимое элемента, на который ссылается
aria-describedby. - Если нет, скринридер зачитывает только роль и имя элемента.
В обоих случаях процесс после этого завершается.
Для чего это используется?
Вы всегда используете aria-describedby, когда элемент требует дополнительных объяснений, выходящих за рамки простого имени. Типичные случаи использования:
- Инструкции для форм: Вы можете использовать его для описания требований к полю пароля (например, "Должен содержать не менее 8 символов") или формата для ввода даты. Подробнее об этом в нашем руководстве по доступным формам.
- Сообщения об ошибках: Если поле формы заполнено неверно, Вы можете связать сообщение об ошибке с полем
inputчерезaria-describedby. Таким образом, пользователь узнает, что пошло не так, непосредственно при фокусировке поля. - Дополнительная информация для ссылок и кнопок: Ссылка с текстом "Узнать больше" часто недостаточно информативна.
aria-describedbyможет ссылаться на соседнее предложение, которое предоставляет контекст, например, "Узнать больше о нашей новой политике конфиденциальности". - Сложные виджеты: В случае ползунка (slider)
aria-describedbyможет использоваться для описания текущего значения или функции ползунка.
Примеры из практики
- Хороший пример
- Плохой пример
<div>
<label for="password">Пароль:</label>
<input type="password" id="password" aria-describedby="password-hint" />
<p id="password-hint">
Должен содержать не менее 12 символов, одну заглавную букву и одну цифру.
</p>
</div>
Объяснение: Здесь поле input корректно связано с абзацем (<p>), содержащим требования к паролю, с помощью атрибута aria-describedby. Скринридер выдаст примерно следующее: "Пароль, поле ввода. Должен содержать не менее 12 символов, одну заглавную букву и одну цифру."
<div>
<label for="password">Пароль:</label>
<input type="password" id="password" />
<!-- Связь отсутствует! -->
<p>
Должен содержать не менее 12 символов, одну заглавную букву и одну цифру.
</p>
</div>
Объяснение: Хотя описание визуально присутствует и находится рядом с полем, отсутствует программная связь через aria-describedby. Пользователь скринридера, переходящий по полям формы с помощью Tab, скорее всего, пропустит эту важную информацию, поскольку она не будет зачитана в контексте элемента input.
Рекомендации и лучшие практики
Используйте видимые описания
Содержимое, на которое Вы ссылаетесь с помощью aria-describedby, как правило, должно быть видно и для зрячих пользователей. Инструкции или сообщения об ошибках полезны для всех. Скрытие текста описания (display: none; или visibility: hidden;) может привести к непоследовательному пользовательскому опыту и игнорируется некоторыми скринридерами. Это соответствует критерию успеха WCAG, согласно которому инструкции должны быть предоставлены. [2]
Обеспечьте правильное наименование
Доступное имя (Accessible Name) элемента всегда должно определяться в первую очередь, желательно с помощью элемента <label for="...">. aria-describedby предоставляет описание, а не имя. Четкое разделение между ними имеет решающее значение для понимания. [3] [4]
Ссылайтесь только на релевантное и краткое содержимое
Не ссылайтесь на огромный текстовый блок. Описание должно быть кратким и по существу. Длинные объяснения могут быть очень утомительными для пользователей скринридеров, поскольку они не могут просто просмотреть их. Кратко изложите самую важную информацию.
Будьте осторожны с aria-live
Если текст описания появляется динамически (например, сообщение об ошибке), Вам, возможно, придется использовать области aria-live, чтобы немедленно уведомить скринридер. Однако сочетание aria-describedby и aria-live может быть сложным. Распространенный метод заключается в том, чтобы поместить сообщение об ошибке в контейнер aria-live и одновременно связать его с полем ввода с помощью aria-describedby. [5]
Распространенные заблуждения
aria-describedby заменяет <label>
Это неверно. aria-describedby дополняет метку, но не заменяет ее. Любой интерактивный элемент, такой как input или button, требует доступного имени. Оно предоставляется с помощью <label>, aria-labelledby или aria-label. Описание является необязательной, дополнительной информацией.
Содержимое всегда зачитывается сразу после метки
Не обязательно. Большинство скринридеров делают короткую паузу между именем и описанием, чтобы просигнализировать пользователю, что это дополнительная информация. Некоторые конфигурации зачитывают описание только по запросу. Поэтому не стоит полагаться на то, что описание будет восприниматься как бесшовная часть метки.
aria-describedby может ссылаться на атрибут title
Нет. aria-describedby всегда ссылается на содержимое элемента через его id. Он не может считывать значение другого атрибута, такого как title или placeholder.
Связанные термины
- aria-labelledby
- aria-label
- Accessible Name
- Скринридер
- Метка
Часто задаваемые вопросы
В чем разница между aria-describedby и aria-labelledby?
aria-labelledby определяет имя (Accessible Name) элемента, ссылаясь на один или несколько других элементов. Оно заменяет собственное содержимое элемента для целей именования. aria-describedby предоставляет описание (Accessible Description), которое дополняет имя, но не заменяет его. Короче говоря: labelledby — это "Что", describedby — это "Подробнее об этом".
Могу ли я заставить aria-describedby ссылаться на несколько элементов?
Да, безусловно. Значение атрибута — это список id, разделенных пробелами. Скринридер зачитает содержимое ссылаемых элементов в том порядке, в котором они перечислены в атрибуте.
Пример: aria-describedby="hint-1 hint-2".
Работает ли aria-describedby также со скрытыми элементами?
Технически да, но это не лучшая практика. Если Вы ссылаетесь на элемент, который скрыт с помощью display: none или visibility: hidden, он все равно будет зачитан большинством скринридеров. Проблема в том, что Вы создаете несоответствие между тем, что воспринимают зрячие пользователи, и тем, что слышат пользователи скринридеров. Если информация важна, она должна быть доступна всем.
Должен ли я использовать aria-describedby для сообщений об ошибках?
Да, это один из лучших вариантов использования! Если пользователь совершает ошибку, свяжите сообщение об ошибке с неверным полем input с помощью aria-describedby. Кроме того, установите aria-invalid="true" для этого поля. Таким образом, пользователь будет проинформирован об ошибке и ее описании непосредственно при повторной фокусировке поля.
Примечание
Информация, содержащаяся в этой статье, особенно в отношении законов и директив, таких как WCAG, предоставляется исключительно в ознакомительных целях и не является юридической консультацией. По конкретным юридическим вопросам, касающимся цифровой доступности, Вы всегда должны консультироваться с квалифицированным юристом.
Об авторе