<ul id="mb1" tabindex="0">
<li id="mb1_menu1" tabindex="-1">
<ul id="fontMenu" title="Font" tabindex="-1">
<li id="sans-serif" tabindex="-1">Sans-serif</li>
<li id="serif" tabindex="-1">Serif</li>
<li id="monospace" tabindex="-1">Monospace</li>
<li id="fantasy" tabindex="-1">Fantasy</li>
<li id="mb1_menu2" tabindex="-1">
Style
<ul id="styleMenu" title="Style" tabindex="-1">
<li id="italic" tabindex="-1">Italics</li>
<li id="bold" tabindex="-1">Bold</li>
<li id="underline" tabindex="-1">Underlined</li>
<li id="mb1_menu3" tabindex="-1">
Justification
<ul id="justificationMenu" title="Justification" tabindex="-1">
<li id="left" tabindex="-1">Left</li>
<li id="center" tabindex="-1">Centered</li>
<li id="right" tabindex="-1">Right</li>
<li id="justify" tabindex="-1">Justify</li>
被禁用的控件
当一个自定义控件变成禁用(disabled)状态时,通过设置 tabindex="-1" 把它从 tab 序列里面移除。请注意,组合微件中禁用的项目(如菜单中的菜单项)仍可使用箭头键导航。
当用户从一个微件 tab 离开之后聚焦回来,焦点应该回到离开之时正被聚焦的元素上,比如某个树节点或者网格单元。有两种办法完成这一点:
流动 tabindex: 通过编程移动焦点
aria-activedescendent: 管理一个“虚拟”焦点
在被聚焦的元素上设置 tabindex 为“0”,这样可以保证在用户在 tab 离开又返回后仍然选中组合微件中之前被选中的那项。注意在更改 tabindex 为“0”同时需要把之前选中过的那项设置 tabindex="-1"。这个方法包含在键盘事件里面通过程序移动焦点以及更改 tabindex 到当前焦点中的那项上。需要做以下几步:
在每个元素上绑定 key down 事件,当捕捉到控制移动到另外元素的方向键时:
通过编码把 focus 应用到新元素上,
更改被 focus 中元素上的 tabindex 为“0”,并且
更改之前被 focus 中元素的 tabindex 为“-1”。
下面是一个使用这种技术的 WAI-ARIA 树视图示例。
用 element.focus() 来设置焦点
不要使用 createEvent()、initEvent() 和 dispatchEvent() 来将焦点事件发送到元素上。DOM 焦点事件仅被视为信息性事件:由系统在某物被聚焦后生成,但实际上并不用于设置焦点。请使用 element.focus() 代替。
用 onfocus 来追踪当前焦点
不要认为所有的焦点变化都来自于键盘和鼠标事件:像屏幕阅读器之类的辅助技术可以设置焦点到任意一个可聚焦元素上。用 onfocus 和 onblur 来追踪焦点。
onfocus 和 onblur 现在可以在每个元素上使用。没有标准的 DOM 接口来获取当前文档的焦点,如果要跟踪焦点状态,可以使用 document.activeElement 来获取活动元素。还可以使用 document.hasFocus 来确定当前文档是否处于焦点状态。
这个办法包含绑定一个单独的事件句柄到容器窗口微件上,运用 aria-activedescendent 属性来追踪一个“虚拟”焦点。(关于 ARIA 更多的信息,查看无障碍的 Web 应用程序和微件概述。)
aria-activedescendant 属性标识当前具有虚拟焦点的后代元素的 ID。容器上的事件处理程序必须通过更新 aria-activedescendant 属性的值来响应按键和鼠标事件,并确保当前项目的样式适当(例如,使用边框或背景色)。
IE 不会触发非字母数字键的 keypress 事件。使用 onkeydown 替代。
为了确保不同输入设备的用户体验一致,键盘和鼠标事件处理程序在适当的情况下应该共享代码。例如,当用户使用方向键导航的时候,一些代码会更新相应元素的 tabindex 或风格,用鼠标点击也应该有同样的变化。
为确保键盘可用于激活元素,与鼠标事件绑定的处理程序也应与键盘事件绑定。例如,为确保 Enter 键能激活元素,如果有一个 onclick="doSomething()",则应将 doSomething() 也绑定到按键事件: onkeydown="return event.keyCode !== 13 || doSomething();"。
对于以编程方式接收焦点的项目,IE 不会自动绘制焦点轮廓。可以选择通过 this.style.backgroundColor = "gray"; 更改背景颜色,或通过 this.style.border = "1px dotted invert" 添加点状边框。在点状边框的情况下,需要确保这些元素一开始就有一个不可见的 1px 边框,这样在应用边框样式时元素就不会变大(边框会占用空间,而 IE 并没有实现 CSS 的轮廓)。
如果你用自己的微件处理按键事件,可以通过事件处理程序的返回值来阻止浏览器的缺省处理(例如,响应方向键的滚动)。如果你的事件处理程序返回 false,事件就不会传播到处理程序之外。
<span tabindex="-1" onkeydown="return handleKeyDown();">…</span>
如果 handleKeyDown() 返回 false,将会结束事件处理,阻止浏览器继续处理按键行为。
非常不幸,onkeydown 重复或不重复执行取决于代码执行的浏览器和操作系统。