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

简而言之，您不再需要咏叹调禁用。只需使用禁用。

完成@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属性外，作者应该更改外观（灰显等）以指示该项已被禁用。

Answer 2

我可以举个例子，把它放到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。

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

如果我的回答类似于your other question关于required与aria-required的回答，那是因为回答基本相同。

Answer 3

一个重要的区别是，当只使用“禁用”项目对项目进行画外音时。属性不会被标记为。然而，具有aria-disabled =＆＃34; true＆＃34;的项目仍然可以获得焦点并向屏幕阅读器报告为灰色。

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

3 个答案: