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

Question

我有以下 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>

Answer 1

不，单选按钮没有问题。他们没有什么习俗。您正在使用本机单选按钮，角色是默认定义的，并且您有一个与之关联的隐式标签。

如果您将角色设置为 checkbox，这将导致屏幕 reader 将其宣布为一个复选框，并且用户会认为他们可以按下 space 来切换值 on/off，事实并非如此。用户必须听到它是一个单选按钮，这样他们就会知道使用箭头键导航到每个单选按钮。

不过有两件事不见了：

首先是每个 <input type="radio"> 上的 name 属性，以便将单选按钮组合在一起。
第二个是单选按钮的容器（单选按钮组）。您需要 <fieldset> 或 <div role="radiogroup">。无论您选择哪一个，该组都需要一个标签。分别为 <legend> 或 aria-label。

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

Do I need to use the ARIA role attribute on custom radio buttons to be compliant with accessibility guidelines?

html

wai-aria

wcag