我需要<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"在我的代码中？

Answer 1

许多HTML5元素都带有默认的隐式ARIA语义,并且显式设置这些默认值是" 不必要的,不推荐 ".

查看button元素,您可以看到它默认具有该button角色.

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

Answer 2

TL; DR 对于给定的情况,role=button 应该指定,因为它表现为切换按钮.type=button也应该用.

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

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

在按钮元素上使用role =按钮

您通常不需要使用role=button,因为按钮元素具有强大的本机语义.此外,根据W3C的HTML5规范中的ARIA使用说明:

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

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

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

HTML语言功能:按钮

默认ARIA语义: role = button

作者应该明确定义默认的ARIA语义吗？不(注0a)

注意0a:是如果按钮元素上使用了按下aria的属性

所以你应该设置切换按钮的角色,但不是.

在按钮上使用type =按钮

既然问题也提到了type=button,我会详细说明.根据W3C的HTML5规范中的按钮部分type=submit,按钮元素上类型的缺失默认值是,其激活行为是提交表单所有者(如果有).没有与之关联的激活行为type=button.

因此,type=button 应根据具体情况指定.