MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

比较版本

键盘导航的JavaScript组件

更改版本

修订版 549727:

由 Othella 在 进行的修订 549727

修订版 559841:

由 Othella 在 进行的修订 559841

标题:
键盘导航的JavaScript组件
键盘导航的JavaScript组件
网址缩略名:
Web/Accessibility/Keyboard-navigable_JavaScript_widgets
Web/Accessibility/Keyboard-navigable_JavaScript_widgets
内容:

修订版 549727
修订版 559841
n158    <h4 id="Disabled_controls">n158    <h4 id=".E5.A4.B1.E6.95.88.E6.8E.A7.E4.BB.B6">
n164    <h3 id="Managing_focus_inside_groups">n164    <h3 id=".E5.9C.A8.E7.BB.84.E5.90.88.E6.8E.A7.E4.BB.B6.E9.87.8
 >C.E9.9D.A2.E7.AE.A1.E7.90.86focus">
n168      When a user tabs away from a widget and returns, focus shoun168      当用户从一个组件tab离开之后focus回来,焦点应该回到离开之时正被focus中的元素上,比如某个树节点或者网格单元
>ld return to the specific element that had focus, for example, th>. 有两种办法完成这一点:
>e tree item or grid cell. There are two techniques for accomplish 
>ing this: 
n171      <li>Roving <code>tabindex</code>: programmatically moving fn
>ocus 
172      </li>
nn172        <code><font face="Open Sans, sans-serif"><span style="lin
 >e-height: 21px;">流动</span></font>tabindex</code>: 通过编程移动focus
173      </li>
174      <li>
174        <code>aria-activedescendent</code>: managing a 'virtual' 175        <code>aria-activedescendent</code>: 管理一个‘虚拟’focus
>focus 
n178      <span style="color: rgb(0, 0, 0);"><span class="toctext">Ten179      <span style="color: rgb(0, 0, 0);"><span class="toctext">方法
>chnique 1: Roving tabindex</span></span>> 1: 流动 tabindex</span></span>
179    </h4>
180    <p>180    </h4>
181      Setting the <code>tabindex</code> of the focused element to
> "0" ensures that if the user tabs away from the widget and then  
>returns, the selected item within the group retains focus. Note t 
>hat updating the <code>tabindex</code> to "0" requires also updat 
>ing the previously selected item to <code>tabindex="-1"</code>. T 
>his technique involves programmatically moving focus in response  
>to key events and updating the <code>tabindex</code> to reflect t 
>he currently focused item. To do this: 
182    </p>181    <p>
182      在被focus中元素上设置<code>tabindex</code> 为 "0",这样可以保证在用户在tab离开又返回
 >后仍然选中组合组件中之前被选中的那项。注意在更改tabindex为“0”同时需要把之前选中过的那项设置tabindex=“-1”。
 >这个方法包含在键盘事件里面通过程序移动焦点以及更改 tabindex到当前focus中的那项上。需要做以下几步:
183    <p>183    </p>
184      Bind a key down handler to each element in the group, and w184    <p>
>hen an arrow key is used to move to another element: 
185      在每个元素上绑定key down事件,当捕捉到控制移动到另外元素的方向键时:
n187      <li>programmatically apply focus to the new element,n188      <li>通过编码把focus应用到新元素上,
n189      <li>update the <code>tabindex</code> of the focused elementn190      <li>更改被focus中元素上的tabindex为“0”
> to "0", and 
n191      <li>update the <code>tabindex</code> of the previously focun192      <li>更改之前被focus中元素的tabindex为“-1”.
>sed element to "-1". 
n195      Here's an example of a <a class="external text" href="http:n196      这里有个&nbsp;<a class="external text" href="http://www.oaa-acc
>//www.oaa-accessibility.org/example/40/" rel="nofollow" title="ht>essibility.org/example/40/" rel="nofollow" title="http://www.oaa-
>tp://www.oaa-accessibility.org/example/40/">WAI-ARIA tree view</a>accessibility.org/example/40/">WAI-ARIA tree view</a>&nbsp;的例子是使用
>> using this technique.>这种方案的。
n198      Tipsn199      提示
n201      Use element.focus() to set focusn202       element.focus() 来设置焦点 focus
n204      Do not use <code>createEvent()</code>, <code>initEvent()</cn205      不要使用&nbsp;<code>createEvent()</code>, <code>initEvent()</co
>ode> and <code>dispatchEvent()</code> to send focus to an element>de> 和 <code>dispatchEvent()</code>&nbsp;来发送焦点事件到元素上。DOM的focus事件被认
>. DOM focus events are considered informational only: generated b>为仅是一种信息:当有事物被focus中的时候系统自动产生的,但是实际上没有用来设置焦点。用&nbsp;<code>element.
>y the system after something is focused, but not actually used to>focus()</code> 来替代。
> set focus. Use <code>element.focus()</code> instead. 
n207      Use onfocus to track the current focusn208      用 onfocus 来追踪当前focus
t210      Don't assume that all focus changes will come via key and mt211      不要认为所有的焦点变化都来自于键盘和鼠标事件:像屏幕阅读器之类的辅助技术可以设置焦点到任意一个可focus中的元素上。
>ouse events: assistive technologies such as screen readers can se>用onfocus和onblur来追踪焦点。
>t the focus to any focusable element. Track focus using <code>onf 
>ocus</code> and <code>onblur</code> instead. 
211    </p>
212    <p>212    </p>
213    <p>
213      <code>onfocus</code> and <code>onblur</code> can now be use214      <code>onfocus</code>  <code>onblur</code>&nbsp;现在可以在每个元素上使
>d with every element. There is no standard DOM interface to get t>用。 There is no standard DOM interface to get the current document
>he current document focus, so if you want to track that you'll ha> focus, so if you want to track that you'll have to keep track of
>ve to keep track of it in a JavaScript variable.> it in a JavaScript variable.

返回历史