disabled的使用

Posted 2023-04-17

参考技术A 开发时候我们有时会把a标签做成button的样式，再a标签加入disabled属性只能使按钮变成灰色，不能禁用其原有的点击事件。即还是可以触发a的点击事件。
disabled属性只对input、button、select、option有效果（可能还有别的），并且使用disabled="disabled"时，不管给定任何value，只要出现了disabled，都可以使标签无效。所以需要使用的时候加入disabled属性就行了。

因此如果想使用普通类型的button，务必要加上type="button"属性，否则在form里会自动触发提交。
button的disabled属性是确实能够禁止按钮的任何事件的。

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

【中文标题】何时对 HTML 元素使用 disabled 属性与 aria-disabled 属性？

【英文标题】：When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

【发布时间】：2016-10-29 18:33:42

【问题描述】：

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

【参考方案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 的your other question 相似，那是因为它本质上是相同的答案。

【讨论】：

@Black，您的问题提出了一个明显错误的断言。 ARIA 非常有用。在这种情况下，由于浏览器没有正确地将 disabled 状态传递给辅助技术，因此需要 ARIA 来弥补这一差距，直到浏览器正确处理它。

所以屏幕阅读器会完全忽略有一个按钮被禁用的事实？这与有视力的用户所获得的体验不是很不同吗？即使知道提交按钮被禁用，屏幕阅读器用户难道不会在寻找它吗？

@gaurav5430，不，屏幕阅读器不会完全忽略它。它将它从页面的选项卡流中删除，就像浏览器对禁用控件所做的那样。浏览页面的屏幕阅读器用户会找到它。如果屏幕阅读器需要一个，该用户通常会开始箭头。

绝对没有那么简单。如果您要制作的表单除非填写正确（有时是必需的）否则无法提交，您应该使用aria-disabled 而不是disabled，以便辅助技术用户不会完全隐藏提交按钮。您还应该通过aria-describedby 将禁用按钮与验证错误相关联，或者传递无法以其他方式提交表单的信息。请参阅此示例a11y-101.com/development/aria-disabled

@aardrian 很遗憾，您错过了重点。如果您必须实现一个禁用表单的提交按钮直到它被填写的设计（我认为这是一个糟糕的设计，但这是我个人的看法），您应该使用 aria-disabled combined 和样式和阻止表单提交的功能。 SR 用户完全没有提交按钮，这非常令人费解。关于这个主题有很多文章。例如。 css-tricks.com/making-disabled-buttons-more-inclusive

【参考方案2】：

一个重要的区别是，当使用画外音时，只有“禁用”属性的项目将不会被标记。但是，带有 aria-disabled="true" 的项目仍然能够接收焦点并向屏幕阅读器报告为变暗。

【讨论】：

感谢您的回答。在上面的其他答案中看到disabled 与aria-disabled 相同，这是令人担忧的。尽管ARIA 1.0 没有将disabled 描述为aria-disabled 的相关概念，并且在像VoiceOver 这样的流行屏幕阅读器中disabled 导致元素不可感知，就像根本无法读出一样。

这是正确答案。使用禁用属性的屏幕阅读器和其他辅助设备的体验非常差。在正常导航期间根本不会宣布禁用的控件。这是我知道原生 HTML 解决方案的唯一情况，即使使用得当并且标记是语义的，也是无效的，应该使用 aria-attribute 来代替它。

缓解这种情况的一个好方法是通过在元素上设置 tabindex="0" 将项目显式放入选项卡流中。禁用的元素仍然可以通过 Tab 键访问，并且对屏幕阅读器用户仍然有意义。然后，这也可以与自定义消息传递（自定义工具提示或 areia-live 区域）相结合，让用户知道项目被禁用的原因和/或他们需要做什么来启用它。

这是正确答案。这两个属性不是 100% 可互换，尽管语义几乎相同。一些人认为禁用的控件应该始终从 tab 顺序中删除（在这种情况下，使用disabled） - 请注意，通常有其他方法可以发现 UI 控件而不是 tab。其他人更喜欢通过选项卡“发现”禁用的控件（在这种情况下，使用aria-disabled，并带有适当的样式）。无论哪种方式，您都将符合 WCAG，但请仔细进行用户测试以发现适合您项目的属性。

【参考方案3】：

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

完成@aardrian 的回答。

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

如果您使用自定义控件，则可以使用aria-disabled 属性。例如，在以下代码中，“暂停”按钮将被禁用，直到按下“播放”按钮（我们的 javascript 将更改 tabindex 和 aria-disabled 属性）。

<img src="controls/play.png"
  id="audio-start"
  
  role="button"
  aria-disabled="false"
  tabindex="0" />

<img src="controls/pause.png"
  id="audio-pause"
  
  role="button"
  aria-disabled="true"
  tabindex="-1" />

请注意，根据 W3C：

禁用的元素可能不会从 Tab 键顺序中获得焦点。 [...] 除了设置 aria-disabled 属性外，作者还应该更改外观（变灰等）以表明该项目已被禁用。