当标签不能用的时候,使用title属性来区分表单控件____20160504

原文地址


说明

该技巧的目的是使用title属性标记表单控件,当视觉设计不适合添加label的时候(例如,如果在屏幕上没有文本可以作为标签)或者放置标签会引起困扰的时候。用户代理,包含辅助技术,可以读出title属性。


样例

样例1:一个限制搜索范围的下拉菜单

一个搜索表单使用下拉菜单来限制搜索的范围。当文本输入搜索表单的时候,下拉菜单立即与文本域连接,搜索区域与下拉菜单的关系看起来很清楚,但是没有可见的视觉标签,title属性可以用来明确选择菜单。title属性可以被屏幕阅读器阅读,为使用屏幕放大器的用户提供提示;


效果

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

美国的电话号码包括三部分,地区代码、交换、后四位;


效果

电话号码

样例3:搜索功能:

给文本输入控件添加title属性,用来告知用户功能来位置;


效果

样例4:表单控件的数据表格

表单控件的数据表格单元需要将每一个控件都与列和行的表头联系。没有标题,对视障用户来说当tab到表格是,需要停下来使用辅助技术去查看每个行列的值。


无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
永德、IE11:
NVDA、IE11:
永德、chrome:
NVDA、chrome:
NVDA、Firefox:
voiceover、chrmoe:
voiceover、Safari: