分类目录归档:无障碍

盲人辅助工具VoiceOver知多少?

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

 

版本号 整理内容 整理人 整理时间
V1.0 整理大纲 Rexren 2014-02-10
V2.0 整合操作说明 Rexren 2014-03-01
V3.0 整理HTML5开发规范 Rexren 2014-05-06
V4.0 整理Role使用规范 Rexren 2014-05-12

 

 

 

 

一、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.添加新语言:

QQ截图20140523132548

6.图像:
1399883246_91

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

 

四、VoiceOver手势操作

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

常用手势:
1399883225_23

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

 

五、如何输入文本

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

 

六、VoiceOver转子操作

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

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

可以通过转子调整音量、语速,然后上下单指轻滑即可调整音量大小或语速快慢,同理,以下内容也可以通过设置转子来设置,可进行选择性快速阅读想要阅读的内容,包括:

1399883208_62

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

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

七、HTML5标签测试结果
 

H5标签名称

VoiceOver语音提示内容

article

内容

header

横幅+内容+标志性内容

main

主要+内容+标志性内容

section

内容

aside

补充+内容+标志性内容

address

内容信息+内容+标志性内容

time

内容

details

内容

label

内容

form

内容

dl

无提示

dt

内容+列表开头

dd

内容

dd

(每组最后一个)内容+列表结尾

ul li

内容 最后一个li内容+列表结尾

ol li

内容 最后一个li内容+列表结尾

menu

内容

nav

无提示

h1

内容+标题级别一

h2

内容+标题级别二

h3

内容+标题级别三

h4

内容+标题级别四

h5

内容+标题级别五

h6

内容+标题级别六

table td

内容 最后一个td 内容+表格结尾

select

内容+弹出式按钮+连按两次来激活选取向 弹出框出现后,提示选项内容1(option顺序)xie xian si(真心没听清读的啥玩意),选区以及项目可调,用一个数值上下轻扫来调整至

optgroup

内容+弹出式按钮+连按两次来激活选取向 optgroup会和option并列读出,但optgroup不会被选中

textarea

内容+文本栏+连按两次来编辑,获焦后文本栏+正在编辑+内容

input[type="text"]

placeholder+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容

input[type="tel"]

placeholder+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容

input[type="password"]

placeholder+安全+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容

input[type="file"]

placeholder+按钮

input[type="button"]

placeholder+按钮

input[type="img"]

placeholder+按钮

input[type="submit"]

placeholder+按钮

input[type="reset"]

placeholder+按钮

input[type="range"]

%XXX可调,用一个竖指来轻扫至

input[type="week"]

连续触摸带移动(提示音:噔噔噔噔)

input[type="url"]

 placeholder+文本栏+连按两次来编辑

input[type="time"]

连续触摸带移动(提示音:噔噔噔噔),双击,调出弹框

input[type="search"]

placeholder+文本栏+连按两次来编辑

input[type="number"]

placeholder+文本栏+连按两次来编辑

input[type="month"]

连续触摸带移动(提示音:噔噔噔噔),双击,调出弹框

input[type="email"]

placeholder+文本栏+连按两次来编辑

input[type="datetime-local"]

连续触摸带移动(提示音:噔噔噔噔),不可双击

input[type="datetime"]

连续触摸带移动(提示音:噔噔噔噔),不可双击

input[type="date"]

连续触摸带移动(提示音:噔噔噔噔),不可双击

input[type="color"]

文本栏+连按两次来编辑,双击后,插入点在结尾+文本栏+正在编辑

input[type="checkbox"]

复选框+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”

input[type="radio"]

 收音机按钮+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”

button[type="submit"]

value+按钮,双击后 内容

button[type="reset"]

value+按钮,双击后 内容

button[type="button"]

 value+按钮,双击后 内容

img

title+图像

a

 内容+title内容+链接+title)(可以不使用title了)

p

内容

pre

内容

span

内容

del

内容

strong

内容

hr

连续触摸带移动(提示音:噔噔噔噔)

p

 内容

datalist

placeholder+文本栏+连按两次来编辑

div

内容

dialog

内容

fieldset  legend

朗读标题

figcaption

无提示

figure

无提示

form

无提示

iframe

 连续触摸带移动(提示音:噔噔噔噔)

output

内容

progress

百分之XX可调,用一个竖指上下轻扫来调整至

i

内容

em

内容

embed

连续触摸带移动(提示音:噔噔噔噔)

dfn

内容

code

内容

samp

内容

kdb

内容

u

内容

cite

内容

tt

