voice
作为一名有业界良心的网页重构同学,以提高网站、移动端应用的可用性为己任,于是整理出来了一份关于盲人辅助工具 VoiceOver 重构使用说明文档,以帮助重构同学能够简单轻松地为移动端信息无障碍做一些力所能及的事情。

文档大纲:
一、  VoiceOver介绍
二、  VoiceOver开启与关闭
三、  VoiceOver设置
四、  VoiceOver手势操作
五、  如何输入文本
六、  VoiceOver转子操作
七、  HTML5标签测试结果
八、  HTML5标签无障碍开发规范
九、  Role值使用规范

一、VoiceOver介绍

概念:
Voiceover功能是苹果公司在2009年4月推出的一种语音辅助程序。专门针对盲人或者是视障人士开发的智能设备上的辅助工具,用以帮助盲人或者视障人士能够轻松简单地获取到移动设备上的有效信息。

支持机型:
iPod3/4/5/6/7代、iPod touch、Iphone3/4/4s/5/5c/5s、Ipad1/2/mini、Mac。

支持语种:
目前支持29种语言,包括中文、英文、捷克语、荷兰语、法语、德语、希腊语、意大利语、日语、波兰语、葡萄牙语、西班牙语、瑞典语、土耳其语。
用户可以通过开启功能使程序朗读所有可以看到的文字,只需触摸文字即可选中使程序朗读,并通过双击进入文字的链接。

版本:
VoiceOver3,运行于OS X(为系统版本)系统上。Alex语音是Mac的语音功能。

功能:
手势支持、盲文显示器镜像、”网点”以及语音提示。此外,它还提供常用的功能,包括自动朗读网页、”全部朗读”、网页概况、网页表格支持、用户创建的标记、自定义显示信息详细程度。

VoiceOver与 OS X 紧密集成,当开发人员更新其 app 以充分利用 Apple 提供的辅助功能界面时,他们的 app 可以立即与 VoiceOver 搭配使用。

IOS盲文显示器,由于未应用到HTML5,此处了解即可。

根据腾讯云分析:移动设备品牌占比统计如图:

4e16681005ac865a7d6396de90d3f3e4

从图中可以很清楚的看到:
IOS系统目前在国内占比达到24.7%,Android系统占比73.3%。也就是说,移动设备上的H5页面被用户访问到的几率占比也几乎为24.7:73.3,同样被盲人或视障人士访问的的概率也几乎是一样的。

所以作为网页重构设计师,除了做好网页最基本的功能之外,帮助盲人朋友也能够使用智能移动设备上的HTML5页面想必也是一件很有必要很有意义的事情。

VoiceOver相对Talkback和保益悦听,会做的相对专业一些,相信在未来也会得到更多用户的亲睐,所以对VoiceOver做一些详细的介绍和测试。

二、VoiceOver开启与关闭

如何开启和关闭VoiceOver:
1399883353_39
设置->辅助工具->VoiceOver->开启。开启后,会有语音提示“您已开启盲人辅助工具”。
关闭同开启一样步骤。
IOS系统上VoiceOver辅助工具开启方式一致。

三、VoiceOver相关设置

1.开启关闭快捷键设置:
1399883345_5
设置->通用->辅助工具->辅助功能快捷键->选中VoicerOver,回到主屏,连按三次HOME键即可打开VoiceOver,继续连按三次即可关闭。

2.朗读速度设置:
1399883338_64

3.转子设置:
1399883330_19

网页中需要读到的内容可以通过选中或取消来设置。

4.语言设置:
1399883320_16

5.添加新语言:
1399883458_9

6.图像:
1399883246_91

7.光标(选中框)设置:
1399883232_84

四、VoiceOver手势操作

操作说明:

VoiceOver会朗读屏幕上的项目:
1.请按一次来选择项目
2.连按两次来激活所选项目
3.用三个手指轻滑来滚动

常用手势:
1399883225_23

