` or `
`) 那么必须使用`tabindex` 属性来使按钮可聚焦。
+`button` 角色可以和 [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 发生一起使用，以[创建切换按钮](#toggle_buttons)。
-按钮可以由鼠标用户和键盘用户操作。对于原生 HTML `
+```
+
+由于 `button` 的子元素都是 presentation，因此相当于以下的代码：
+
+```html
+按钮的标题
+```
+
+从辅助技术的视角来看，这个标题不存在，因为前面的代码片段在 [辅助功能树](/zh-CN/docs/Glossary/Accessibility_tree) 中相当于以下内容：
+
+```html
+按钮的标题
+```
+
+### 关联的 ARIA 角色、状态和属性
+
+- [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
+ - : `aria-pressed` 属性定义的按钮是否为切换按钮。此值描述了按钮的状态。值包括 `aria-pressed="false"`（按钮还没有被按下）、`aria-pressed="true"` （按钮当前已被按下）和 `aria-pressed="mixed"` （按钮被视为部分按下）。如果此属性被忽略，或者设置为默认值 `aria-pressed="undefined"`，那么元素不支持被按下。
+- [`aria-expanded`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
+ - : 如果按钮控制了其他元素的分组，`aria-expanded` 状态指示了被控制的分组当前是被展开还是折叠。如果按钮有设置了 `aria-expanded="false"`，那么分组当前没有开，如果被展开了，则按钮会有 `aria-expanded="undefined"`，如果属性被忽略，则是不可展开。
+
+
+### 基本的按钮
-**Warning:** 把给一个链接标记为按钮角色的链接时要谨慎。按钮将使用 Space or Enter 键触发，而链接被期望使用 Enter 键触发。换句话说，当链接被用来作为按钮的时候，仅仅添加`role="button"`是不够的。还需要添加一个 key 事件处理程序来侦听 Space 键，以便与原生按钮保持一致。
+Buttons should always have an accessible name. For most buttons, this name will be the same as the text inside the button, between the opening and closing tags. In some cases, for example buttons represented by icons, the accessible name may be provided from the [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attributes.
-## 可切换的按钮
+## 切换按钮
-使用`role="button"`的一个优点是它允许创建切换按钮。一个切换按钮可以有两个状态:pressed，not pressed。除了 `button`角色之外，按钮是否为切换按钮，也可以用`aria-pressed`的属性来表示。
+切换按钮通常有两种状态：按下、没有按下，第三个混合的状是指，切换按钮控制了其他的元素，例如其他的切换按钮或者复选框，而不共享同一个值。按钮是否被按下可以由 `button` 角色（如果元素还不是原生的 button 元素）加上 [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 表示：
-- 如果没有 `aria-pressed`表明这不是一个切换按钮。
-- 如果 `aria-pressed="false"` 表示这个按钮当前是 not pressed 的。
-- 如果 `aria-pressed="true"` 表示这个按钮当前是 pressed 的。
-- 如果 `aria-pressed="mixed"` 则认为按钮部分是 partially pressed 的。
+- 如果没有 `aria-pressed`，说明这不是一个切换按钮。
+- 如果 `aria-pressed="false"`，说明这个按钮当前没有被按下。
+- 如果 `aria-pressed="true"`。说明这个按钮当前已被按下。
+- 如果 `aria-pressed="mixed"`，说明这个按钮被认为是部分按下的。
-## Labeling buttons
+As an example, the mute button on an audio player labeled "mute" could indicate that sound is muted by setting the `aria-pressed` state true. The label of a toggle button should not change when its state changes. In our example the label remains "Mute" with a screen reader reading "Mute toggle button pressed" or "Mute toggle button not pressed" depending on the value of `aria-pressed`. If the design were to call for the button label to change from "Mute" to "Unmute," a toggle button would not be appropriate, so the `aria-pressed` attribute would be omitted.
-按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) 或 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) 属性提供可访问的名称。
+### 键盘交互
-## 对用户代理和辅助技术的可能影响
+| 按键 | 功能 |
+| ---------------- | --------------------- |
+| Enter | 激活按钮。 |
+| Space | 激活按钮。 |
-当使用 `button` 角色时，用户代理应该将该元素公开为操作系统的易访问性 API 中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说："点击"+ 按钮的可访问的 name 就能激活这个按钮。
+Following button activation, focus is set depending on the type of action the button performs. For example, if clicking the button opens a dialog, the focus should move to the dialog. If the button closes a dialog, focus should return to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element. If the button alters the current context, such as muting and unmuting an audio file, then focus typically remains on the button.
-> **备注：** 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。
-## Examples
+### Required JavaScript Features
-### ARIA Basic Button
+#### Required event handlers
-在下面的代码片段中，一个 span 元素已经被赋予了按钮角色。由于使用的是 `` 元素，因此需要提供 `tabindex` 属性使按钮的可聚焦并成为 tab 顺序流中的一部分。注意，这段代码提供了 CSS 样式，以使 ``元素看起来像一个按钮， `handleBtnClick` 和`handleBtnKeyPress` 是事件处理程序，当鼠标单击、 Space or Enter 被按下时，执行该按钮的操作。
+Buttons can be operated by mouse, touch, and keyboard users. For native HTML `