Voiceover “眼里” 的HTML5标签

当我们了解了移动设备中盲人辅助工具VoiceOver或Talkback或保益悦听能够帮助盲人朋友使用移动App时，我们或许应该从最基本的工作开始做起。

在大部分网页重构师面试的过程当中，“你是怎么认为标签语义化的”，这样的问题经常会被问答，说实话，真的很难有标准答案，一般都是从业者根据自己的从业经验所总结出来的对标签语义化的自我认识。

且看标签语义化相对专业化的描述：
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。

 

没错，这里提到的机器，其实就已经包含了盲人辅助工具：争渡读屏软件、永德读屏软件、NVDA读屏软件、VoiceOver、TalkBack、保益悦听等等，当然也包括搜索引擎啦。

讲到搜索引擎， 可能很多人一说到标签语义化，除了能够见名知意，最重要的就是为了搜索引擎而做的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
​http://www.css3china.com/wp-content/accessible/html5_tag/index.html