内容

wbr

wbr包起来的内容和其他内容会分开朗读

object

内容

blockquote

内容

strike

内容

sub

内容

sup

内容

audio

 连续触摸带移动(提示音:噔噔噔噔)

canvas

内容

总结:

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

八、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移动应用。

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系统内得到的语音测试结果。

如果大家有兴趣使用自己的Iphone手机或者是Ipad测试一下,扫码即可。 

    222222 

22222222

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

使用VioceOver对WAI-ARIA规范中role属性的测试报告

先和大家分享一首由网络红人小臭臭演唱的一首《你是我的眼》

 

啥话不说,正文开始:

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

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

PC端的盲人辅助工具和移动端的辅助工具对role属性的支持到底有没有区别呢?

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

Landmark相关role
landmark

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

其他role
other_role

可明显提示标签功能的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系统内得到的语音测试结果。

扫一扫:
QQ截图20140510155035

VoicerOver快捷键设置:

设置->通用->辅助工具->辅助工具快捷键->勾选VoiceOver。OK,连按三次HOME键即可打开VoiceOver,继续连按三次,即可关闭。

【转】美味网存在的影响读屏软件操作的问题总结及其解决建议

就我个人体验来说,使用读屏软件可以访问美味网的所有页面和功能。但是还有很大的优化和改善空间。

主要问题:

右侧蓝的html代码写到了主要内容区域的前面
搜索区域的搜索按钮没有键盘焦点,搜索输入框没有文字提示
网页内图片没有文字描述
添加菜谱页面输入框没有有效的文字提示,添加选项的按钮没有键盘焦点
h系列标签使用的有些混乱
placeholder属性雨DOCTYPE 声明不匹配
没有使用landmark(路标)


解决建议:

1. 将右侧蓝的代码调整到主要内容区域之前

测试页面:
http://www.2meiwei.com/collect/detail/46013/

<div class="main_right">
这一个div的位置移动到
<div class="main_main>
后面。这样实现网页主要内容优先显示的原则。使用读屏软件等辅助工具的用户可以更快的找到主要内容。

2. 搜索区域的搜索按钮没有键盘焦点

html代码:
<span class="i-icon icon_search inlineblock" onclick = "this.parentNode.submit()">4</span>

建议可改成:
<span role="button" aria-label="搜索" tabindex="0" class="i-icon icon_search inlineblock" onclick = "this.parentNode.submit()">4</span>

解释:

增加role="button"这一aria属性可将该span的辅助角色设置成按钮。

增加aria-label="搜索"这一aria属性可以给这个按钮增加读屏软件可获取的提示文本。

tabindex="0"可使得span具有键盘焦点,将tabindex的值设置成0可以让该元素加入到tab序列中并且不改变该元素在tab序列中的原有顺序。

3. 页面内的图片没有文字描述

实例网址
http://www.2meiwei.com/recipe/detail/28630/

html代码片段:

网站logo
<a href="/" title="美味"><img src="http://static.2meiwei.com/m1/images/logo.png" alt="" height="60"/></a>

用户头像
<img src="http://i3.2meiwei.com/attachment/user/avatar/2014/007/02/06/60_small.jpg" width="60" height="60">

菜谱制作步骤
<img class="shbox-l mh10" src="http://i3.2meiwei.com/attachment/recipe/201106/p240_201106291209346.jpg" width="240">

图片增加文字描述只要加入alt属性即可。

需要特别注意的是,alt属性必须给有意义的内容,万不可随意填写。

4. 添加菜谱页面的问题

文本输入框没有使用label标签进行关联

在表单元素中,使用label元素将输入框、复选框单选按钮等的提示关联起来,不仅有利于读屏软件等辅助工具更好的给用户提示信息,而且还可以增加这些表单元素的可操作范围,也就是鼠标直接点击被label包裹的提示文本也可以激活这些元素。
html代码片段:

<h4 class="ctitle mv20">*菜谱名称</h4>
<div class="bg_wrap  p10">
<input id="recipetitle" type="text" class="inputarea" name="title" placeholder="请输入菜谱名称" value="">

可改为:

<h4 class="ctitle mv20"><label for="recipetitle">*菜谱名称</label></h4>
<div class="bg_wrap  p10">
<input id="recipetitle" type="text" class="inputarea" name="title" placeholder="请输入菜谱名称" value="">

“添加一行”按钮没有键盘焦点

使用span来模拟按钮是非常习惯的做法,但是这会给键盘操作带来很多困扰,最主要的就是没有键盘焦点,那么使用读屏软件等辅助工具的用户将无法操作到这些按钮。

