google-axs-chromewenju / 进步博客互联网用户体验设计部

目录

ChromeVisChromeVox

ChromeShades Lois TTS Voice

ChromeVox

ChromeVox

• Chrome OS 内置的屏幕阅读器• Chrome 浏览器的一个扩展应用– 下载地址– 依附于 Chrome 浏览器，不能像 JAWS 、 NVDA 、永德

等屏幕阅读器可以访问浏览器之外的应用程序或者操作计算机

– 不能和其他屏幕阅读器共同工作，称之为屏幕阅读器模拟器更为恰当

– 支持最新的 web 标准，操作现代交互站点表现优异

ChromeVox 用法• 基本导航– 焦点元素导航– 页面内导航– 停止播报– 当前位置开始朗读– 命令帮助

Tab

Ctrl Alt+ ↓/↑+ChromeVox 键

Ctrl

Ctrl Alt+ R+

Ctrl Alt+ .+

ChromeVox 用法• 导航精确度– 代表导航的细节水平，级别越高，细节越少，

可快速到达感兴趣的区域– 级别：

– 精确度调整：– 查看更详细级别

group

object

sentence

word

character

←/→ChromeVox 键 +

ChromeVox 键ChromeVox 键 + /- =

ChromeVox 用法• 高粘度模式– 进入或退出，双击– 无需按– 规避快捷键冲突

Insert

Ctrl Alt+

ChromeVox 用法• 语音命令

[ ]

; ‘

控制音调

控制语速

ChromeVox +

ChromeVox 用法• 跳跃键（元素间导航）

ChromeVox p/n

Previous/next

+ + h

A AnchorQ Block quoteB ButtonX CheckboxC ComboboxG GraphicH HeadingJ Jump; LandmarkF Form FieldL Link

O ListI List itemR Radio buttonS SliderT Tables

ChromeVox 用法• 表格模式

ChromeVox +

T+E 强制退出表格模式↓ 跳至表格下一行↑ 跳至表格上一行← 跳至表格前一列→ 跳至表格后一列

T then R 报读当前行标题T then C 报读当前列标题T then [ 跳至表格开头T then ] 跳至表格结尾

ChromeVis

ChromeVis

• 透镜– 下载地址– 用于放大所选文字及更改其颜色。可用鼠标或

键盘在网页中四处移动所选文字。

ChromeVis 用法• 打开 / 关闭• 6 种样式– 设置文字、背景颜色

• 位置– 顶部固定– 当前元素周围浮动

• 调整文字大小– 增大文字– 减小文字

0

1-6

9

=

-

ChromeVis 用法• 浏览– 前移一句– 后移一句

Shift+s

Shift+a

ChromeShades

ChromeShades

• 帮助发现无障碍问题• 将网页重新格式化，模拟盲人使用屏幕阅

读器浏览网页• 交互式 web apps 保留功能性，可用来测试

实际工作流程中的无障碍问题• 不能替代屏幕阅读器测试，快速解决一些

常见问题

去掉大部分样式• 检查无样式的内容是否仍具有逻辑性，仍

容易理解

保留语义标记• 屏幕阅读器可以报读语义标记，如 <h1>,

<li>, <strong> 等

突出标题结构层级关系• 标题导航是屏幕阅读器用户常用的导航方

式

识别交互控件• 帮助你发现页面中的可交互元素是否设置了合适的 ARIA role

• 绿色显式且独占一行

可见性• 检查隐藏内容是否对屏幕阅读器可见• 屏幕阅读器忽视 display: none 和

aria-hidden=“true”

Alt 及其他标记• 检查 img 是否有 alt属性及其属性值• Form 控件是否有 <label> 标签、 aria-label属

性、 title( 部分屏幕阅读器有效，谨慎使用 )

iframe

布局表格• 布局表格线性显式

Lois TTS Voice

谢谢