Using the button role

按钮是交互式控件，因此其本身是可聚焦的。如果button 角色被添加到一个自身不可聚焦的元素 (such as <span>, <div> or <p>) 那么必须使用tabindex 属性来使按钮可聚焦。

按钮可以由鼠标用户和键盘用户操作。对于原生 HTML <button> 元素，按钮的 onclick 事件会在鼠标单击和按下键盘的 Space or Enter 时被触发，同时这个按钮处于聚焦状态。但是如果使用其他标签来创建“自定义按钮”，那么onclick事件只会在点击鼠标光标时触发，即使使用role="button" 。因此，开发人员必须向元素添加一个单独的关键事件处理程序，以便在按下 Space or Enter 时触发按钮。

Warning: 把给一个链接标记为按钮角色的链接时要谨慎。按钮将使用 Space or Enter 键触发，而链接被期望使用 Enter 键触发。换句话说，当链接被用来作为按钮的时候，仅仅添加role="button"是不够的。还需要添加一个 key 事件处理程序来侦听 Space 键，以便与原生按钮保持一致。

使用role="button"的一个优点是它允许创建切换按钮。一个切换按钮可以有两个状态:pressed，not pressed。除了 button角色之外，按钮是否为切换按钮，也可以用aria-pressed的属性来表示。

• 如果没有 aria-pressed表明这不是一个切换按钮。
• 如果 aria-pressed="false" 表示这个按钮当前是 not pressed 的。
• 如果 aria-pressed="true" 表示这个按钮当前是 pressed 的。
• 如果 aria-pressed="mixed" 则认为按钮部分是 partially pressed 的。

按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 aria-label 或 aria-labelledby 属性提供可访问的名称。

当使用 button 角色时，用户代理应该将该元素公开为操作系统的易访问性 API 中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说："点击"+ 按钮的可访问的 name 就能激活这个按钮。

在下面的代码片段中，一个 span 元素已经被赋予了按钮角色。由于使用的是 <span> 元素，因此需要提供 tabindex 属性使按钮的可聚焦并成为 tab 顺序流中的一部分。注意，这段代码提供了 CSS 样式，以使 <span>元素看起来像一个按钮， handleBtnClick 和handleBtnKeyPress 是事件处理程序，当鼠标单击、 Space or Enter 被按下时，执行该按钮的操作。

<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>

在这个片段中，使用 button 角色和 aria-pressed 属性，来将 <span> 元素转换为一个切换按钮，当按钮被激活时， aria-pressed 的值在 true 和 false 之间切换。

HTML

<button type="button" aria-pressed="false" onclick="handleBtnClick(event)">
  Native button toggle
</button>

<span role="button" tabindex="0"
 aria-pressed="false" onclick="handleBtnClick(event)"
 onKeyPress="handleBtnKeyPress(event)">
  Span button toggle
</span>

CSS

button,
[role="button"] {
    padding: 3px;
    border: 1px solid #CCC;
}

button[aria-pressed="true"],
[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
}

JavaScript

function handleBtnClick(event) {
  toggleButton(event.target);
}

function handleBtnKeyPress(event) {
  // Check to see if space or enter were pressed
  if (event.key === " " || event.key === "Enter") {
    // Prevent the default action to stop scrolling when space is pressed
    event.preventDefault();
    toggleButton(event.target);
  }
}

function toggleButton(element) {
  // Check to see if the button is pressed
  var pressed = (element.getAttribute("aria-pressed") === "true");
  // Change aria-pressed to the opposite state
  element.setAttribute("aria-pressed", !pressed);
}

• button
• aria-pressed

• Strong native semantics in HTML5
• Notes on Using ARIA in HTML