我是否需要在自定义单选按钮上使用 ARIA 角色属性以符合可访问性指南?
Do I need to use the ARIA role attribute on custom radio buttons to be compliant with accessibility guidelines?
我有以下 HTML 来创建一个看起来像 yes/no 切换的自定义单选按钮。为了符合 WCAG 准则,此标记是否需要在标签上使用 role="checkbox"
ARIA 属性?因为我在标记中有一个原生的 HTML 单选按钮,所以我不确定这里是否需要 ARIA。
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control">Yes
</label>
<label class="btn btn-default active">
<input type="radio" class="form-control" selected="true">No
</label>
</div>
不,单选按钮没有问题。他们没有什么习俗。您正在使用本机单选按钮,角色是默认定义的,并且您有一个与之关联的隐式标签。
如果您将角色设置为 checkbox
,这将导致屏幕 reader 将其宣布为一个复选框,并且用户会认为他们可以按下 space 来切换值 on/off,事实并非如此。用户必须听到它是一个单选按钮,这样他们就会知道使用箭头键导航到每个单选按钮。
不过有两件事不见了:
- 首先是每个
<input type="radio">
上的 name
属性,以便将单选按钮组合在一起。
- 第二个是单选按钮的容器(单选按钮组)。您需要
<fieldset>
或 <div role="radiogroup">
。无论您选择哪一个,该组都需要一个标签。分别为 <legend>
或 aria-label
。
我有以下 HTML 来创建一个看起来像 yes/no 切换的自定义单选按钮。为了符合 WCAG 准则,此标记是否需要在标签上使用 role="checkbox"
ARIA 属性?因为我在标记中有一个原生的 HTML 单选按钮,所以我不确定这里是否需要 ARIA。
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control">Yes
</label>
<label class="btn btn-default active">
<input type="radio" class="form-control" selected="true">No
</label>
</div>
不,单选按钮没有问题。他们没有什么习俗。您正在使用本机单选按钮,角色是默认定义的,并且您有一个与之关联的隐式标签。
如果您将角色设置为 checkbox
,这将导致屏幕 reader 将其宣布为一个复选框,并且用户会认为他们可以按下 space 来切换值 on/off,事实并非如此。用户必须听到它是一个单选按钮,这样他们就会知道使用箭头键导航到每个单选按钮。
不过有两件事不见了:
- 首先是每个
<input type="radio">
上的name
属性,以便将单选按钮组合在一起。 - 第二个是单选按钮的容器(单选按钮组)。您需要
<fieldset>
或<div role="radiogroup">
。无论您选择哪一个,该组都需要一个标签。分别为<legend>
或aria-label
。