html - 辅助功能:如何为一个 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 :

"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将覆盖任何关联的 <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> .