键盘事件无障碍使用总结

1. 焦点
2. tabindex焦点标记
3. 由先到后的顺序
4. 获得焦点元素
5. 设置焦点元素
6. 加载时自动获得焦点
7. 焦点事件
8. 键盘事件
9. 保证用户不会陷入内容陷阱
10. accesskey（就是给某个元素添加快捷键）
11. onclick事件
12. 在某个 UI 元素内的键盘导航
13. mouseover事件键盘解决办法（弹出菜单）

1. 焦点

   ---

   是用户当前正在操作的对象，可以是某个元素，也可能是某个浏览器中的tab或window。比如用鼠标点击输入框，那么输入框就会成为焦点。使用键盘上的Tab键，又可以把焦点转移到另外一个元素或浏览器的其他区域。通过鼠标和键盘都可以转移焦点，甚至编辑焦点元素。

2. tabindex焦点标记

   ---

   使用键盘上的tab键，可以按顺序切换当前焦点元素，而影响这个切换顺序的属性就是元素的tabindex属性。这个属性的取值范围是0到32767，如果赋值为负数则表示没有焦点标记，不对它进行切换。但并不是所有元素设置了tabindex就一定可以使用tab键切换成为焦点，首先tabindex的值不能为负数，而且不能有disabled（无效）属性。另外，这个元素必须有对应的可获焦区域，而且支持tabindex属性。

   没有显式设置tabindex属性的元素就不能通过Tab键切换成为焦点？也不是，只要元素拥有tabindex焦点标记就可以。W3C推荐用户代理自动为以下元素设置tabindex焦点标记，默认这些元素的tabindex为0。这些元素在默认tab的时候可以tab到，但是不同浏览器可能不一样；

   元素有：
   1.有href属性的a元素；
   2.有href属性的link元素；
   3.button元素；
   4.type不是hidden（隐藏）的input元素；
   5.select元素；
   6.textarea元素；
   7.iframe、frame元素；Frame、iframe（内联框架） 对象代表一个 HTML 框架。frameset是框架集合；
   8.menuitem元素；菜单标签，只有 Firefox 支持 元素。
   9.设置了draggable属性的元素；draggable 属性规定元素是否可拖动。提示：链接和图像默认是可拖动的。
   10.设置了contenteditable属性的元素；contenteditable 属性规定是否可编辑元素的内容。
   

   <element contenteditable="value">
   
   

3. 由先到后的顺序是

   ---

   元素的tabindex大于0的元素，按tabindex从小到大顺序切换；
   元素的tabindex相同的，按元素在document中的出现顺序切换；
   元素的tabindex为0，或没有设置tabindex，或tabindex不是有效整数（后两种等同于tabindex=0），按元素在document中的出现顺序切换；
   

4. 获得焦点元素

   ---

   Document 对象：
   每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

   Window对象：
   表示浏览器中打开的窗口。 注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。 Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。 同一时间一个document只能有一个元素成为焦点，这个焦点元素可以使用JavaScript访问,方法是：document.activeElement。

5. 设置焦点元素

   ---

   HTMLElement.setActive() setActive()方法是IE独有的方法，这个方法的作用是把另一个frame或window中的某个元素设置为activeElement（焦点元素），但这个方法不会使document滚动到焦点元素。也就是说UI上没有变化，但另一个frame或window中的那个元素已经成为了activeElement（焦点元素）。

6. 加载时自动获得焦点

   ---

   Autofocus是一个boolean（布尔值，就真和假两个值）属性，规定当页面加载时按钮应当自动地获得焦点。

   <button type="button" autofocus>按钮文本</button>

   当有了autofocus属性，INPUT, TEXTAREA, 或 BUTTON元素都能在页面加载是被选中。例如谷歌的首页，人们99%的时间都是用它来搜索，所以页面一旦加载，光标必然定位在输入框里。 但如果使用纯显示元素，例如H1标记，autofocus属性并不好用

用法

<input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus">

