使用群组的roles来区分有关表单控件_____20160503

原文地址


说明

该技巧是用来将表单内的一组相关控件标记为一个组。与组有关的任何标签都有普通标签的作用或者作为组内单独控件的限定符。辅助技术可以识别组的开始和结束,组的标签可以作为进入和离开组的导航。这是表单组控件编程式添加替代,当界面设计不允许出现fieldset-legend的时候。

对于单选控件组,可以使用role="radiogroup"而不是role="group"; group可以使用aria-labelledby标记;

这个技巧不是针对表单内所有的元素,只是针对role="group"的单个容器;


样例

样例1:社会保障号码

社会保障号码有9位,可以使用role="group",分为3部分。


在线样例

样例2:识别单选组

该样例展示了role="radiogroup"的使用。注意,单选按钮是使用role="radio"的自定义控件。(让span像单选按钮一样作用的脚本未包含在本样例中。)一个可选项是使用CSS样式在群组周围放置一个边框,增强视觉上的群组关系。CSS代码在form代码下方。


在线样例


无障碍效果

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

测试人:

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