Цель использования «aria-labelledby» на уже отмеченных элементах ввода?

85

Многие демонстрационные веб-сайты ARIA используют такой код, как:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">


Но какова aria-labelledbyв этом случае цель использования атрибута? inputЭлемент уже помечен labelэлементом , который использует forатрибут, не так ли?

Ян Ю.
источник
8
Спасибо @Sarfraz. Однако эта страница не иллюстрирует цель такого использования уже помеченных элементов ввода.
Ian Y.

Ответы:

69

На страницах разработчиков Mozilla есть несколько хороших примеров его использования . Возможно, лучший из их примеров - это то, где оно используется для связывания всплывающего меню с родительским элементом меню - это Пример 7 на странице:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...  

Атрибуты ARIA имеют тенденцию быть наиболее полезными при создании доступных полнофункциональных интернет-приложений : пока вы придерживаетесь стандартного семантического HTML - используя формы со стандартными метками - он вам вообще не понадобится: поэтому нет причин использовать его в пара LABEL / INPUT. Но если вы создаете «богатый пользовательский интерфейс» с нуля (DIV и другие элементы низкого уровня с javascript, добавляющими интерактивность), то важно, чтобы программа чтения с экрана знала, в чем заключается намерение более высокого уровня.

BrendanMcK
источник
11
Спасибо @BrendanMcK. То, что вы сказали, правда. Я спросил у кого-то, кто работает на ARIA, и он тоже сказал, что в этом случае нет необходимости использовать aria-labelledby. Он сказал, что для маркировки <input> s используйте его только тогда, когда нам нужно пометить <input> несколькими <label> s. Вот пример, который он предоставил: html5accessibility.com/tests/mulitple-labels.html
Ian Y.
1
С одним и тем же элементом управления можно связать несколько LABEL, создав несколько ссылок через атрибут for . Хорошо, WAVE / WebAIM это не нравится, и оказывается, что есть проблема с поддержкой UA . Но его предложение просто странное , и я не думаю, что оно имеет какие-то реальные преимущества. По крайней мере, IE <= 8 не поддерживает несколько идентификаторов в aria-labelledby .
sourcejedi
1
эта ссылка ДОЛЖНА быть здесь: developer.mozilla.org/en-US/docs/Accessibility/ARIA
Факундо Коломбье
5

Всегда возникают проблемы с поддержкой UA с любым новым продуктом, поэтому разработчики обращают внимание на прогрессивные улучшения. Этот метод ARIA позволяет избавиться от атрибута «for» и позволяет другим элементам стать частью расширенной формы. Эти техники станут обычной практикой.

user2323922
источник
1
Фокусирует ли он элемент при нажатии, как это делает атрибут for? Полагаю, что нет
Доминик
3
Совершенно неверно. Атрибуты aria НЕ должны заменять другие атрибуты, поскольку их единственная цель - сделать элементы более доступными. Элементы НЕ должны быть фокусируемыми из-за какого-либо атрибута aria.
Густ ван де Валь,
1
На мой взгляд, общепринятая практика (к сожалению?) В настоящее время все еще не соответствует действительности. Лучшая практика может быть лучшим выбором. Может быть, в будущем, когда высокоразвитый ИИ будет писать html вместо людей,
Майкл