当不能使用label元素的使用,使用title属性标记表单控件_20160415


说明

当视觉设计不适合放置label的时候或显示label会造成困扰的时候,使用title属性标记控件。用户代理,包括辅助技术,可以读出title属性


样例

样例1:限制搜索区域的下拉菜单

搜索表单使用下拉菜单限制搜索区域。下拉菜单靠着一个文本域用来输入搜索条目。搜索区域和下拉菜单对使用视觉的用户很清楚,而没有明显的视觉label。title属性用来标记select菜单。title属性可以被屏幕阅读器读出,或者使用屏幕阅读器的用户。



效果

样例2:电话号码的输入区域

美国的电话号码分为三段;



效果

电话号码

样例3:搜索功能

带有搜索框和搜索按钮的搜索表单



效果

样例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,无