Когда использовать атрибут disabled vs атрибут Aria-disabled для HTML-элементов?

Я пытаюсь сделать форму доступной. Должен ли я сделать мои входные данные обоими 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>
18
accessibility html html-input html5 wai-aria

3 ответов

Я могу взять ваш пример, положить его в 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, потому что это по сути один и тот же ответ.

14

короче говоря, вам больше не нужна Aria-disabled. Просто используйте отключены.

для завершения ответа @aardrian.

при использовании элемента управления HTML, который поддерживает изначально , вам не нужен .

если вы используете пользовательский элемент управления, то вы можете использовать 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 авторы должны изменить внешний вид (серый и т. д.), чтобы указать, что элемент был отключен.

16

важным отличием является то, что при использовании voice-over элемент только с "отключенным" свойством не будет вкладок. Однако элемент с Aria-disabled= "true" все равно сможет получать фокус и сообщать читателю экрана как затемненный.

6