Я пытаюсь сделать форму доступной. Должен ли я сделать так, чтобы входные данные имели атрибуты disabled и aria-disabled или только один?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>
Или вот так?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true">
Или вот так?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled>
Я могу взять ваш пример, поместить его в CodePen и проверить в JAWS и NVDA. (извините, сегодня без VoiceOver):
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>
Вы будете рады узнать, что и NVDA, и JAWS пропускают это поле (или, если оно явно выбрано, сообщают, что оно отключено).
Короче говоря, вам больше не нужен aria-disabled. Просто используйте disabled.
Вы можете прочитать немного больше об атрибутах ARIA, которые вы можете сбросить, в этой статье Стива Фолкнера (одного из редакторов спецификации ARIA) от 2015 года (хотя aria-disabled явно не указан, концепция та же): http://html5doctor.com/on-html-belts-and-aria-braces/
Если мой ответ похож на ваш другой вопрос о required по сравнению с aria-required, потому что это, по сути, один и тот же ответ.
aria, если он вообще бесполезен?
- person Black; 15.05.2019
disabled вспомогательным технологиям, ARIA была необходима для устранения этого пробела до тех пор, пока браузеры не обработают его правильно.
- person aardrian; 21.05.2019
Короче говоря, вам больше не нужна aria-disabled. Просто используйте инвалид.
Чтобы завершить ответ @aardrian.
При использовании элемента управления HTML, изначально поддерживающего атрибут disabled, атрибут aria-disabled не требуется.
Если вы используете пользовательский элемент управления, вы можете использовать атрибут aria-disabled. Например, в следующем коде кнопка «Пауза» будет отключена до тех пор, пока не будет нажата кнопка «Воспроизвести» (тогда наш javascript изменит атрибуты tabindex и aria-disabled).
<img src="controls/play.png"
id="audio-start"
alt="Start"
role="button"
aria-disabled="false"
tabindex="0" />
<img src="controls/pause.png"
id="audio-pause"
alt="Pause"
role="button"
aria-disabled="true"
tabindex="-1" />
Обратите внимание, что согласно W3C:
Отключенные элементы могут не получать фокус от табуляции. [...] Помимо установки атрибута aria-disabled, авторам СЛЕДУЕТ изменить внешний вид (выделенный серым цветом и т. д.), чтобы указать, что элемент отключен.
Важным отличием является то, что при использовании озвучивания элемент только со свойством «отключено» не будет привязан к вкладке. Однако элемент с aria-disabled="true" по-прежнему сможет получать фокус и сообщать средству чтения с экрана как затемненный.
disabled указано равным aria-disabled в других ответах выше. Хотя ARIA 1.0 не описывает disabled как связанную концепцию aria-disabled и что в популярном средстве чтения с экрана, таком как VoiceOver disabled, элементы не воспринимаются, т. е. вообще не считываются.
- person Volker E.; 08.01.2019
disabled) — и обратите внимание, что обычно существуют другие способы обнаружения элементов пользовательского интерфейса, кроме табуляции. Другие люди предпочитают, чтобы отключенные элементы управления можно было «обнаружить» с помощью табуляции (в этом случае используйте aria-disabled с соответствующим стилем). В любом случае вы будете соответствовать требованиям WCAG, но, пожалуйста, проведите тщательное пользовательское тестирование, чтобы найти правильный атрибут для вашего проекта.
- person brennanyoung; 07.11.2019
