Доступность: Как правильно использовать несколько элементов LABEL для одного элемента INPUT (через ARIA, et c.)?

Question

У меня есть двухстороннее мобильное меню, которое использует скрытый флажок для переключения / переключения между двумя сторонами.

Есть два элемента LABEL, по одному на каждой стороне ящика меню. Каждый LABEL через свой атрибут FOR ссылается на идентификатор скрытого флажка INPUT. Нажатие на отображаемую метку, таким образом, проверяет флажок 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. . "

Однако расширение браузера WebAIM WAVE (Инструмент оценки веб-доступности) помечает две метки как ошибку, заявляя,

" Элемент управления формы должен иметь большинство связанных элементов метки. Если с элементом управления связано более одного элемента метки, вспомогательная технология может не прочитать соответствующую метку. "

В качестве исправления она переходит в состояние:

"Если необходимо несколько меток формы, используйте aria-labelledby."

aria-labelledby, похоже, не относится к моему случаю, так как он будет помещен в элемент INPUT, который на него ссылается DIV, et c.

Есть ли 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>.