何时对 HTML 元素使用 disabled 属性与 aria-disabled 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38059140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When to use the disabled attribute vs the aria-disabled attribute for HTML elements?
提问by Ralph David Abernathy
I'm trying to make a form accessible. Should I make my inputs have both disabledand aria-disabledattributes, or just one?
我正在尝试使表单可访问。我应该让我的输入同时具有disabled和aria-disabled属性，还是只有一个？
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>
Or like this?
或者像这样？
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true">
Or like this?
或者像这样？
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled>
采纳答案by aardrian
I can take your example, put it in a CodePen, and check it in JAWS and NVDA (sorry, no VoiceOver today):
我可以拿你的例子来说，把它放在 CodePen 中，然后在 JAWS 和 NVDA 中检查它（抱歉，今天没有 VoiceOver）：
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>
You will be happy to know that both NVDA and JAWS skip the field (or if explicitly focused, announce that is disabled).
您会很高兴知道 NVDA 和 JAWS 都跳过了该字段（或者如果明确关注，则宣布已禁用）。
In short, you do notneed aria-disabledany longer. Just use disabled.
简而言之，您不再需要了aria-disabled。只需使用disabled.
You can read a bit more about the ARIA attributes you can dump in this article by Steve Faulkner (one of the editors of the ARIA spec) from 2015 (though aria-disabledis not explicitly listed, the concept is the same): http://html5doctor.com/on-html-belts-and-aria-braces/
您可以在 2015 年由 Steve Faulkner（ARIA 规范的编辑之一）撰写的这篇文章中详细了解您可以转储的 ARIA 属性（虽然aria-disabled没有明确列出，但概念是相同的）：http://html5doctor .com/on-html-belts-and-aria-braces/
If my answer looks similar to your other questionabout requiredversus aria-required, that is because it is essentially the same answer.
回答by Adam
In short, you do not need aria-disabled any longer. Just use disabled.
简而言之，您不再需要 aria-disabled。只使用禁用。
To complete @aardrian answer.
完成@aardrian 的回答。
When you use an HTML control which supports natively the disabledattribute, you do not need the aria-disabledattribute.
当您使用原生支持该disabled属性的 HTML 控件时，您不需要该aria-disabled属性。
If you use a custom control then you can use the aria-disabledattribute. For instance, in the following code, the "Pause" button will be disabled until the "Play" button is pressed (our javascript will then change tabindexand aria-disabledattributes).
如果您使用自定义控件，则可以使用该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" />
Note that according to W3C:
请注意，根据 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.
禁用的元素可能无法从 Tab 键顺序获得焦点。[...] 除了设置 aria-disabled 属性外，作者应该更改外观（变灰等）以表明该项目已被禁用。
回答by brandonbradley
An important distinction is that when using voice-over the item with just the 'disabled' property will not be tabbed to. However the item with aria-disabled="true" will still be able to receive focus and report to the screen reader as dimmed.
一个重要的区别是，当使用画外音时，只有“禁用”属性的项目将不会被标签化。但是，带有 aria-disabled="true" 的项目仍将能够接收焦点并向屏幕阅读器报告为变暗。
