html - 我是否需要在自定义单选按钮上使用 ARIA 角色属性以符合可访问性指南？

Question

我有以下 HTML 来创建一个显示为是/否切换的自定义单选按钮。为了符合 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>

Answer 1

不，单选按钮就可以了。他们没有什么习俗。您使用的是 native 单选按钮，角色是默认定义的，并且您有一个与之关联的隐式标签。

如果将角色设置为 checkbox ，这将导致屏幕阅读器将其宣布为复选框，并且用户会认为他们可以按 space 来打开/关闭值，但事实并非如此。用户必须听到这是一个单选按钮，这样他们就会知道使用箭头键导航到每个单选按钮。

不过，有两件事是缺失的:

1. 第一个是 name每个 <input type="radio"> 的属性这样单选按钮就组合在一起了。
2. 第二个是单选按钮的容器(单选按钮组)。你要么需要 <fieldset>或 <div role="radiogroup"> .无论您选择哪一个，该组都需要一个标签。 <legend>或 aria-label , 分别。