的HTML5标签在Voiceover “眼里”是什么样

　　当我们了解了移动设备中盲人辅助工具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标签的，“标签语义化”在我们心里可能又有了更深一层的认识和意义。