unslug zh-cn: move

1 files changed, 122 insertions, 0 deletions

diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.html b/files/zh-cn/web/accessibility/aria/roles/button_role/index.html
new file mode 100644
index 0000000000..e0e35c449a
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/roles/button_role/index.html
@@ -0,0 +1,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>