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

否，单选按钮可以正常使用。他们没有任何风俗习惯。您正在使用本机单选按钮，并且角色是默认定义的，并且具有与其关联的隐式标签。

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

但是缺少两件事：

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

我是否需要在自定义单选按钮上使用ARIA角色属性以符合辅助功能准则？

1 个答案: