Когда использовать отключенный атрибут против атрибута aria-disabled для элементов HTML?

Я пытаюсь сделать форму доступной. Должен ли я вносить свои входы как с disabled и с 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>

Ответы

Ответ 1

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

Ответ 2

Короче говоря, вам больше не нужна ария-инвалид. Просто отключите.

Чтобы завершить ответ @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:

Отключенные элементы могут не получать фокус из порядка вкладок. [...] В дополнение к настройке атрибута, запрещенного ариям, авторам СЛЕДУЕТ изменить внешний вид (серый и т.д.), Чтобы указать, что элемент отключен.

Ответ 3

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

Ответ 4

aria-disabled считывает отключенную кнопку как затемненную/отключенную при навигации по клавишам со стрелками, за исключением chromevox и JAWS (проверено в JAWS/Edge, Voiceover/Safari, NVDA/FF и Chromevox/Chrome) и пропускается с помощью клавиши Tab.