网页如何来操作?
1.滚屏使用三指滑动,语音提示“第N页共M页”,当从下往上滑至第一页或从上往下滑至最后一页,会有语音提示“咚”,表示已到开始或结束位置;
2.使用横向向右轻滑,将焦点切换至下一项,横向左滑返回上一项。(以每个标签为单位);
3.使用竖向向上轻滑,将朗读内容移至上一个文字,竖向下滑,朗读内容移至下一个文字(以文字为单位);
4.使用双指向下滑动,依次从Html5结构从上往下自动朗读文本,使用单指滑动或者双指左右滑动,停止阅读;
5.手机横竖屏切换时,提示“竖排”或者是“横排”;
6.打开视频或音乐时,双指点击屏幕即可暂停视频或音乐;
7.三指快速点击,打开关闭语音;
8.两指旋转,打开转子。

五、如何输入文本

当触碰到文本框时,VoiceOver会语音提示此处可编辑。
双击后,即可吊起系统默认键盘。
输入内容时,需要先选中字符,待语音提示完后,双击确认即可输入,输入完毕点击确认。

六、VoiceOver转子操作

VoiceOver 中的 “转子” 是一种创新的虚拟控制功能。旋转转子像拨号一样在屏幕上旋转两根手指,即可按照你选择的设置改变 VoiceOver 阅读网页或文档的方式。当你打开一个页面时,你可以使用转子功能听到包括 “标题”、“链接” 和 “图像” 等内容的设置。轻拂手指选择浏览页面的方式,比如,你可以从一个标题跳到下一个标题。浏览文档也是一样的简便。转子包含 “词” 或 “字” 的设置,你可以选择转子读出文档的方式,并对书写和语法进行检查。你还可以通过不同选项自定义转子元素,包括语言。【摘自Apple官网】

两指触屏旋转,打开转子,选择性快速阅读网页内容。

1399883216_80

可以通过转子调整音量、语速,然后上下单指轻滑即可调整音量大小或语速快慢。

同理,以下内容也可以通过设置转子来设置,可进行选择性快速阅读想要阅读的内容,包括:
1399883208_62

字符、单词、每行、语速、音量、标点符号、声音、提示、手写、容器、标题、链接、表单控制、表格、列表、标志性内容、访问过的链接、为访问过的链接、按钮、文本栏、搜索框、图像、静态文本、页内连接、缩放、相同项目、垂直导航。

有了转子的辅助,阅读网页内容时目标更明确。

七、HTML5标签测试结果

html5标签移动端无障碍测试结果

