Я пытаюсь сделать форму доступной. Должен ли я вносить свои входы как с 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>
Я могу взять ваш пример, поместить его в 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, то это потому, что это по сути тот же ответ.
Короче говоря, вам больше не нужна ария-инвалид. Просто отключите.
Чтобы завершить ответ @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 = "true" все равно сможет получать фокус и сообщать читателю экрана как тусклое.
aria-disabled считывает отключенную кнопку как затемненную/отключенную при навигации по клавишам со стрелками, за исключением chromevox и JAWS (проверено в JAWS/Edge, Voiceover/Safari, NVDA/FF и Chromevox/Chrome) и пропускается с помощью клавиши Tab.