Voiceover “眼里” 的HTML5标签
当我们了解了移动设备中盲人辅助工具VoiceOver或Talkback或保益悦听能够帮助盲人朋友使用移动App时，我们或许应该从最基本的工作开始做起。
在大部分网页重构师面试的过程当中，“你是怎么认为标签语义化的”，这样的问题经常会被问答，说实话，真的很难有标准答案，一般都是从业者根据自己的从业经验所总结出来的对标签语义化的自我认识。
且看标签语义化相对专业化的描述：
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。
讲到搜索引擎， 可能很多人一说到标签语义化，除了能够见名知意，最重要的就是为了搜索引擎而做的SEO优化。那在移动设备当中，如果H5页面不是能被搜索引擎搜索到的页面，比如内嵌于微信客户端或者手Q客户端的页面，这时再好的标签语义化，搜索引擎也是无能为力了。那这就意味着我们可以随便使用标签了么，当然不是，如之前所说，机器除了搜索引擎还包括了盲人辅助工具，甚至更多的机器，这时我们的注意力就该投入到使HTML5标签适配这样的一些机器上了，这样才能更体现出网页重构师真的“不只是码仔”。
所以了解读屏软件对HTML5标签是怎么辨识的，对于重构设计师来说是忒有必要了。只有了解了这些，才能从根本上使项目中的标签语义化，让他们更好地支持盲人辅助工具，以帮助引导视障人士正确地使用网页。
这次主要以IOS的盲人辅助工具VoiceOver为主要测试工具，对HTML5标签进行测试。
测试软硬件为：
设备机型：Iphone4
操作系统：IOS7.0.1
辅助工具：VoiceOver
设备机型：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 内容
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.其他标签可参考上测试结果查看
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标签的，“标签语义化”在我们心里可能又有了更深一层的认识和意义。
如有兴趣，可扫二维码
