我正在尝试使表单易于访问。我应该让我的输入同时具有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>
【问题讨论】：
标签： html accessibility wai-aria html-input
我可以拿你的例子，把它放在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 的your other question 相似，那是因为它本质上是相同的答案。
【讨论】：
disabled 状态传递给辅助技术，因此需要 ARIA 来弥补这一差距，直到浏览器正确处理它。
aria-disabled 而不是disabled，以便辅助技术用户不会完全隐藏提交按钮。您还应该通过aria-describedby 将禁用按钮与验证错误相关联，或者传递无法以其他方式提交表单的信息。请参阅此示例a11y-101.com/development/aria-disabled
一个重要的区别是，当使用画外音时，只有“禁用”属性的项目将不会被标记。但是，带有 aria-disabled="true" 的项目仍然能够接收焦点并向屏幕阅读器报告为变暗。
【讨论】：
disabled 与aria-disabled 相同，这是令人担忧的。尽管ARIA 1.0 没有将disabled 描述为aria-disabled 的相关概念，并且在像VoiceOver 这样的流行屏幕阅读器中disabled 导致元素不可感知，就像根本无法读出一样。
disabled） - 请注意，通常有其他方法可以发现 UI 控件而不是 tab。其他人更喜欢通过选项卡“发现”禁用的控件（在这种情况下，使用aria-disabled，并带有适当的样式）。无论哪种方式，您都将符合 WCAG，但请仔细进行用户测试以发现适合您项目的属性。
简而言之，您不再需要 aria-disabled。只需使用 disabled 即可。
完成@aardrian 的回答。
当您使用原生支持disabled 属性的HTML 控件时，您不需要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：
禁用的元素可能不会从 Tab 键顺序中获得焦点。 [...] 除了设置 aria-disabled 属性外，作者还应该更改外观（变灰等）以表明该项目已被禁用。
【讨论】：