7. 焦点事件

   ---

   一个元素成为active元素就等于获得了焦点，会触发这个元素的focus事件。有元素获得焦点，一般就有元素会失去焦点，失去焦点的元素触发blur事件。这两个事件几乎是同时发生的，但他们的执行顺序有区别，blur事件的监听方法先执行，然后才是focus事件的监听方法。 元素在document没有加载完之前是不能获得焦点的，获得焦点的元素通过documnt.activeElement可以访问。

8. 键盘事件

   ---

   KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被KeyPress 识别的击键，诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
   Keydown和keypress事件监听方法执行的时候，刚才敲入的字符还没有显示在输入框中，要等这些事件监听方法执行完后才插入。
   Keyup事件监听方法执行的时候，字符已经显示在输入框中。
   如果摁住某个键不放，会间隔触发keypress和keydown事件，但只要你不放开，就不会触发keyup，keyup只有当你放开这个键才会触发。
   三个事件的触发顺序按从早到晚：keydown、keypress、keyup。
   onkeypress 事件会在键盘按键被按下并释放一个键时发生。html元素事件，是监听器，监听keypress事件，keypress发生后，执行onkeypress定义的代码，比较像个函数名。onkeydown与onkeyup、keydown与keyup一样。
   onkeydown 属性在用户（在键盘上）按键时触发。
   onkeyup 属性在用户（在键盘上）释放按键时触发。
   相对于 onkeydown 事件的事件次序：onkeydown onkeypress onkeyup

9. 保证用户不会陷入内容陷阱

   ---

   保证键盘用户不会陷入子集出不来，这些子集仅在使用鼠标和点触设备时可用。最常见的是插件，如果插件可以获得焦点，但是没有提供可以跳出插件将焦点返回父窗口的机制，插件就会成为陷阱。
   使用以下机制可以有效避免该陷阱：
   1)事先定义好内容焦点（通常使用TAB键），当子集或插件导航到最后位置时，跳出子集或插件，事先定义好的焦点可以获得。
   2)定义键盘事件，将焦点移除自己内容。
   3)如果子集使用的技术里面包含回到父级的键盘命令，在用户进入该子集前提示用户该命令。

10. accesskey（就是给某个元素添加快捷键）

    ---

    accesskey属性规定激活（使元素获得焦点）元素的快捷键。
    主菜单与导航菜单使用accesskey,通常是不错的选择。
    HTML教程标签中的AccessKey属性相当于Windows应用程序中的Alt快捷键。该属性可以设置某个HTML元素的快捷键，这样就可以不用鼠标定位某个页面元素，而只用快捷键Alt 键和某个字母键，就可以快速切换定位到页面对象上。

    以下元素支持 accesskey 属性：a,area,button,input,label, legend以及textarea。

    <element accesskey="XXX"> XXX规定激活（使元素获得焦点）元素的便捷按键。 <a href="网址" accesskey="快捷键h">我是使用了ALT+H作为热键的链接</a><br /> <a href="网址" accesskey="快捷键c">这是使用了ALT+C作为热键的链接</a>

11. onclick事件

    ---

    onclick 属性由元素上的鼠标点击触发。onclick 事件会在对象被点击（click事件完成）时发生，是一个click事件的监听器，监听到点击后，执行对应Js代码。

    请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。 通过使用anchors（锚点）和buttons的onclcik事件使键盘可用对于HTML标准控件links和buttons来说，默认可以通过鼠标点击，和按enter键来实现。

    样例：

    1)链接onclick事件：<a href="#" onclick="自定义函数;">do stuff（链接文本）</a> 2)表单onclick事件：<form action="doStuff.aspx（.aspx是asp.net的文件后缀名，接收数据的）" onsubmit="自定义函数;"> <input type="submit" value="Do Stuff（按钮文本）" onclick="自定义函数" /></form> 3)图片类型input：<input type="image" src="图片地址" alt="Do stuff（提示文本）" onclick="自定义函数" /> 4)Submit提交类型input：<input type="submit" onclick="自定义函数;" value="自定义按钮上的文字" /> 5)Button onclick事件:<button onclick="自定义函数;"><img src="图片地址" alt="提示文本"> 文本</button>

