SlideShare a Scribd company logo
浏览模式&焦点模式

  Jace / 进步博客
背景
• 10.15国际盲人节—腾讯无障碍协会AID活动
问题
• Qzone定义了accesskey(alt+q)来方便用户快速定
  位至说说发表框,系统编辑光标也已经在发表框
  内,但在我们输入“#”号时,NVDA却语音提示我
  们“向上没有三级标题”,无法输入#号,腾讯微
  博却可以直接输入“#”号,这是为什么?
NVDA浏览模式
• NVDA浏览复杂的仅供阅读的文档(如网页)
  使用浏览模式(browse mode),包括
  Mozilla Firefox、Microsoft IE、Google
  Chrome、Adobe Reader和Adobe Flash里的文
  档。
• 在浏览模式下,文档的内容以平面方式表
  示,可以使用方向键来导航,就像在浏览
  一个普通的文本文档。不论是链接、标题
  或者其他元素均可通过移动光标来朗读。
NVDA浏览模式
• 与系统编辑光标(system caret)相关的导
  览命令均可使用

         名称               快捷键             描述
     向下朗读全部      NVDA + 向下箭           从系统编辑光标当前所在
                                      位置向下朗读,直到末尾,
                                      光标会跟随移动
     读出当前行       NVDA + 向上箭           读出系统编辑光标当前坐
                                      在行的内容。连按两次拼
                                      读此行内容
     读出当前所选文字    NVDA + shift + 向上箭   读出当前已选文字

     读出表格单元格内容   ctrl + alt + 方向键     在表格单元格中四处移动,
                                      并读出当前单元格内容
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级标题
NVDA焦点模式
• 如何与文档中的控件直接交互?
 – 在input[type=“text”]中输入内容



• 切换至焦点模式
 – 浏览模式下,NVDA截获所有键盘事件
 – 焦点模式下,将键盘事件传递给浏览器
浏览模式与焦点模式切换
• 自动切换(默认)
 – NVDA处于浏览模式下,当tab至或在需要焦点模式的控件上点击
   时,NVDA会自动切换至焦点模式。
 – 反之亦然

• 手动切换
 – NVDA + 空格键:手动在浏览模式和焦点模式之间切换
 – Esc:如果NVDA已被自动切换至焦点模式,可切回至浏览模式
 – 手动强制进入焦点模式,NVDA 将被锁定在这个特定模式,不会
   再被自动切换,除非你再手动切换成浏览模式。
问题分析
• NVDA语音提示“向上没有三级标题”,说明我们触发了
  NVDA的“shift + 3”快捷键,即向上查找三级标题,浏览器
  并没有接收到字符“#”,这间接的表示NVDA仍处于浏览模
  式,而并非如我们想象的“NVDA在tab至表单元素时自动切
  换至焦点模式”。
• 查看源代码后发现此处的输入框是用div[contenteditable]来
  模拟的,而腾讯微博使用的是表单元素textarea。
解决方案
• 提示用户手动切换至焦点模式/表单模式
• 设置属性role = “application”
 – landmark role
 – 将一个区域声明为web应用程序(web application),与此相对的
   是web文档(web document)
 – 辅助技术应切换至应用程序浏览模式,不再拦截标准键盘事件,
   将键盘事件传递给web应用程序
 – 在NVDA下,把设置了此属性的容器识别为应用程序,不再把容
   器内的内容读入虚拟内存中,因此也就没有所谓的模式切换了,
   NVDA把按键传递给浏览器

More Related Content

Viewers also liked

Motivational posters collection (c-d)
Motivational posters collection (c-d)Motivational posters collection (c-d)
Motivational posters collection (c-d)
Vu The Du
 
Our Cross Country Recount Stories
Our Cross Country Recount StoriesOur Cross Country Recount Stories
Our Cross Country Recount Stories
Lesa Lafaelle
 
Chg5
Chg5Chg5
Guia per coneixer el teu blog
Guia per coneixer el teu blogGuia per coneixer el teu blog
Guia per coneixer el teu blog
serele
 
Mitosis#2 ii 1
Mitosis#2 ii 1Mitosis#2 ii 1
Mitosis#2 ii 1
pfinnegan
 
BMC - Educine introduction program
BMC - Educine introduction programBMC - Educine introduction program
BMC - Educine introduction program
Vu The Du
 
Sailing With Sophia
Sailing With SophiaSailing With Sophia
Sailing With Sophia
john dorman
 
Interactive Minds presentation
Interactive Minds presentationInteractive Minds presentation
Interactive Minds presentation
Chris Chambers
 
catgreen
catgreencatgreen
catgreen
melaniborrilez
 
Website Photos Retaining Walls
Website Photos Retaining WallsWebsite Photos Retaining Walls
Website Photos Retaining WallsChuck Miller
 
How To: Use Google Search Ap Is On Your Blog
How To: Use Google Search Ap Is On Your BlogHow To: Use Google Search Ap Is On Your Blog
How To: Use Google Search Ap Is On Your Blog
mutex07
 
Adel Cooper And Friends Part 1
Adel Cooper And Friends Part 1Adel Cooper And Friends Part 1
Adel Cooper And Friends Part 1
john dorman
 
Sports
SportsSports
Sports
shabazz1994
 
Saint Rose Family
Saint Rose FamilySaint Rose Family
Saint Rose Family
john dorman
 
Parts of the body
Parts of the bodyParts of the body
Parts of the body
guest5c25077
 
Nicole grade 3 hyacinth
Nicole grade 3 hyacinthNicole grade 3 hyacinth
Nicole grade 3 hyacinth
Aldrin SuperGo
 
What Social Media Can Learn From #MadMen
What Social Media Can Learn From #MadMen What Social Media Can Learn From #MadMen
What Social Media Can Learn From #MadMen
Beyond
 
sophia and john dorman wedding
sophia and john dorman weddingsophia and john dorman wedding
sophia and john dorman wedding
john dorman
 
C&M And Text100 IBM VFC Social Media Campaign Measurement
C&M And Text100 IBM VFC Social Media Campaign MeasurementC&M And Text100 IBM VFC Social Media Campaign Measurement
C&M And Text100 IBM VFC Social Media Campaign Measurement
Beyond
 

Viewers also liked (19)

Motivational posters collection (c-d)
Motivational posters collection (c-d)Motivational posters collection (c-d)
Motivational posters collection (c-d)
 
Our Cross Country Recount Stories
Our Cross Country Recount StoriesOur Cross Country Recount Stories
Our Cross Country Recount Stories
 
Chg5
Chg5Chg5
Chg5
 
Guia per coneixer el teu blog
Guia per coneixer el teu blogGuia per coneixer el teu blog
Guia per coneixer el teu blog
 
Mitosis#2 ii 1
Mitosis#2 ii 1Mitosis#2 ii 1
Mitosis#2 ii 1
 
BMC - Educine introduction program
BMC - Educine introduction programBMC - Educine introduction program
BMC - Educine introduction program
 
Sailing With Sophia
Sailing With SophiaSailing With Sophia
Sailing With Sophia
 
Interactive Minds presentation
Interactive Minds presentationInteractive Minds presentation
Interactive Minds presentation
 
catgreen
catgreencatgreen
catgreen
 
Website Photos Retaining Walls
Website Photos Retaining WallsWebsite Photos Retaining Walls
Website Photos Retaining Walls
 
How To: Use Google Search Ap Is On Your Blog
How To: Use Google Search Ap Is On Your BlogHow To: Use Google Search Ap Is On Your Blog
How To: Use Google Search Ap Is On Your Blog
 
Adel Cooper And Friends Part 1
Adel Cooper And Friends Part 1Adel Cooper And Friends Part 1
Adel Cooper And Friends Part 1
 
Sports
SportsSports
Sports
 
Saint Rose Family
Saint Rose FamilySaint Rose Family
Saint Rose Family
 
Parts of the body
Parts of the bodyParts of the body
Parts of the body
 
Nicole grade 3 hyacinth
Nicole grade 3 hyacinthNicole grade 3 hyacinth
Nicole grade 3 hyacinth
 
What Social Media Can Learn From #MadMen
What Social Media Can Learn From #MadMen What Social Media Can Learn From #MadMen
What Social Media Can Learn From #MadMen
 
sophia and john dorman wedding
sophia and john dorman weddingsophia and john dorman wedding
sophia and john dorman wedding
 
C&M And Text100 IBM VFC Social Media Campaign Measurement
C&M And Text100 IBM VFC Social Media Campaign MeasurementC&M And Text100 IBM VFC Social Media Campaign Measurement
C&M And Text100 IBM VFC Social Media Campaign Measurement
 

More from Jace Lee

Fun with Range slider
Fun with Range sliderFun with Range slider
Fun with Range slider
Jace Lee
 
Sass与compass学习笔记
Sass与compass学习笔记Sass与compass学习笔记
Sass与compass学习笔记
Jace Lee
 
Box model
Box modelBox model
Box model
Jace Lee
 
精确控制字符字体
精确控制字符字体精确控制字符字体
精确控制字符字体Jace Lee
 
杂志式布局
杂志式布局杂志式布局
杂志式布局Jace Lee
 
Google axs-chrome
Google axs-chromeGoogle axs-chrome
Google axs-chromeJace Lee
 
视觉隐藏内容
视觉隐藏内容视觉隐藏内容
视觉隐藏内容Jace Lee
 
WebAIM第三次屏幕阅读器用户调查报告
WebAIM第三次屏幕阅读器用户调查报告WebAIM第三次屏幕阅读器用户调查报告
WebAIM第三次屏幕阅读器用户调查报告
Jace Lee
 

More from Jace Lee (8)

Fun with Range slider
Fun with Range sliderFun with Range slider
Fun with Range slider
 
Sass与compass学习笔记
Sass与compass学习笔记Sass与compass学习笔记
Sass与compass学习笔记
 
Box model
Box modelBox model
Box model
 
精确控制字符字体
精确控制字符字体精确控制字符字体
精确控制字符字体
 
杂志式布局
杂志式布局杂志式布局
杂志式布局
 
Google axs-chrome
Google axs-chromeGoogle axs-chrome
Google axs-chrome
 
视觉隐藏内容
视觉隐藏内容视觉隐藏内容
视觉隐藏内容
 
WebAIM第三次屏幕阅读器用户调查报告
WebAIM第三次屏幕阅读器用户调查报告WebAIM第三次屏幕阅读器用户调查报告
WebAIM第三次屏幕阅读器用户调查报告
 

浏览模式&焦点模式

  • 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把按键传递给浏览器