按钮角色 role=“button“

描述

按钮角色用于可点击元素，用户点击按钮来触发一些动作。按钮角色使用 `role="button"` 表示。

<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>

上面示例创建一个可捕获焦点、可点击按钮。不同于常风的按钮：

<button id="saveChanges">Save</button>

按钮角色用于向屏幕阅读器标识元素为按钮。按钮的常见用法是执行动作，如提交表单，打开弹窗或者执行插入数据或显示信息的动作等等。

常见的按钮是 button, role="button" 可以创建可切换状态的非按钮元素，如菜单按钮。按钮有两种状态，一是按下，二是非按下。这两种状态使用 aria-pressed 属性的 true 或 false 值来表示。aria-pressed="undefined" 是默认值表示不支持按。

按钮应该有可访问名。通常是按钮中的文字。如果按钮没有文字，如图标按钮，可用 [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) 或 [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) 标识。

需要添加的 JS 功能

按钮可由鼠标，触摸，或键盘交互。对于原生 <button> 元素，当按钮有焦点时，用户按 Space 或 Enter 就可以触发按钮的 onclick 事件。如果用其他标签创建按钮时，onclick 事件只有在用户用鼠标点击元素时才会触发，即使有 role="button" 也不行。因些必需要添加添加一些事件才能支持 Space 或 Enter 操作。

onclick: 处理鼠标点击或触摸事件。

onKeyDown: 处理 Enter 或 Space 操作。

示例

1. 创建一个 span 元素表示按钮，设置 tabindex 属生使按钮可聚焦且有焦点顺序。使用 CSS 样式设置按钮外观。handleBtnClick 和 handleBtnKeyDown 事件处理句柄用于按钮处理鼠标点击或 Space 或 Enter 的操作，其动作为向列表添加新名称。

html

  <h1>ARIA Button Example</h1>

    <ul id="nameList"></ul>

    <label for="newName">Enter your Name: </label>

    <input type="text" id="newName">

    <span role="button" tabindex="0" οnclick="handleCommand()" onKeyDown="handleCommand()">Add Name</span>

css

[role="button"] {

  padding: 2px;

  background-color: navy;

  color: white;

  cursor: default;

}

[role="button"]:hover,

[role="button"]:focus,

[role="button"]:active {

   background-color: white;

   color: navy;

}

ul {

    list-style: none;

}

js

function handleCommand(event) {

    // Handles both mouse clicks and keyboard

    // activate with Enter or Space

    // Get the new name value from the input element

    let newNameInput = document.getElementById('newName');

    let name = newNameInput.value;

    newNameInput.value = ''; // clear the text field

    newNameInput.focus();  // give the text field focus to enable entering and additional name.

    // Don't add blank entries to the list.

    if(name.length > 0) {

        listItem = document.createElement('li');

        listItem.appendChild(document.createTextNode(name));

        // Add the new name to the list.

        let list = document.getElementById('nameList');

        list.appendChild(listItem);

    }

}

2. 使用 span 元素表示按钮，切换其 aria-pressed 状态。

html

<span role="button" tabindex="0"

 aria-pressed="false" οnclick="handleBtnClick(event)"

 onKeyDown="handleBtnKeyDown(event)">

  Mute Audio

</span>

<audio id="audio" src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">

  Your browser does not support the <code>audio</code> element.

</audio>

css

button,

[role="button"] {

    padding: 3px;

    border: 2px solid transparent;

}

button:active,

button:focus,

[role="button"][aria-pressed="true"] {

    border: 2px solid #000;

}

js

function handleBtnClick(event) {

  toggleButton(event.target);

}

function handleBtnKeyDown(event) {

  // Check to see if space or enter were pressed

  if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // "Spacebar" for IE11 support

    // Prevent the default action to stop scrolling when space is pressed

    event.preventDefault();

    toggleButton(event.target);

  }

}

function toggleButton(element) {

  var audio = document.getElementById('audio');

  // 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);

  // toggle the play state of the audio file

  if(pressed) {

     audio.pause();

  } else {

     audio.play();

  }

}

可访问性关注

按钮是可交互的控件，因些需要焦点。如果添加了 button 角色但元素 (如 <span>, <div> 或 <p>) 本身不可捕获焦点，那么可用 tableindex 属性使其可捕获焦点。

注意链接充当按钮，链接其望用 Enter 打开，而按钮是 Space 或 Enter. 给链接加 role="button" 是不够的，还需要处理 Space 操作使其与原生按钮一致。

当使用 button 角色时，屏幕阅读器会将元素识别为按钮，通常说点击后加元素的可访问名。可访问名是元素的内容或者来自 aria-label 或 aria-labelledby 属性指定，或者是元素的描述。

思考

思考有助天更好理解问题，看完上面的描述后，不妨思考以下几个问题?

1. 按钮角色 role="button" 主要用来干什么的?

2. 如何创建自定义按钮?

2. 按钮的可访问性。