1. 浏览模式&焦点模式
Jace / 进步博客

2. 背景
• 10.15国际盲人节—腾讯无障碍协会AID活动

3. 问题
• Qzone定义了accesskey（alt+q）来方便用户快速定
位至说说发表框，系统编辑光标也已经在发表框
内，但在我们输入“＃”号时，NVDA却语音提示我
们“向上没有三级标题”，无法输入＃号，腾讯微
博却可以直接输入“＃”号，这是为什么？

4. NVDA浏览模式
• NVDA浏览复杂的仅供阅读的文档（如网页）
使用浏览模式（browse mode），包括
Mozilla Firefox、Microsoft IE、Google
Chrome、Adobe Reader和Adobe Flash里的文
档。
• 在浏览模式下，文档的内容以平面方式表
示，可以使用方向键来导航，就像在浏览
一个普通的文本文档。不论是链接、标题
或者其他元素均可通过移动光标来朗读。

5. NVDA浏览模式
• 与系统编辑光标（system caret）相关的导
览命令均可使用
名称 快捷键 描述
向下朗读全部 NVDA + 向下箭 从系统编辑光标当前所在
位置向下朗读，直到末尾，
光标会跟随移动
读出当前行 NVDA + 向上箭 读出系统编辑光标当前坐
在行的内容。连按两次拼
读此行内容
读出当前所选文字 NVDA + shift + 向上箭 读出当前已选文字
读出表格单元格内容 ctrl + alt + 方向键 在表格单元格中四处移动，
并读出当前单元格内容

6. NVDA浏览模式
• 单键导航命令
– 可在文档中的特定元素之间快速跳转。单按下列快捷键可跳转至
下一个同类元素的位置，与shift一起使用则跳转至上一个同类元
素的位置。 h 标题
l 列表
i 列表项
t 表格
k 链接
n 非链接文本
f 表单域
u 非访问链接
v 已访问链接
e 编辑域
b 按钮
x 复选框
c 组合框（combo box）
r 单选框
q 引述区
s 分隔符（separator）
m 框架（frame）
g 图片（graphic）
d ARIA landmark
o 嵌入式对象（embedded object）
1~6 1至6级标题

7. NVDA焦点模式
• 如何与文档中的控件直接交互？
– 在input[type=“text”]中输入内容
• 切换至焦点模式
– 浏览模式下，NVDA截获所有键盘事件
– 焦点模式下，将键盘事件传递给浏览器

8. 浏览模式与焦点模式切换
• 自动切换（默认）
– NVDA处于浏览模式下，当tab至或在需要焦点模式的控件上点击
时，NVDA会自动切换至焦点模式。
– 反之亦然
• 手动切换
– NVDA + 空格键：手动在浏览模式和焦点模式之间切换
– Esc：如果NVDA已被自动切换至焦点模式，可切回至浏览模式
– 手动强制进入焦点模式，NVDA 将被锁定在这个特定模式，不会
再被自动切换，除非你再手动切换成浏览模式。

9. 问题分析
• NVDA语音提示“向上没有三级标题”，说明我们触发了
NVDA的“shift + 3”快捷键，即向上查找三级标题，浏览器
并没有接收到字符“＃”，这间接的表示NVDA仍处于浏览模
式，而并非如我们想象的“NVDA在tab至表单元素时自动切
换至焦点模式”。
• 查看源代码后发现此处的输入框是用div[contenteditable]来
模拟的，而腾讯微博使用的是表单元素textarea。

10. 解决方案
• 提示用户手动切换至焦点模式/表单模式
• 设置属性role = “application”
– landmark role
– 将一个区域声明为web应用程序（web application），与此相对的
是web文档（web document）
– 辅助技术应切换至应用程序浏览模式，不再拦截标准键盘事件，
将键盘事件传递给web应用程序
– 在NVDA下，把设置了此属性的容器识别为应用程序，不再把容
器内的内容读入虚拟内存中，因此也就没有所谓的模式切换了，
NVDA把按键传递给浏览器