Цель использования «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атрибут, не так ли?

— Ян Ю.
источник

1

w3.org/TR/2010/WD-wai-aria-20100916/...

— Sarfraz

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 вместо людей,

— Майкл