当不能使用label元素的使用,使用title属性标记表单控件_20160415
说明
当视觉设计不适合放置label的时候或显示label会造成困扰的时候,使用title属性标记控件。用户代理,包括辅助技术,可以读出title属性
样例
样例1:限制搜索区域的下拉菜单
搜索表单使用下拉菜单限制搜索区域。下拉菜单靠着一个文本域用来输入搜索条目。搜索区域和下拉菜单对使用视觉的用户很清楚,而没有明显的视觉label。title属性用来标记select菜单。title属性可以被屏幕阅读器读出,或者使用屏幕阅读器的用户。
效果
样例4:
表单控件的数据表格需要将单元格与表头链接起来。没有title属性,对非视觉用户来说使用辅助技术tab表单很难将表头和单元格联系起来。
无障碍效果
各读屏、各浏览器的支持效果
测试人:沈广荣
- 争渡、IE11:
- 样例1,搜索: 可编辑文本 、搜索 组合框 ,
样例2,区号 可编辑文本 、前三位 可编辑文本 、后三位 可编辑文本 ,
样例3,请输入搜索内容 可编辑文本 、 Search 按下按钮 样例4,无
- 永德、IE11:
- 样例1,搜索: 可编辑文本 、搜索 组合框 已折叠 ,
样例2,区号 可编辑文本 、前三位 可编辑文本 、后三位 可编辑文本 ,
样例3,请输入搜索内容 可编辑文本 、 Search 按下按钮 样例4,无
- NVDA、IE11:
- 样例1,搜索: 编辑框 、搜索 组合框 已折叠 ,
样例2,电话号码分组 区号 编辑框 、前三位 编辑框 、后三位 编辑框 ,
样例3,请输入搜索内容 编辑框 、 Search 按钮 样例4,无
- 永德、chrome:
- 样例1,搜索: 可编辑文本 、搜索 组合框 已折叠 ,
样例2,区号 可编辑文本 、前三位 可编辑文本 、后三位 可编辑文本 ,
样例3,请输入搜索内容 可编辑文本 、 Search 按下按钮 样例4,无
- NVDA、chrome:
- 样例1,搜索: 编辑框 、搜索 组合框 已折叠 ,
样例2,电话号码分组 区号 编辑框 、前三位 编辑框 、后三位 编辑框 ,
样例3,请输入搜索内容 编辑框 、 Search 按钮 样例4,无
- NVDA、Firefox:
- 样例1,搜索: 编辑框 、搜索 组合框 已折叠 ,
样例2,电话号码分组 区号 编辑框 、前三位 编辑框 、后三位 编辑框 ,
样例3,请输入搜索内容 编辑框 、 Search 按钮 样例4,无
- voiceover、chrmoe:
- 样例1,搜索: 编辑文本 、搜索 组合框 ,
样例2,电话号码分组 区号 编辑文本 、前三位 编辑文本 、后三位 编辑文本 ,
样例3,请输入搜索内容 编辑文本 、 Search 按钮 样例4,无
- voiceover、Safari:
- 样例1,搜索: 编辑文本 、搜索 组合框 ,
样例2,电话号码分组 区号 编辑文本 、前三位 编辑文本 、后三位 编辑文本 ,
样例3,请输入搜索内容 编辑文本 、 Search 按钮 样例4,无