何时对 HTML 元素使用 disabled 属性与 aria-disabled 属性？

Question

我正在尝试使表单易于访问。我应该让我的输入同时具有 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>

Answer 1

我可以拿你的例子，把它放在in a CodePen，并在 JAWS 和 NVDA 中检查（抱歉，今天没有 VoiceOver）：

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>

你会很高兴知道 NVDA 和 JAWS 都跳过了这个字段（或者如果明确聚焦，宣布它被禁用）。

简而言之，您不再需要aria-disabled。只需使用 disabled.

您可以在 Steve Faulkner（ARIA 规范的编辑之一）于 2015 年撰写的这篇文章中阅读更多关于可以转储的 ARIA 属性的信息（虽然 aria-disabled 未明确列出，但概念是一样的）：http://html5doctor.com/on-html-belts-and-aria-braces/

如果关于 required 与 aria-required 我的回答看起来与相似，那是因为它本质上是相同的答案。

Answer 2

In short, you do not need aria-disabled any longer. Just use disabled.

完成@aardrian 的回答。

当您使用原生支持 disabled 属性的 HTML 控件时，您不需要 aria-disabled 属性。

如果您使用自定义控件，那么您可以使用 aria-disabled 属性。例如，在下面的代码中，"Pause" 按钮将被禁用，直到按下 "Play" 按钮（我们的 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：

Disabled elements might not receive focus from the tab order. [...] In addition to setting the aria-disabled attribute, authors SHOULD change the appearance (grayed out, etc.) to indicate that the item has been disabled.

Answer 3

一个重要的区别是，当使用画外音时，只有 'disabled' 属性的项目将不会被制表。然而，带有 aria-disabled="true" 的项目仍然能够获得焦点并向屏幕报告 reader 变暗。

何时对 HTML 元素使用 disabled 属性与 aria-disabled 属性？

When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

html

accessibility

html-input

wai-aria