Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

浏览模式&焦点模式

3,182 views

Published on

  • Be the first to comment

  • Be the first to like this

浏览模式&焦点模式

  1. 1. 浏览模式&焦点模式 Jace / 进步博客
  2. 2. 背景• 10.15国际盲人节—腾讯无障碍协会AID活动
  3. 3. 问题• Qzone定义了accesskey(alt+q)来方便用户快速定 位至说说发表框,系统编辑光标也已经在发表框 内,但在我们输入“#”号时,NVDA却语音提示我 们“向上没有三级标题”,无法输入#号,腾讯微 博却可以直接输入“#”号,这是为什么?
  4. 4. NVDA浏览模式• NVDA浏览复杂的仅供阅读的文档(如网页) 使用浏览模式(browse mode),包括 Mozilla Firefox、Microsoft IE、Google Chrome、Adobe Reader和Adobe Flash里的文 档。• 在浏览模式下,文档的内容以平面方式表 示,可以使用方向键来导航,就像在浏览 一个普通的文本文档。不论是链接、标题 或者其他元素均可通过移动光标来朗读。
  5. 5. NVDA浏览模式• 与系统编辑光标(system caret)相关的导 览命令均可使用 名称 快捷键 描述 向下朗读全部 NVDA + 向下箭 从系统编辑光标当前所在 位置向下朗读,直到末尾, 光标会跟随移动 读出当前行 NVDA + 向上箭 读出系统编辑光标当前坐 在行的内容。连按两次拼 读此行内容 读出当前所选文字 NVDA + shift + 向上箭 读出当前已选文字 读出表格单元格内容 ctrl + alt + 方向键 在表格单元格中四处移动, 并读出当前单元格内容
  6. 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. 7. NVDA焦点模式• 如何与文档中的控件直接交互? – 在input[type=“text”]中输入内容• 切换至焦点模式 – 浏览模式下,NVDA截获所有键盘事件 – 焦点模式下,将键盘事件传递给浏览器
  8. 8. 浏览模式与焦点模式切换• 自动切换(默认) – NVDA处于浏览模式下,当tab至或在需要焦点模式的控件上点击 时,NVDA会自动切换至焦点模式。 – 反之亦然• 手动切换 – NVDA + 空格键:手动在浏览模式和焦点模式之间切换 – Esc:如果NVDA已被自动切换至焦点模式,可切回至浏览模式 – 手动强制进入焦点模式,NVDA 将被锁定在这个特定模式,不会 再被自动切换,除非你再手动切换成浏览模式。
  9. 9. 问题分析• NVDA语音提示“向上没有三级标题”,说明我们触发了 NVDA的“shift + 3”快捷键,即向上查找三级标题,浏览器 并没有接收到字符“#”,这间接的表示NVDA仍处于浏览模 式,而并非如我们想象的“NVDA在tab至表单元素时自动切 换至焦点模式”。• 查看源代码后发现此处的输入框是用div[contenteditable]来 模拟的,而腾讯微博使用的是表单元素textarea。
  10. 10. 解决方案• 提示用户手动切换至焦点模式/表单模式• 设置属性role = “application” – landmark role – 将一个区域声明为web应用程序(web application),与此相对的 是web文档(web document) – 辅助技术应切换至应用程序浏览模式,不再拦截标准键盘事件, 将键盘事件传递给web应用程序 – 在NVDA下,把设置了此属性的容器识别为应用程序,不再把容 器内的内容读入虚拟内存中,因此也就没有所谓的模式切换了, NVDA把按键传递给浏览器

×