使用aria-required属性来标识必填区域____20160504

原文地址


说明

该技巧的目的是提供编程式说明,指明表单区域(必填区域)是成功提交表单所必须的。

元素必填的情况经常通过视觉呈现(通过文本或非文本符号,或文本指明输入是必须的或颜色、样式),但作为区域的名字不是编程式确定的。

WAI-ARIA aria-required属性经常在提供之前表明用户输入是必须的。aria-required属性有truefalse两个值。例如,如果用户必须输入地址区域,将aria-required设置为true

注1: 当星号和其他文本符号编程式与区域联系,使用aria-required="true"对辅助技术使用者来说会加强required属性。

注2: 元素必填经常通过视觉呈现(例如在控件后符号或符号)。使用aria-required属性让用户代理更容易的通过用户代理特有的方式向用户传递信息。


样例

样例1:必要属性通过星号来显示;


效果

注意: [*]是必填区域

[*]

[*]

样例2:在label后使用必填字样来指明必填属性


效果

[必填]

[必填]

[必填]

[必填]

样例3:

在内容之前使用CSS样式来渲染红边框和星图指明必填属性。该样例同时使用了具有role=radio自定义单选按钮,使用脚本让span像单选按钮一样工作,但是该脚本未包含在该样例中。CSS属性在表单下面。


CSS样式:


样例4.通过使用JS添加aria-required属性


效果

请输入以下数据。必需字段已被编程鉴定为需要和带星号(*)以下字段标签标记。


无障碍效果

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

测试人:

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