【问题标题】：Do I need role="button" on a <button>?我需要在 <button> 上使用 role="button" 吗？
【发布时间】：2019-09-06 00:45:02
【问题描述】：

我注意到在所有使用 button 元素的 Bootstrap 示例中，它们包括 role="button"（和 type="button"），例如：

<div class="dropdown">
    <button id="dLabel" type="button" role="button" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false">
        Dropdown trigger <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
</div>

辅助软件不是已经知道button 元素是用来充当按钮的吗？我有什么理由应该在我的代码中包含role="button" 和/或type="button"？

【问题讨论】：

我不使用引导程序中的任何一个，它工作正常，但遵循引导程序的示例不会有什么坏处。我建议在发布这种性质的问题之前尝试删除这两个字段并对其进行测试。我的朋友反复试验是一个很棒的学习工具。 :)

标签： html twitter-bootstrap accessibility wai-aria

【解决方案1】：

许多 HTML5 元素带有 默认的隐式 ARIA 语义，并且显式设置这些默认值是“unnecessary and not recommended”。

查看button element，可以看到默认有button role。

因此，设置role="button" 是“不推荐”，但允许。它可能帮助支持 WAI-ARIA 但不支持 HTML5 的旧用户代理。

【讨论】：

正如 W3C 文档所说：按钮元素具有默认角色="按钮"。如果指定，角色必须是以下之一：按钮、链接、菜单项、菜单项复选框、菜单项收音机或收音机

【解决方案2】：

TL;DR 对于给定的情况，应该指定role=button ，因为它的行为类似于切换按钮。 type=button 也应该使用。

所有 Bootstrap 按钮都不使用 role=button

问题中说明 Bootstrap 示例中的所有按钮都使用 role=button 的信息不正确。只有在逻辑上表现为切换按钮的按钮才会被标记为这样。

在按钮元素上使用 role=button

您不需要通常需要使用role=button，因为按钮元素具有很强的原生语义。此外，根据ARIA usage note in W3C's HTML5 specification：

在大多数情况下，设置与默认隐式 ARIA 语义相匹配的 ARIA 角色和/或 aria-* 属性是不必要的，也不推荐使用，因为浏览器已经设置了这些属性。

切换按钮有一个例外，在给出的示例中就是这种情况。

根据 W3C 的 Using WAI-ARIA in HTML 中的推荐表：

HTML 语言功能： 按钮

默认 ARIA 语义： role=button

作者是否应该明确定义默认 ARIA 语义？否（注 0a）

注意 0a： YES 如果按钮元素上使用了 aria-pressed 属性

所以你应该设置切换按钮的角色，而不是其他的。

在按钮上使用 type=button

由于问题还提到type=button，我会详细说明。根据section on buttons in the W3C's HTML5 specification，按钮元素上缺少的默认值是type=submit，其激活行为是提交表单所有者（如果有的话）。没有与type=button 关联的激活行为。

因此，type=button应该为给定的情况指定。

【讨论】：

我似乎在current docs 中找不到任何提及 aria-pressed 异常的内容。您能否确认它已经消失并更新您的答案？

【解决方案3】：

<button> 标签可以是以下三种情况之一：

一个常规按钮，在单击时执行您指定的操作 (type = button)。
一个提交按钮，单击时提交表单 (type = submit)。
一个重置按钮，在单击时将表单重置为其初始值 (type = reset)。

最好指定您打算使用的类型，因为不同的浏览器使用不同的默认按钮。

http://www.w3schools.com/tags/att_button_type.asp

该角色必须被包括在内，但它对于辅助软件来说很好。

那么，您是否必须包含它们？ 不，您不需要，但通常建议您这样做。

【讨论】：

我一直认为按钮默认是type="button"，但经过进一步研究，whatwg 和w3c 说type="submit" 实际上是缺少的默认值。
我建议改为阅读w3fools.com。您所说的“非常适合无障碍软件”是什么意思？

【解决方案4】：

Here说：

注意：在可能的情况下，建议使用原生 HTML 按钮（和）而不是按钮角色，因为原生 HTML 按钮更广泛地受到旧用户代理和辅助技术的支持。默认情况下，原生 HTML 按钮也支持键盘和焦点要求，无需额外自定义。

对用户代理和辅助技术的可能影响

当使用按钮角色时，用户代理应该在操作系统的无障碍 API 中将元素作为按钮控件公开。屏幕阅读器应将元素宣布为按钮并描述其可访问的名称。语音识别软件应该允许通过说“点击”和按钮的可访问名称来激活按钮。注意：关于辅助技术应如何处理此技术的意见可能有所不同。上面提供的信息是其中一种观点，因此不具有规范性。

那么你应该添加它。为了向用户公开。但不规范。

【讨论】：

这主要是为盲人准备的。

【解决方案5】：

现在，“ARIA in HTML”中更加详尽地记录了要求和建议

下表提供了在 HTML 文档中使用 ARIA 标记的规范性每个元素的文档一致性要求，并描述了适用于 HTML 辅助功能 API 映射 1.0 [html-aam-1.0] 中定义的 HTML 元素的隐式 ARIA 语义] 规范。

https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html

【讨论】：

【解决方案6】：

根据W3C Html5 Button

缺失值默认为提交按钮状态。

如果type属性处于Submit Button状态，则该元素具体为提交按钮。

除非您打算使用按钮提交表单，否则您需要显式设置type="button" 省略此，如 W3C 规范中所述，它将充当提交按钮，将提交您的表单。为避免不必要的提交，您需要将type="button" 显式设置为您的<button>s。

由于大多数引导程序的按钮用于触发 javascript 函数或类似行为，为了避免在代码复制和粘贴时意外提交行为，并以良好实践的规范化的名义，type="button" 和 role="button" 属性被添加到 @ 987654327@

【讨论】：

【解决方案7】：

role="按钮"

这对于 Bootstrap 不是强制性的

【讨论】：