twitter-bootstrap 我需要在 <button> 上使用 role="button" 吗？

Do I need role="button" on a <button>?

提问by QuasarDonkey

I've noticed in all of Bootstrap's examples using buttonelements, they include role="button"(and type="button"), such as:

我注意到在所有使用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>

Won't accessibility software already know that a buttonelement is meant to act as a button? Is there any reason I should include role="button"and/or type="button"in my code?

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

回答by unor

Many HTML5 elements come with default implicit ARIA semantics, and explicitly setting these default values is "unnecessary and not recommended".

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

Looking at the buttonelement, you can see that it has the buttonroleby default.

查看buttonelement，您可以看到它默认具有button角色。

So, setting role="button"is "not recommended", but allowed. It mighthelp older user agents that support WAI-ARIA but not HTML5.

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

回答by QuasarDonkey

TL;DRFor the case given, role=buttonshouldbe specified, because it behaves as a toggle button. type=buttonshould be used too.

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

All Bootstrap buttons don't use role=button

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

The information in the question stating that all buttons in Bootstrap's examples use role=buttonis incorrect. Only buttons that logically behave as toggle buttons are labelled as such.

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

Using role=button on a button element

在按钮元素上使用 role=button

You do notneed to use role=buttonin general, as button elements have strong native semantics. Furthermore, according to the ARIA usage note in W3C's HTML5 specification:

你并不需要使用role=button在一般情况下，按钮元素有很强的本地语义。此外，根据W3C 的 HTML5 规范中的ARIA 使用说明：

In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

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

There is one exception, for toggle buttons, which is the case in the example given.

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

According to the Recommendations Table in W3C's Using WAI-ARIA in HTML:

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

HTML language feature:button

Default ARIA semantics:role=button

Should authors explicitly define default ARIA semantics? NO (note 0a)

Note 0a:YES If the aria-pressed attribute is being used on the button element

HTML 语言功能：按钮

默认 ARIA 语义：role=button

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

Note 0a:YES 如果按钮元素上使用了 aria-pressed 属性

So you should set the role for toggle buttons, but not otherwise.

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

Using type=button on a button

在按钮上使用 type=button

Since the question also mentions type=button, I'll elaborate. According to the section on buttons in the W3C's HTML5 specification, the missing default value for type on button elements is type=submit, whose activation behavior is to submit the form owner if it has one. There is no activation behavior associated with type=button.

由于问题也提到了type=button，我会详细说明。根据W3C 的 HTML5 规范中关于按钮的部分type=submit，按钮元素类型缺少的默认值是，其激活行为是提交表单所有者（如果有）。没有与 相关的激活行为type=button。

Therefore, type=buttonshouldbe specified for the case given.

因此，type=button应针对给定的情况进行指定。

回答by MattD

The <button>tag can be one of three things:

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

1. A regular button that does something you specify upon click (type = button).
2. A submit button that submits the form when clicked (type = submit).
3. A reset button that resets the form to its inital values when clicked (type = reset).

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

It's good to specify which type you intend to be used, because different browsers use different defaults for buttons.

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

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

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

The role doesn't haveto be included, but it's nice for accessibilty software.

该角色不具有被包括在内，但它是很好的平易软件。

So, do you have to include them?No, you don't, but it's generally advisable that you do.

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

回答by rnrneverdies

Heresay:

这里说：

Note: Where possible, it is recommended to use native HTML buttons (, and ) rather than the button role, as native HTML buttons are more widely supported by older user agents and assistive technology. Native HTML buttons also support keyboard and focus requirements by default, without need for additional customization.

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

Possible effects on user agents and assistive technology

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

When the button role is used, user agents should expose the element as a button control in the operating system's accessibility API. Screen readers should announce the element as a button and describe its accessible name. Speech recognition software should allow the button to be activated by saying "click" followed by the button's accessible name. Note: Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

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

Then you should add it. In order to expose it to the user.But is not normative.

那么你应该添加它。为了将其暴露给用户。但不规范。

回答by Cemal

According to W3C Html5 Button

根据W3C Html5 按钮

The missing value default is the Submit Button state.

If the type attribute is in the Submit Button state, the element is specifically a submit button.

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

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

Unless you're going to use buttons to submit a form, you need to explicitly set type="button"as omitting this, as stated in W3C specification, it will act as a submit button, will submit your form. To avoid unnecessary submits, you need to explicitly set type="button"to your <button>s.

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

Since most of the bootstrap's buttons are for triggering a javascript function or similar behaviour, to avoid accidental unintentional submit behaviour upon code copy&paste and in the name of normalization with good practice, type="button"and role="button"attributes are added to <button>

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

回答by Milan Panigrahi

role="button"

This is not mandatory for Bootstrap

角色=“按钮”

这对于 Bootstrap 不是强制性的

回答by Mike

The requirements and recommendations are now much more exhaustively documented in "ARIA in HTML"

要求和建议现在更详尽地记录在“HTML 中的 ARIA”中

The following table provides normative per-element document-conformance requirements for the use of ARIA markup in HTML documents and describes the implicit ARIA semantics that apply to HTML elements as defined in the HTML Accessibility API Mappings 1.0 [html-aam-1.0] specification.

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

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

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