改进的方法可参看前面关于搜索区域的搜索按钮的处理方法。

同时这里的代码片段还可以看出,文本输入框没有使用label标签进行提示文本的关联。

html代码片段:

<div class="mv10"><span class="f16 mh_r20">食材</span> <span class="hand pink" onclick="addshicaili('shicai')">添加一行</span></div>
<ul id="shicai">
 <li class="clearfix mv_b10">
  <input type="text" name="shicainame[]" placeholder="如:土豆" class="shicaiinput">
  <input type="text" name="shicaival[]" placeholder="如:500g" class="shicaiinput">
  <span class="delshicaili"></span>
 </li>
</ul>

5. h系列标签有些混乱

通常情况下,h系列标签按页面内容的重要程度使用,序号从1到6。一般不要跨越使用。

观察发现,网站的logo使用了h2,而右侧蓝的小标题则使用了h6,这里直接从2到了6,中间隔了3 4 5。
文章内容页面里的文章标题使用了h1,而菜谱内容页面的菜谱标题却没有使用h1。

6. placeholder属性雨DOCTYPE声明不匹配

placeholder属性是html5新增的,但是查看网页源码发现,DOCTYPE声明却不是html5的。或许这里是疏忽。

7. 没有使用landmark

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

这一功能添加非常简单,而对盲人等依靠辅助工具操作网页的用户来说,会大大改善网页的操作体验,缩短他们寻找信息的时间,提高他们的操作效率。

添加方法很简单,只要在页面中相应的html代码中增加role属性,并将他们的值设置成Landmark对应的值即可。

Landmark只有八个值,分别是:

banner:横幅区
navigation:导航区
search:搜索区
main:主要内容区
complementary:补充内容区(侧边栏)
contentinfo:版权与隐私区
form:表单区
application:应用程序区


使用js动态添加:

$(".searchform").attr("role","search");
$(".main_main").attr("role","main");
$(".main_right").attr("role","complementary");
$("#footer").attr("role","contentinfo");

原文摘自“晴天”博客。

移动端无障碍初探

经过一段时间对Iphone、Ipad和小米手机的无障碍操作测试,整理出来了一点点收获。


要从以下几块做了初步的测试:
测试机型:

  • Iphone4s
  • Ipad2
  • Mi2

测试点:

  • 无障碍辅助功能
  • 设备本身操作
  • 网页操作
  • 无障碍读屏软件(保益)(目前还没太在意,先入手设备自带辅助功能)

一、如何开启手机设备无障碍辅助功能:

  1. apple系列机型的无障碍辅助功能
    1355df529e54ab6a314d8d3864cd0e3d
  2. 小米系列机型的无障碍辅助功能
    1382593071_43

二、无障碍辅助功能基本操作介绍:
手机无障碍辅助功能主要的操作手势有:单指触摸,单指滑动,双指滑动,三指滑动,单击,双击等等
在此以Iphone为例:选中选项(选中选项时,选中项周围会出现边框,对于纯盲人而言,没太大意义):
  a、可任意移动手指,待听到语音提示后,连按两次即可进入相应功能;
  b、可使用左滑(内容逐个向前一个)右滑(内容逐个向后一个),待听到语音后双击进入;
  c、可使用上滑(上一个标题),下滑(下一个标题),块级标题(h1-h6),找到相应模块后,再使用左滑右滑找到具体选项入口;
    注:当上(下)滑到页面最初(末尾)时,会语音提示“找不到标题”,此处类似于PC端网页头部的无障碍导航。
  d、可使用三指滑动,切换手机主界面内容进行翻页;
  e、表单元素均需要连续双击才可获焦;
  f、键盘操作需要手指移动,待语音提示哪个字符后,双击确认输入的字符或者是汉字,当要重新输入其他字符时,需要重新选取字符,在此双击输入内容。


