我需要在<button>标签上使用role="button"吗？

Question

我注意到 Bootstrap 所有使用 button 元素的示例中，它们都包含了 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"？

- Daniel Hanrahan

---

我在使用Bootstrap时不使用这两个字段也能正常工作，但遵循Bootstrap的示例不会有坏处。我建议在发布此类问题之前，先尝试删除这两个字段并进行测试。朋友，试错是一种很好的学习工具。 :) - Zeeba

Answer 1

许多HTML5元素都带有默认隐式ARIA语义，明确设置这些默认值是“不必要且不推荐的”。

看一下button元素，你会发现它默认具有button角色。

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

- unor

---

根据W3C文档，button元素具有默认的role="button"。 如果指定了role，则必须是以下之一：button、link、menuitem、menuitemcheckbox、menuitemradio或radio。 - djibe

Answer 2

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

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

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

在button元素上使用role=button

通常情况下，您不需要使用role=button，因为按钮元素具有强大的本地语义。此外，根据W3C的HTML5规范中ARIA usage note的规定：

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

然而，在切换按钮的情况下，存在一个例外，这也是所给示例的情况。

根据W3C的在HTML中使用WAI-ARIA建议表：

HTML语言特性：button

默认的ARIA语义：role=button

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

注0a：如果在button元素上使用aria-pressed属性，则为YES

因此，应为切换按钮设置角色，但否则不需要。

在按钮上使用type=button

由于问题还提到了type=button，我会详细解释。根据W3C的HTML5规范中有关按钮的章节，button元素上缺少type的默认值是type=submit，其激活行为是提交其所属的表单（如果有）。没有与type=button相关联的激活行为。

因此，在这种情况下应该指定type=button。

- Daniel Hanrahan

---

我似乎在当前文档中找不到有关 aria-pressed 异常的任何提及。你能否确认它已经不存在，或者更新你的回答？ - joshhunt

Answer 3

标签可以是以下三种之一：

1. 一个普通按钮，当单击时执行您指定的操作（type = button）。
2. 一个提交按钮，当单击时提交表单（type = submit）。
3. 一个重置按钮，当单击时将表单重置为其初始值（type = reset）。

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

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

角色不一定需要包含，但对于辅助功能软件来说很好。

那么，您必须包括它们吗？ 不必要，但通常建议这样做。

- MattD

---

我之前一直以为按钮默认的type是type="button"，但是经过进一步的研究，whatwg和w3c说type="submit"才是实际上缺失的默认值。 - Daniel Hanrahan

我建议阅读http://www.w3fools.com/。你所说的“对辅助软件友好”是什么意思？ - Volker E.

Answer 4

这里说：

注意：在可能的情况下，建议使用本地HTML按钮（<button>和<input type="button">），而不是使用按钮角色。因为本地HTML按钮被更多老用户代理和辅助技术支持。本地HTML按钮也默认支持键盘和焦点要求，无需额外定制。

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

当使用按钮角色时，用户代理应将元素公开为操作系统辅助功能API中的按钮控件。屏幕阅读器应将元素作为按钮进行公告，并描述其可访问名称。语音识别软件应允许通过说出“单击”后跟按钮的可访问名称来激活按钮。 注意：对于如何处理此技术，意见可能不同。上述提供的信息是其中之一，因此不规范。

然后您应该添加它。以便向用户公开。 但不是规范的。

- rnrneverdies

---

这主要是为盲人设计的。 - rnrneverdies

Answer 5

现在，“ARIA in HTML”文档更加详细地记录了要求和推荐。

以下表格提供了关于在HTML文档中使用ARIA标记的每个元素的规范性文档一致性要求，并描述了HTML元素隐式应用的ARIA语义，这些语义在HTML无障碍API映射1.0 [html-aam-1.0]规范中定义。

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

- Mike

Answer 6

根据W3C Html5 Button的规定：

缺省值为“提交按钮”状态。

如果type属性处于“提交按钮”状态，则该元素是特定的提交按钮。

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

由于大多数Bootstrap的按钮用于触发JavaScript函数或类似行为，为避免在代码复制和粘贴时意外提交行为，并符合良好实践的规范化，<button>添加了type="button"和role="button"属性。

- Cemal

Answer 7

role="button"

这对于Bootstrap来说不是必需的

- Milan Panigrahi

---

我在这里看到了引用块。你是在引用某个地方的内容吗（如果是，那是哪里？）还是只是混淆的格式？ - ggorlen