12. 在某个 UI 元素内的键盘导航

    ---

    对于复合元素，确保在所包含的元素之间的内部导航正确，这一点很重要。对于复合元素，可以采用多种方式实现内部导航。
    复合元素可以管理其当前活动子元素以降低使所有子元素可聚焦的开销。采用 Tab 键顺序将这样的复合元素包括在内，且该元素会处理键盘导航事件。复合元素使用 aria-activedescendant 属性暴露有关当前活动子元素的信息

    <div id="folders（文件组）" class="tree" role="tree" aria-label="文件夹" tabindex="0" aria-activedescendant="n-0"> <div id="n-0" class="selected" role="treeitem" aria-expanded="true" onclick="alert('点击了库。');"> 库</div> <div role="group"> <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="alert('点击了文档。');">文档</div> <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="alert('点击了音乐');">音乐</div> <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="alert('点击了图片。');">图片</div> </div> </div> <script> var folders = document.getElementById('文件组'); // 确保使用方向键可进行键盘导航操作。 // 添加对keydown事件的监听 folders.addEventListener('keydown', function(e) { var itm = e.srcElement; // 获取触发Keydown事件的元素对象。 if (e.keyCode === Win.Utilities.Key.upArrow) // 当按下的键是上方向键 { // 位上一个节点ID更新aria-activedescendant the previous node id. // 更新class属性来标记选中的元素节点。 } else if (e.keyCode === Win.Utilities.Key.downArrow) // 当在元素上按下了下方向键 { // Update aria-activedescendant with the next node id. // 通过class属性来标记选中的元素节点。 } }); </script>

    替代方法是动态管理节点的 tabIndex 属性。此方法以提供“漫游索引”而著称。

    <div id="文件夹组" role="tree" aria-label="文件夹" > <div id="n-0" role="treeitem"（视图元素） aria-expanded="true（真）" tabindex="0">库</div> <div role="group" > <!-- Child tree items: Documents, Music, Pictures ... --> <div id="n-0-1" role="treeitem" aria-expanded="false（假）" tabindex="-1">文档</div> <div id="n-0-2" role="treeitem" aria-expanded="false" tabindex="-1">音乐</div> <div id="n-0-3" role="treeitem" aria-expanded="false" tabindex="-1">图片</div> </div> </div> <script> // 获取文件夹树视图元素节点对象。 var folders = document.getElementById('文件组'); // Ensure keyboard navigation/operation with arrow keys. folders.addEventListener('keydown', function(e) { var itm = e.srcElement; if (e.keyCode === Win.Utilities.Key.upArrow) { // Update tabindex attributes. } else if (e.keyCode === Win.Utilities.Key.downArrow) { // Update tabindex attributes. } }); </script>

    如前面两个示例所示，建议将箭头键用作在子元素之间导航的键盘快捷方式。如果树状视图节点有单独的子元素，用于处理展开–折叠和节点激活，则应使用左右箭头键提供键盘展开–折叠功能。

13. mouseover事件键盘解决办法（弹出菜单）

    ---

    为具有弹出菜单的元素添加aria-haspopup（是否含有菜单）="true"，并添加aria-expended（菜单是否展开）="true/false"了来指明当前状态是弹出还是折叠；
    tab到有mouseover事件的元素时，给予必要的文本提示：“我的收藏，含有弹出菜单”；使用传统enter进入；
    tab到有mouseover事件的元素时，给予必要的文本提示：“我的收藏，含有弹出菜单，使用右光标键进入”；
    tab到有mouseover事件的元素时，添加onfocus事件，与mouseover事件一致；

无障碍效果

各读屏、各浏览器的支持效果

测试人：

• 争渡、IE11：
• 永德、IE11：
• NVDA、IE11：
• 永德、chrome：
• NVDA、chrome：
• NVDA、Firefox：
• voiceover、chrome：
• voiceover、Safari：

友情链接： 腾讯公益慈善基金会 | 黄奕聪慈善基金会 | 阿里巴巴公益基金会 | 与人公益基金会 | 浙江敦和慈善基金会

深圳市信息无障碍研究会 版权所有 粤ICP备10065437号 地址：深圳市福田区雨田路1号富莲大厦一栋一层

电话：86-755-83594195 梁振宇（CEO）：15012661056