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

Question

我有一个双侧移动菜单抽屉，它依赖于两侧之间 switching/toggling 的隐藏复选框。

有两个 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：

"More than one LABEL may be associated with the same control by creating multiple references via the for attribute."

但是，WebAIM WAVE（Web 辅助功能评估工具）浏览器扩展将这两个标签标记为错误，并指出，

"A form control should have at most one associated label element. If more than one label element is associated to the control, assistive technology may not read the appropriate label."

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

"If multiple form labels are necessary, use aria-labelledby."

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

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

Answer 1

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

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

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

覆盖任何关联的 <label> 元素

你可以做的一件事是使用不常用的aria-describedby来关联第二个标签，并确保阅读顺序是正确的。

在下面的示例中，它将读取 'See Main Menu, See Sub Menu'，因为它将首先读取 <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>

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

Accessibility: How to use multiple LABEL elements for one INPUT item correctly (via ARIA, etc.)?

html

label

accessibility

input

wai-aria

推荐方式