总结:

  1. 只有内容说明的标签为读屏软件只朗读内容文字,无其他提示;
  2. 部分标签连续触摸(提示音:噔噔噔噔),包括audio、embed、iframe、hr、input[type=”week”]、input[type=”time”]、input[type=”month”]、input[type=”datetime-local”input[type=”datetime”]、input[type=”date”]
  3. h1-h6朗读为内容+标题级别X(X为1-6);
  4. 有特殊提示文字(标识性内容)的标签主要为结构标签,header、main、aside、address;
  5. input标签朗读为:placeholder+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容;
  6. input[type=”checkbox”]复选框+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”;
  7. input[type=”radio”]收音机按钮+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”;
  8. input[type=”password”] placeholder+安全+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容;
  9. 列表类标签dl内dt时会提示列表开头,最后一个dl时,会提示列表结尾,ul、ol只会提示最后一个li为列表结尾,table只会提示右下角最后一个td为表格结尾;
  10. select内容+弹出式按钮+连按两次来激活选取项 弹出框出现后,提示选项内容1(option顺序)xie xian si(真心没听清读的啥意思),选区以及项目可调,用一个数值上下轻扫来调整至;
  11. optgroup内容+弹出式按钮+连按两次来激活选取向 optgroup会和option并列读出,但optgroup不会被选中;
  12. textarea内容+文本栏+连按两次来编辑,获焦后文本栏+正在编辑+内容;
  13. 其他标签可参考上测试结果查看。

八、HTML5无障碍开发规范

  • 页面主标题使用h1;
  • 如果页面头部只有主标题,无需再套一层header,直接使用h1,减少html5结构层级的同时,尽快帮助盲人阅读到相应内容,避免先提示header再提示h1(增加了读屏软件读取内容的门槛);
  • 页面模块级标题,根据重要程度依次使用h2~h6;
  • input标签和textarea内使用placeholder作为默认提示语;
  • 需要读屏软件读到的内容不要使用display:none或者position:absolute将之移至屏幕以外;
  • 标题(header)、主内容区(main)、补充内容(侧边栏)(aside)、地址(address)尽量使用对应标签,读屏软件可识别出为“标志性内容”供给盲人判断内容区块的重要性;
  • 列表结构尽量使用ul、ol、dl结构组织内容,读屏软件可提示给用户该结构是由列表内容组成;
  • 菜单型内容可使用menu将其包裹起来,虽然读屏软件目前还未识别,可为后期软件的完善做好准备;
  • 导航型内容可使用nav将其包裹起来,虽然读屏软件目前还未识别,可为后期软件的完善做好准备;
  • 单选按钮或复选框尽量使用原生结构而不是用模拟结构,读屏软件可以识别此功能;
  • select尽量使用原生结构,读屏软件可识别;
  • 按钮类型的input尽量标注type=”类型”,读屏软件可识别,包括:file、button、img、submit、reset、range;
  • 按钮类型的button尽量标注type=”类型”,读屏软件可识别,包括:submit、reset、button;
  • img图像需要添加title属性和值,读屏软件会读取title值+图像提示;
  • 链接尽量使用a标签,不能为空,需要设置title值,如果为空,必须设置title属性;
  • 表单内容可使用fieldset/legend进行包裹,读屏软件虽对form不识别,但是会识别legend内容;
  • html实际结构和视觉结构不用参考PC端为了优先而优先,读屏软件只识别触摸到的内容,和html的先后顺序没关。

九、Role值使用规范

Landmark是WAI-ARIA规范里的一个功能,将这个属性添加到网页内相应的html元素上,就意味着给网页增加了路标功能,辅助工具(如读屏软件)就可以根据这些Landmark来找到相应的区域,从而提高网页的操作效率。

PC端的盲人辅助工具和移动端的是不是一致的呢?我们来做一个测试。

这里主要测试一下这些role值在移动设备上的IOS系统下具体的语音提示,了解了真实的语音提示,我们就可以在开发中正确合理使用role值,用以帮助盲人或视障人群能够正常使用我们开发的移动端WebApp H5应用。

Landmark相关role值:
1399883187_84

除了form和applation没有任何提示外,其他role值均有语音提示。
banner、navigation、search、main、complementary、contentinfo可以应用到相应的提示区块。

其他role值:
1399883195_23

有明确语音提示标签功能的role值有:
button、checkbox、combobox、heading、menuitem、menuitemcheckbox、menuitemradio、progressbar、radio、slider、tab。

语音只提示内容的role值有:
gridcell、group、log、menu、menubar、option、presentation、radiogroup、region、row、separator、tablist、tabpanel、timer、toolbar、tooltip、tree、treeitem。

无任何语音提示的role值有:
alert、alertdialog、listbox。

提示“噔噔噔”的role有:
grid、spinbutton。

以上为role在IOS系统内得到的语音测试结果。

移动端H5信息无障碍,其实不需要太多的专业背景和技术。
只要重构的同学有份小小的爱心,盲人或视障朋友就可以轻松自由地遨游移动互联网世界了。

附参考资料:
https://www.apple.com/cn/accessibility/osx/voiceover/
http://www.topcss.org/?cat=1
http://baike.baidu.com/view/2401179.htm
http://accessibilityunion.org/
http://www.css3china.com