三、怎么读取到网页内容:
以腾讯移动端门户网站为测试点:
网页中操作手势基本上和(二)保持一致
目前测到的点:
  a、通过三指滑动可从上往下浏览网页;
  b、使用上滑(上一个标题),下滑(下一个标题),块级标题(h1-h6),可快速找到相应栏目,当滑至相应相应标题时,会有语音提示标题级别(1、2、3、4、5、6),
     读取标题时,h1-h6会按顺序依次读取,不会因标题级别不一样而跳过,通过标题级别语音提示,可以明确告知视障人事哪些是重要内容哪些是次要内容。
  c、可使用左滑(内容逐个向前一个)右滑(内容逐个向后一个),待听到语音后双击进入(同上);
  d、当读取到ul、ol首位或者末尾li时,会语音提示“列表开头”或“列表结尾”;
  e、三指滑动网页时,会有语音提示,第几页(在打开网页的同时,设备辅助功能会计算页面内容会有多少屏,一屏即一页);
  f、safari浏览器工具栏内内置所有操作按钮都会以语音提示:名称+按钮;
  g、网页标签会语音提示相应的内容后再读标签名称;
  h、form表单内元素会语音提示:“相应名称+连按两次来编辑”,是不是很人性?
     input[type=”text”]:value值+文本文本栏
     input[type=”date”]:selected值多型文本栏
     input[type=”password”]:密码安全
     input[type=”button”]:按钮,怪了不读value值
     button:按钮
     input[type=”checkbox”]复选框取消选中
     input[type=”radio”]收音机按钮(不知道为什么这么收音机)取消选中
     input[type=”file”]选取文件,双击后出现列表,拍照或录像、选区现有的,取消

  目前就测到了这些内容,后续会结合自身相关移动端项目做进一步的学习和研究。


在移动互联网大潮席卷而来之时,为盲人开启另外一扇窗是我们的一份责任。

Voiceover “眼里” 的HTML5标签

当我们了解了移动设备中盲人辅助工具VoiceOver或Talkback或保益悦听能够帮助盲人朋友使用移动App时,我们或许应该从最基本的工作开始做起。
在大部分网页重构师面试的过程当中,“你是怎么认为标签语义化的”,这样的问题经常会被问答,说实话,真的很难有标准答案,一般都是从业者根据自己的从业经验所总结出来的对标签语义化的自我认识。
且看标签语义化相对专业化的描述:
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。

没错,这里提到的机器,其实就已经包含了盲人辅助工具:争渡读屏软件永德读屏软件NVDA读屏软件VoiceOverTalkBack保益悦听等等,当然也包括搜索引擎啦。
讲到搜索引擎, 可能很多人一说到标签语义化,除了能够见名知意,最重要的就是为了搜索引擎而做的SEO优化。那在移动设备当中,如果H5页面不是能被搜索引擎搜索到的页面,比如内嵌于微信客户端或者手Q客户端的页面,这时再好的标签语义化,搜索引擎也是无能为力了。那这就意味着我们可以随便使用标签了么,当然不是,如之前所说,机器除了搜索引擎还包括了盲人辅助工具,甚至更多的机器,这时我们的注意力就该投入到使HTML5标签适配这样的一些机器上了,这样才能更体现出网页重构师真的“不只是码仔”。

所以了解读屏软件对HTML5标签是怎么辨识的,对于重构设计师来说是忒有必要了。只有了解了这些,才能从根本上使项目中的标签语义化,让他们更好地支持盲人辅助工具,以帮助引导视障人士正确地使用网页。

这次主要以IOS的盲人辅助工具VoiceOver为主要测试工具,对HTML5标签进行测试。

测试软硬件为:
设备机型:Iphone4
操作系统:IOS7.0.1
辅助工具:VoiceOver

具体测试结果为:
article   内容
header    横幅+内容+标志性内容
main      主要+内容+标志性内容
section   内容
aside     补充+内容+标志性内容
address   内容信息+内容+标志性内容
time      内容
details   内容
label     内容
form      内容
dl        无提示
dt        内容+列表开头
dd        内容
dd(每组最后一个)内容+列表结尾
ul li     内容 最后一个li内容+列表结尾
ol li     内容 最后一个li内容+列表结尾
menu      内容
nav       无提示
h1        内容+标题级别一
h2        内容+标题级别二
h3        内容+标题级别三
h4        内容+标题级别四
h5        内容+标题级别五
h6        内容+标题级别六
table td  内容 最后一个td 内容+表格结尾
select    内容+弹出式按钮+连按两次来激活选取向 弹出框出现后,提示选项内容1(option顺序)xie xian si(真心没听清读的啥玩意),选区以及项目可调,用一个数值上下轻扫来调整至
optgroup  内容+弹出式按钮+连按两次来激活选取向 optgroup会和option并列读出,但optgroup不会被选中
textarea  内容+文本栏+连按两次来编辑,获焦后文本栏+正在编辑+内容
input[type="text"] placeholder+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容

