无障碍设计是指为了给予不同类型的用户，包括残障用户，最佳从而让他们能够访问、使用产品和服务。在网页设计中，屏幕阅读器是一款最常用的辅助方式，为那些视网膜受损的用户提供了一个方便的使用方式。本文将重点讨论如何处理屏幕阅读器与键盘的交互方式。
键盘快捷键与无障碍设计
在网页设计中，键盘快捷键是一种非常有效的无障碍设计方法。对于大多数的 Web 应用程序，键盘快捷键提供的功能基本等同于鼠标操作。键盘操作不仅提高 Web 应用程序的易用性，而且方便那些手臂、手指、视网膜、主视野损伤的用户。
实现键盘快捷键的常规方法
常见的实现键盘快捷键的方法是：在网页的JavaScript中使用特定的键绑定。一般这个方法都使用 DOM 相关的 API。例如，下面是有关键盘操作类库的一个小例子：
-- -------------------- ---- -------
------------------ - -------- ------- -
----- - ----- -- -------------
--- ---- - ------------- -- ------------
--- ------- - ------------- -- --------------
------ ------ -
-- ----
---- ---
-- -- ------------
------
-- ---
---- ---
-- -- ------------
------
-- ----- ----
---- ---
-- -- ------------
------
-- ----- --
---- ---
-- -- ------------
------
-- ----- -----
---- ---
-- -- ------------
------
-- ----- ----
---- ---
-- -- ------------
------
-- ------
---- ---
-- --------- -
-- -- ------------
-
------
-- ------
---- ---
-- --------- -
-- -- ------------
-
------
-- ------
---- ---
-- --------- -
-- -- ------------
-
------
-- ---
-
--实现屏幕阅读器与键盘的交互方式
对比上面的例子，在实现屏幕阅读器与键盘的交互方式的时候，应该用 onkeydown事件来开始做动作，但是新的事件 onkeypress 和 onkeyup 也不应该忽略，因为在沿路上面，他们都能带来不一样的影响。
先谈谈有关属性和事件的使用。
1. 事件
onkeydown
- 当用户按下按键时触发
- 事件可能被取消
onkeypress
- 当用户按键并保持不动时持续触发
- 操作系统引发的自动重复按键未必被触发
- 事件可能被取消
onkeyup
- 当用户松开键盘按键时被触发
- 事件可能被取消
2. 属性
keyCode
- 事件发生时键盘上按下的按键对应的编码
- 键盘上的所有字符，数字和推荐类型都至少有一个编码
- 特殊键（如Shift，Ctrl，Alt等）也有编码
charCode
- 事件发生时按下的字符对应的编码
- 区分大小写
- 如果禁用了锁定类型，Shift和Caps Lock在大多数情况下都是使用相同编码，这可能需要根据IE和WebKit（或Gecko）进行测试。
ctrlKey/altKey/shiftKey
- 当事件发生时，控制键是否按下
现在来看一下屏幕阅读器的建议：
可以导航的基本元素
根据无障碍性原则，应支持以下常用的功能性操作：
- 一级子菜单可以使用 <kbd>arrow right/right</kbd> （向右箭头） 来展开，<kbd>arrow down/down arrow</kbd> （向下箭头） 常用于收起当前打开的子菜单。一些菜单（如 dropdown）也允许您在获得焦点后按一次空格键（»）打开，然后使用 <kbd>arrow</kbd> 以及一些特定的键操作
- 有序列表和无序列表的数字和符号可以点击或 Tab 和开关箭头键更改
- 标签页和当前选项卡可以使用<kbd>arrow left/left arrow</kbd>（向左箭头）和<kbd>arrow right/right arrow</kbd>（向右箭头）来导航
- 可以使用<kbd>up arrow/arrow up</kbd>和<kbd>down arrow/arrow down</kbd>来滚动面板，而不是用鼠标滚轮
- 按 Tab 键来实现页面上按顺序聚焦控件。每个元素都可以通过 <kbd>arrow key</kbd>来单独控制
- 单选框、复选框和按钮可以使用<kbd>space</kbd>键来勾选或取消勾选。也可以使用<kbd>enter</kbd>键激活相关的按钮
运行评估
此处的重点将在于如何确定屏幕阅读器哪些键被定义，并且如何向客户端程序定义他们的操作。让我们从键盘操作开始吧！
操作事项和建议：
- 快速访问链接（键盘选项，如“b”到顶部）
- 跳过频繁重复的内容（例如导航、页眉和页脚）
- 按下同一按键（例如键“H”），将搜索到下一个标题
- 当要开启菜单时，不进行移动，使用示例代码
if (e.keyCode == 39 || e.keyCode == 40) { $(this).dropdown('toggle'); return false; }
此处的示例代码表明在快捷键<kbd>↓↓→/↓↓⏎</kbd>或<kbd>❯/❯❯</kbd>中按键会以 drop menu 的形式来被 open 和 close。 - 使用 tab wrench 在菜单栏和工具提示中导航
对于最后一个，大多数人都没有意识到。在您访问菜单传统方式之前，提示将成为您使用工具和菜单的重要技巧。
推荐使用符号或机器代号而不是纯文本来实现这些操作，因为很多人（例如盲人或视力低下的人）只熟悉特定的键，可能不知道它们的字母表示。在许多情况下，快捷键也将显示在帮助文档中作为备选操作。
示例：
以下是一个实现屏幕阅读器与键盘的交互方式的示例代码，可以快速浏览HTML页面内容切换：
-- -------------------- ---- -------
--------
--- --------- - -
--------- -------- --- ------- ----- - -----
--------- -------- --- ------------- -------
--------- -------- ------- ------------- ------
--
------------------------------------ -------- ------- -
--- -------- - -------------------------
-- ---------- -
-----------------------
----------------
-
---
-------- ------------- -
--- --- - ---
-- -------------- -- -------------- -
--------------------
-
-- -------------- -
----------------
-
-- ---------------- -
------------------
-
--------------------
------ ----------- ---
-
---------结论
在设计网站时，通过论述无障碍设计，我们可以更好地理解如何进行键盘快捷键的设计。同时，我们也可以从事为人们提供更好的体验，推出更具亲和力的功能，希望本文内容对您设计任何类型的网站时都有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67207b9d2e7021665e026dcb