files/zh-cn/web/accessibility/aria/roles/button_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

---
title: Using the button role
slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
tags:
  - ARIA
  - 可访问性
  - 无障碍
translation_of: Web/Accessibility/ARIA/Roles/button_role
---
<p><strong><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></strong> 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，<code>role="button"</code> 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 <code>aria-pressed</code> 属性组合使用，以创建切换按钮。</p>

<div class="note"><strong>注意: </strong>在可能的情况下，建议使用原生HTML按钮 (<code>&lt;button&gt;</code>, <code>&lt;input type="button" /&gt;</code>,  <code>&lt;input type="submit" /&gt;, &lt;input type="reset" /&gt; </code>and <code>&lt;input type="image" /&gt;</code>) 而不是按钮角色，因为原生HTML按钮得到了较老用户代理和辅助技术的广泛支持。原生HTML按钮也支持键盘和焦点需求，不需要额外的定制。</div>

<h2 id="键盘_and_聚焦">键盘 and 聚焦</h2>

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

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

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

<h2 id="可切换的按钮">可切换的按钮</h2>

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

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

<h2 id="Labeling_buttons">Labeling buttons</h2>

<p>按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> 或 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> 属性提供可访问的名称。</p>

<h2 id="对用户代理和辅助技术的可能影响">对用户代理和辅助技术的可能影响</h2>

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

<div class="note"><strong>Note:</strong> 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。</div>

<h2 id="Examples">Examples</h2>

<h3 id="ARIA_Basic_Button">ARIA Basic Button</h3>

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

<pre class="brush: html">&lt;span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()"&gt;Save&lt;/span&gt;
</pre>

<h3 id="ARIA_Toggle_Button">ARIA Toggle Button</h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;button type="button" aria-pressed="false" onclick="handleBtnClick(event)"&gt;
  Native button toggle
&lt;/button&gt;

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

<h4 id="CSS">CSS</h4>

<pre class="brush: css">button,
[role="button"] {
    padding: 3px;
    border: 1px solid #CCC;
}

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

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">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);
}</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('ARIA_Toggle_Button')}}</p>

<h2 id="Notes">Notes </h2>

<h3 id="ARIA_attributes_used">ARIA attributes used</h3>

<ul>
 <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li>
 <li><code><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed">aria-pressed</a></code></li>
</ul>

<h3 id="Additional_resources">Additional resources</h3>

<ul>
 <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Strong native semantics in HTML5</a></li>
 <li><a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a></li>
</ul>