Что означает свойство "описанный в арии"?
Следующий HTML-код вставляется плагином jQuery Grid:
<td role="gridcell" style="" aria-describedby="list_createdBy">Sam</td>
Что означает свойство "описанный в арии"?
4 ответа
Это описано в спецификации арии. Он дает идентификатор элемента, который предоставляет некоторую дополнительную информацию о текущем элементе, которая может понадобиться некоторым пользователям.
Ниже приведен пример того, как вы могли бы использовать свойство aria-описано by. Он используется, когда у вас есть текст, содержащий информацию об элементе. Описываемый Aria должен совпадать с идентификатором текста, который его описывает.
First name: <input aria-describedby="name" type="text">
<em id="name">Your first name must be correct.</em>
На первый взгляд я бы сказал aria-describedby здесь, вероятно, будет проигнорирован, потому что он определен на <td>. Большинство браузеров и программ чтения с экрана игнорируютaria-describedby информация при установке на элемент, который не является интерактивным (фокусируемым).
Но конкретный пример немного сложнее из-за role="gridcell" который переопределяет семантику <td>и поэтому предоставленный пример действителен, если он соответствует спецификации ARIA для gridcell. Это нестандартный компонент.
Вообще говоря атрибут aria-describedbyпредоставляет программе чтения с экрана дополнительную информацию, которая будет объявляться по содержимому элемента (не единственный, но и наиболее распространенный вариант использования).
Например вместо только "Logout" программа чтения с экрана объявит "Logout, John Doe":
Logged-in as <span id="user">John Doe</span>.
<a aria-describedby="user" href="/logout">Logout</a>
Или пример с всплывающей подсказкой (подсказка: здесь отсутствует часть Javascript):
<button type="button" aria-describedby="my-tooltip">Snipping Tool</button>
<div hidden id="my-tooltip" role="tooltip">
It can take still screenshots of an open window,
rectangular areas, a free-form area,
or the entire screen.
</div>
Или пример с элементом формы, еще один распространенный вариант использования:
<form ...>
<label for="my-name">Full name</label>
<input aria-describedby="my-name-desc" id="my-name" type="text"/>
<p id="my-name-desc">
Please tell us your full name.
</p>
</form>
В приведенном выше примере будут объявлены оба <label> и дополнительное описание (определяется aria-describedby) сразу, когда пользователь фокусирует поле ввода. Мало того, что это избавляет от необходимости читать окружение, чтобы понять, что ожидается ввести, но также и чтение всех элементов, кроме элементов управления формой, когда они находятся внутри<form>может быть более сложным для пользователя программы чтения с экрана. Это другой опыт, чем чтение остальной части страницы. Потому что события клавиатуры могут взаимодействовать либо с программами чтения с экрана, либо с элементами управления формы, но вряд ли с ними обоими одновременно. Не говоря уже о том, что программы чтения с экрана предлагают множество полезных сочетаний клавиш, например, нажатие "H" приведет к переходу к следующему заголовку, но, очевидно, не тогда, когда<input>поле сфокусировано. Тогда "H" будет занесено в<input>.
О ARIA:
- ARIA обычно используется для улучшения доступности для программ чтения с экрана (не только, но в основном банкоматов).
- Использование ARIA не обязательно улучшает ситуацию! Легко ARIA может привести к значительно ухудшению доступности, если не реализован и не протестирован должным образом. Не используйте ARIA только для того, чтобы иметь в коде "крутые вещи", которые вы не до конца понимаете. К сожалению, слишком часто реализации ARIA создают больше проблем, чем решений с точки зрения доступности. Это довольно распространено, поскольку зрячие пользователи и разработчики с меньшей вероятностью будут прилагать дополнительные усилия к обширному тестированию программ чтения с экрана, в то время как, с другой стороны, спецификации и валидаторы ARIA в настоящее время далеки от совершенства и в некоторых случаях даже сбивают с толку. Вдобавок ко всему, каждый браузер и программа чтения с экрана неравномерно реализуют поддержку ARIA, что вызывает серьезные несоответствия в поведении. Часто лучше полностью избегать ARIA, когда неясно, что именно она делает, как себя ведет, и не будет интенсивно тестироваться со всеми программами чтения с экрана и браузерами (или, по крайней мере, с наиболее распространенными комбинациями.). Отказ от ответственности: я намерен не опозорить ARIA, а скорее ее плохие реализации ARIA. На самом деле не так уж редко HTML5 не предлагает никаких других альтернатив, где реализация ARIA принесла бы значительные преимущества для доступности, например
aria-hiddenилиaria-expanded. Но только при правильной реализации и тестировании!
Об арии, описанной
- Предоставляет дополнительную информацию по содержимому элемента
- Работает должным образом с элементами, на которые можно сфокусироваться (например, кнопка, ввод, a). В основном бесполезен для других элементов ("в основном" есть исключения)
- IE 11 немного сложен. Иногда его игнорируют. Это может иметь значение, если будет реализовано на
aилиbuttonтакже, если указанный элемент скрыт (display:none), его положение (имеется ли ссылка на внутренний элемент?) или если он имеетtabindex="-1"илиrole(напримерrole="none") на нем и т. д. Обязательно проверьте все программы чтения с экрана. - Может вести себя иначе, если программа чтения с экрана используется в режиме фокусировки (клавиша TAB) или виртуальном режиме (чтение содержимого с помощью клавиш со стрелками)
- И Firefox, и Internet Explorer уважают
aria-describedbyтолько в режиме фокусировки. Таким образом, нет смысла добавлять его к нефокусируемым элементам. От: ADG - Хотя NVDA объявляет описания сразу, JAWS иногда предлагает вручную нажать JAWS+Alt+,R чтобы объявить об этом. От: ADG
- Если указанный элемент скрыт, он недоступен для поиска с помощью
Ctrl+F(это обычный способ навигации по веб-сайту, чтобы быстро найти то, что они ищут). От: ADG - Единственный случай, когда мы действительно рекомендуем использовать
aria-describedby, заключается в добавлении дополнительной информации к интерактивным элементам (например, для связи видимой информации, например, для форм управления). От: ADG - Хорошая идея: использовать комбинацию
aria-describedby(в элементе управления формы) иrole="alert"(на SPAN) для ошибки управления формой. От: W3.org
По сути,
Свойство aria- описаноby используется для присоединения описательной информации к одному или нескольким тегам HTML с помощью списка ссылок идентификаторов ( список ссылок идентификаторов содержит один или несколько уникальных идентификаторов тегов HTML).
ария-describedby свойство очень похоже на арий-labelledby собственности ( ярлык , который описывает суть HTML тега) , но ария-describedby собственности предоставляет больше информации о HTML - теге , котором пользователь может понадобиться.
Свойства aria-describeby и aria-labelledby в основном полезны для пользователей, которые используют вспомогательные технологии, такие как программа чтения с экрана .
Для справки: