描述
按钮角色用于可点击元素，用户点击按钮来触发一些动作。按钮角色使用 `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" onclick="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" onclick="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. 按钮的可访问性。
原文链接
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
