辅助功能：如何为一个 INPUT 项目正确使用多个 LABEL 元素（通过 ARIA 等）？

Question

我有一个两侧的移动菜单抽屉，它依赖一个隐藏的复选框在两侧之间切换/切换。

有两个 LABEL 元素，菜单抽屉的每一侧一个。每个 LABEL 通过其 FOR 属性引用隐藏 INPUT 复选框的 ID。因此，单击显示的 LABEL 会检查 INPUT 复选框并导致菜单切换侧（通过 CSS）。HTML的提炼是：

<ul class=main-menu>
    <li>
        <input id=toggle-drawer type=checkbox title="hidden checkbox">
        <label for=toggle-drawer>See Sub Menu</label>
        <ul class=sub-menu>
            <li>
                <label for=toggle-drawer>See Main Menu</label>
            </li>
            <li>Sub-menu item 1</li>
            <li>Sub-menu item 2</li>
            <li>Sub-menu item 3</li>
        </ul>
    </li>
    <li>Main Menu item 1</li>
    <li>Main Menu item 2</li>
    <li>Main Menu item 3</li>
</ul>

事实上，具有多个引用同一输入项的标签是完全有效的 HTML。

见https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1：

“通过 for 属性创建多个引用，可以将多个 LABEL 与同一个控件相关联。”

但是，WebAIM WAVE（Web 可访问性评估工具）浏览器扩展将这两个标签标记为错误，说明：

“一个表单控件最多应该有一个关联的标签元素。如果多个标签元素与控件关联，辅助技术可能无法读取适当的标签。”

作为补救措施，它继续说明：

“如果需要多个表单标签，请使用 aria-labelledby。”

aria-labelledby 似乎不适用于我的情况，因为它会被放在一个 DIV 引用的 INPUT 项目上，等等。

我可以使用 ARIA 或类似的标记方法来满足此可访问性审核吗？我不想改变我的 HTML 结构。

Answer 1

虽然它是完全有效的 HTML，但有两个标签会导致 NVDA 和其他屏幕阅读器出现问题，因为它只能读取一个标签。

这就是 WAVE 建议您使用的原因aria-labelledby，因为它旨在获取多个元素并可以组合它们（按照您列出它们的顺序）。

在 上使用它是完全有效的input，还请注意，aria-labelledby将<label>使用for="id"

您可以做的一件事是使用较少使用aria-describedby的关联第二个标签并确保阅读顺序正确。

在下面的示例中，它将读取“请参阅主菜单，请参阅子菜单”，因为它将<label for="toggle-drawer">首先读取，然后使用aria-describedby="toggle-drawer-label"来添加其他信息。

唯一的缺点是它可能会读取<label>和describedby标签之间的输入信息。

<ul class=main-menu>
    <li>
        <input id="toggle-drawer" aria-describedby="toggle-drawer-label" type=checkbox title="hidden checkbox">
        <label id="toggle-drawer-label">See Sub Menu</label>
        <ul class=sub-menu>
            <li>
                <label for="toggle-drawer">See Main Menu</label>
            </li>
            <li>Sub-menu item 1</li>
            <li>Sub-menu item 2</li>
            <li>Sub-menu item 3</li>
        </ul>
    </li>
    <li>Main Menu item 1</li>
    <li>Main Menu item 2</li>
    <li>Main Menu item 3</li>
</ul>

推荐的方式

我建议简单地使用，aria-labelledby="label1 label2"因为这是公认的方法，并且会产生最一致的结果，显然这意味着您需要id为两个标签添加属性，以便进行权衡。

请注意，在两个标签上使用aria-labelledby="label1 label2"和关联字段具有for="toggle-drawer"正确链接标签的额外好处，以便您可以单击任一标签，它将聚焦<input>.