Google axs-chrome

3,048 views
2,998 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,048
On SlideShare
0
From Embeds
0
Number of Embeds
2,006
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Google axs-chrome

  1. 1. google-axs-chrome wenju / 进步博客 互联网用户体验设计部
  2. 2. 目录 ChromeVox ChromeVis ChromeShades Lois TTS Voice
  3. 3. ChromeVox
  4. 4. ChromeVox• Chrome OS内置的屏幕阅读器• Chrome浏览器的一个扩展应用 – 下载地址 – 依附于Chrome浏览器,不能像JAWS、NVDA、永德等屏 幕阅读器可以访问浏览器之外的应用程序或者操作计 算机 – 不能和其他屏幕阅读器共同工作,称之为屏幕阅读器 模拟器更为恰当 – 支持最新的web标准,操作现代交互站点表现优异
  5. 5. ChromeVox用法• 基本导航 – 焦点元素导航 Tab – 页面内导航 Ctrl + Alt + ↓/↑ ChromeVox键 – 停止播报 Ctrl – 当前位置开始朗读 Ctrl + Alt + R – 命令帮助 Ctrl + Alt + .
  6. 6. ChromeVox用法• 导航精确度 – 代表导航的细节水平,级别越高,细节越少, 可快速到达感兴趣的区域 – 级别: group object sentence word character – 精确度调整: ChromeVox键 + ChromeVox键 - / = – 查看更详细级别 ChromeVox键 + ←/→
  7. 7. ChromeVox用法• 高粘度模式 – 进入或退出,双击 Insert – 无需按 Ctrl + Alt – 规避快捷键冲突
  8. 8. ChromeVox用法• 语音命令 控制音调 [ ] ChromeVox + ; ‘ 控制语速
  9. 9. ChromeVox用法• 跳跃键(元素间导航) A Q Anchor Block quote B Button Previous X Checkbox /next C Combobox G Graphic H Heading J Jump ChromeVox + p/n + h ; Landmark F Form Field L Link O List I List item R Radio button S Slider T Tables
  10. 10. ChromeVox用法• 表格模式 T+E 强制退出表格模式 ↓ 跳至表格下一行 ↑ 跳至表格上一行 ← 跳至表格前一列 → 跳至表格后一列 ChromeVox + T then R 报读当前行标题 T then C 报读当前列标题 T then [ 跳至表格开头 T then ] 跳至表格结尾
  11. 11. ChromeVis
  12. 12. ChromeVis• 透镜 – 下载地址 – 用于放大所选文字及更改其颜色。可用鼠标或 键盘在网页中四处移动所选文字。
  13. 13. ChromeVis用法• 打开/关闭 0• 6种样式 1-6 – 设置文字、背景颜色• 位置 9 – 顶部固定 – 当前元素周围浮动• 调整文字大小 – 增大文字 = – 减小文字 -
  14. 14. ChromeVis用法• 浏览 – 前移一句 Shift+s – 后移一句 Shift+a
  15. 15. ChromeShades
  16. 16. ChromeShades• 帮助发现无障碍问题• 将网页重新格式化,模拟盲人使用屏幕阅 读器浏览网页• 交互式web apps保留功能性,可用来测试实 际工作流程中的无障碍问题• 不能替代屏幕阅读器测试,快速解决一些 常见问题
  17. 17. 去掉大部分样式• 检查无样式的内容是否仍具有逻辑性,仍 容易理解
  18. 18. 保留语义标记• 屏幕阅读器可以报读语义标记,如 <h1>, <li>, <strong>等
  19. 19. 突出标题结构层级关系• 标题导航是屏幕阅读器用户常用的导航方 式
  20. 20. 识别交互控件• 帮助你发现页面中的可交互元素是否设置 了合适的ARIA role• 绿色显式且独占一行
  21. 21. 可见性• 检查隐藏内容是否对屏幕阅读器可见• 屏幕阅读器忽视 display: none 和 aria-hidden=“true”
  22. 22. Alt 及其他标记• 检查img是否有alt属性及其属性值• Form控件是否有<label>标签、aria-label属性、 title(部分屏幕阅读器有效,谨慎使用)
  23. 23. iframe
  24. 24. 布局表格• 布局表格线性显式
  25. 25. Lois TTS Voice
  26. 26. 谢谢

×