的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标签的,“标签语义化”在我们心里可能又有了更深一层的认识和意义。
转载于:https://blog.51cto.com/jyb2014/1437845
的HTML5标签在Voiceover “眼里”是什么样相关推荐
- Voiceover “眼里” 的HTML5标签
当我们了解了移动设备中盲人辅助工具VoiceOver或Talkback或保益悦听能够帮助盲人朋友使用移动App时,我们或许应该从最基本的工作开始做起. 在大部分网页重构师面试的过程当中,"你 ...
- HTML5标签无障碍体验
当您打开Iphone的VoiceOver后,闭上眼睛操作WebApp时,您了解VoiceOver盲人辅助工具语音是怎么响应手指触摸到每一个HTML5标签的么? lvzei今天专门整理了一份HTML5常 ...
- html5 支持php标签吗,HTML5标签大全
本文给大家总结了html5标签知识,包括可以省略的标签.新增的标签,本文给大家介绍的非常详细,具有参考借鉴价值,感兴趣的朋友参考下吧 可以进行省略的标签 不允许写结束标记的标签:area(定义图像映射 ...
- HTML5标签的语义认知和理解
HTML5标签的语义认知和理解 http://blog.csdn.net/shyleoking/article/details/7269137 转载于:https://www.cnblogs.com/ ...
- html5标签及属性大全,HTML5 标签 和属性 列表.pdf
HTML5 标签 和属性 列表 按字母顺序排列的标签列表 4: 指在HTML 4.01 中定义了该 元素 标签 描述 5: 指在HTML 5 中定义了该元 素 定义注释 4 5 定义文档类型 4 5 ...
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5,今天这 ...
- html5标签的兼容性处理
HTML5的语义化标签以及属性 1.可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单 2.使用他们能让代码语义化更直观,而且更方便SEO ...
- HTML5标签用法及描述
2000 年底,国际 W 3C 织组织公布发行了 X HTML 1.0 版本,到现在已经有 10 年了.这 10 年里, Web 飞速发展,X HTML 1.0 显得"力不从心", ...
- [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
最新文章
- jsp页面修改成html页面
- 常见TS权限问题“通过终端服务访问”
- ORA-12516 TNS: 监听程序找不到符合协议堆栈要求的可用处理程序
- 我的模块加载系统 v17的入门教程2
- SQLErrorCodeSQLExceptionTranslator 使用以下的匹配规则
- YBTOJ:字符串匹配(KMP)
- php 编程祝新年快乐_用于测试自动化的7种编程语言
- DisplayX显示器测试、显示器屏幕检测
- 我的同学总结关于linux
- Lstm(循环神经网络)
- 智慧路灯杆系统车流量监测解决方案
- postgresql chm格式手册
- max7456 C语言,如何使用8位单片机对16位INT型数据进行操作
- (转载)MFC入门(四) 作者 zhoujiamurong
- https://www.jianshu.com/p/43d04d8baaf7
- 安卓测试基础入门——ADB命令
- 置信度和置信度区间理解
- 数据库主从(一主一从)模式,docker配置步骤
- 名言警句(每天三遍)
- Python学习记录 私有属性和私有方法
热门文章
- java8的优点_java8的优缺点
- 笔记本登录中国银行网上银行蓝屏解决办法
- sillyGirl傻妞机器人安装教程+视频 6.4
- python turtle 画动漫人物_用turtle画动漫人物表白【Python】
- 文本分析:基于2020年国家社科基金年度项目-图书馆·情报与文献学立项名单
- SpringBoot后端统计网站的IP访问次数及地区
- 购物商城模板APP和定制APP的区别到底在哪里
- 现场管理三大工具(zt)
- pos机显示交易拨号失败服务器无响应,POS机常见故障解答
- linux(ubuntu)下照片.jpg和.png相互转换