input[type="tel"] placeholder+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容
input[type="password"] placeholder+安全+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容
input[type="file"]   placeholder+按钮
input[type="button"]   placeholder+按钮
input[type="file"]   placeholder+按钮
input[type="img"]   placeholder+按钮
input[type="submit"]   placeholder+按钮
input[type="reset"]   placeholder+按钮
input[type="range"]   %XXX可调,用一个竖指来轻扫至
input[type="week"]    连续触摸带移动(提示音:噔噔噔噔)
input[type="url"]    placeholder+文本栏+连按两次来编辑
input[type="time"]    连续触摸带移动(提示音:噔噔噔噔),双击,调出弹框
input[type="search"]    placeholder+文本栏+连按两次来编辑
input[type="number"]    placeholder+文本栏+连按两次来编辑
input[type="month"]    连续触摸带移动(提示音:噔噔噔噔),双击,调出弹框
input[type="email"]    placeholder+文本栏+连按两次来编辑
input[type="datetime-local"]    连续触摸带移动(提示音:噔噔噔噔),不可双击
input[type="datetime"]    连续触摸带移动(提示音:噔噔噔噔),不可双击
input[type="date"]    连续触摸带移动(提示音:噔噔噔噔),不可双击
input[type="color"]    文本栏+连按两次来编辑,双击后,插入点在结尾+文本栏+正在编辑
input[type="checkbox"] 复选框+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”
input[type="radio"]    收音机按钮+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”
button[type="submit"]  value+按钮
双击后 内容
button[type="reset"]   value+按钮
双击后 内容
button[type="button"]  value+按钮
双击后 内容
img       title+图像
a         内容+title内容+链接+title)(可以不使用title了)
p         内容
pre       内容
span      内容
del       内容
strong    内容
hr        连续触摸带移动(提示音:噔噔噔噔)
p         内容
datalist  placeholder+文本栏+连按两次来编辑
div       内容
dialog    内容
fieldset  legend 朗读标题
figcaption 无提示
figure    无提示
form      无提示
iframe    连续触摸带移动(提示音:噔噔噔噔)
output    内容
progress  百分之XX可调,用一个竖指上下轻扫来调整至
i         内容
em        内容
embed     连续触摸带移动(提示音:噔噔噔噔)
dfn       内容
code      内容 
samp      内容
kdb       内容
u         内容
cite      内容
tt        内容
wbr       wbr包起来的内容和其他内容会分开朗读
object    内容
blockquote 内容
strike   内容
sub      内容
sup      内容
audio    连续触摸带移动(提示音:噔噔噔噔)
canvas   内容

总结:
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.其他标签可参考上测试结果查看

当我们初识了VoiceOver是怎么识别HTML5标签的,“标签语义化”在我们心里可能又有了更深一层的认识和意义。

如有兴趣,可扫二维码
HTML5标签无障碍体验-150x150

或点击查看html5
http://www.css3china.com/wp-content/accessible/html5_tag/index.html

HTML5标签无障碍体验

当您打开Iphone的VoiceOver后,闭上眼睛操作WebApp时,您了解VoiceOver盲人辅助工具语音是怎么响应手指触摸到每一个HTML5标签的么?

 

lvzei今天专门整理了一份HTML5常用标签集合,您只要打开Iphone或其他苹果系列产品的盲人辅助工具VoiceOver,扫描二维码就可以访问到该页面了。

 

打开VoiceOver具体操作:

Step1、点击 设置 图标;

Step2、找到 用 选项;

Step3、继续找到 辅助功能 选项;

Step4、打开 VoiceOver

这时IOS盲人辅助工具已经开启,每一步操作都会有语音提示。

 

刚开始您可能会有所不适应,连怎么关闭它都无所适从,不着急,还是按照以上步骤关闭它就可以了。

 

VoiceOver操作手势官方说明:

你可以使用 iOS 中相同的手势控制 VoiceOver。触摸触控板即可听到手指操作项目的描述,移动手指即可听到连续的项目描述,单指轻拂可移动至下一个项目。触控板表面支持 VoiceOver Trackpad Commander,可以显示当前窗口或文档,因此,只需轻点即可快速找到任何边或角。通过手势使用 VoiceOver,你可以清楚感知屏幕上项目的排列方式。

 

附图,资源来自官网说明和网络资源。

QQ截图20140416124402

QQ截图20140416124414

QQ截图20140416124539

 

您如果过没有Iphone手机,也可以使用android机,自行下载安装 Talkback 或 保益悦听 盲人辅助工具。

 

扫一扫:

HTML5标签无障碍体验

HTML5标签无障碍体验-150x150

或点击体验地址:

http://www.css3china.com/wp-content/accessible/html5_tag/index.html