Блог

Я знаю разницу между aria-label и aria-labelledby, но в чем разница между приведенными ниже и когда использовать одно из другого?

Код взят из библиотеки реактивного тестирования

 // first
<label for="username-input">Username</label>
<input id="username-input" />

// second
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />
 

Для первого, согласно документации mdn

Текст метки не только визуально связан с соответствующим вводом текста, но и программно связан с ним. … Вы можете щелкнуть соответствующую метку, чтобы сфокусировать/активировать ввод, а также сам ввод.

Но второй не обеспечивает эту функциональность для пользователя браузера, так как это просто атрибут ARIA для доступности.

Я также предположил доступность chrome devtools и обнаружил, что вычисленные свойства как первого, так и второго показывают, что ввод и метка связаны друг с другом.

Таким образом, насколько я понимаю, первый из них предоставляет пользователю программный доступ, а второй-нет, и как первый, так и второй доступны для чтения с экрана должным образом.

Является ли второе подмножеством первого? итак, является ли приведенный ниже код недопустимым шаблоном, поскольку первый из них является надмножеством второго?

 <label id="username-label" for="username-input">Username</label>
<input id="username-input" aria-labelledby="username-label" />
 

Спасибо.

Небольшое описание основного различия между aria-label мной и aria-labelledBy с моей стороны. 😋

Используйте aria-label , если текст метки не виден на экране, и используйте aria-labelledBy , если текст метки виден.

Мы можем прочитать больше о вариантах использования обоих атрибутов aria здесь, если захотим.

Разница между использованием идентификатора метки и aria-labelledby

 // first
<label for="username-input">Username</label>
<input id="username-input" />

// second
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />
 

Первый — это законный или традиционный способ связывания меток форм с входными данными. Второй не предоставляет функцию ввода фокуса при нажатии на соответствующую метку. Он используется только для обеспечения доступности в Интернете. Первый из них обеспечивает не только доступность в Интернете, но и функцию ввода фокуса. Таким образом, мы можем сказать, что первый из них обладает большей силой, чем второй.

Есть еще два способа связать метки с вводом вместе с функцией фокусировки ввода.

 // Wrapper labels
<label>Username <input /></label>

// Wrapper labels where the label text is in another child element
<label>
  <span>Username</span>
  <input />
</label>
 

Есть еще один способ, которым мы можем связать invisible or hidden метки с вводом, но не предоставляем функцию ввода фокуса.

 // aria-label attributes
// Take care because this is not a label that users can see on the page,
// so the purpose of your input must be obvious to visual users.
<input aria-label="Username" />
 

У меня есть некоторые (мои) правила, которые я использую на своем рабочем месте.

• Я использую первый пример всегда, когда это возможно.
• Я использую aria-label , когда у меня нет видимого текста. Представьте себе форму с элементом ввода, с которым не связана метка, и текстом-заполнителем для предоставления информации о том, что вводить во ввод.
• Я использую aria-labelledBy , чтобы связать элементы без меток с интерактивными элементами (например, ввод)

Является ли второе подмножеством первого? итак, является ли приведенный ниже код недопустимым шаблоном, поскольку первый из них является надмножеством второго?

 <label id="username-label" for="username-input">Username</label>
<input id="username-input" aria-labelledby="username-label" />
 

Мы должны знать, в чем заключается главное преимущество связи метки с вводом. Один из них, о котором вы упомянули в своем вопросе, — это web accessibility другой (согласно документам mdn).

Вы можете щелкнуть соответствующую метку, чтобы сфокусировать/активировать ввод, а также сам ввод. Эта увеличенная область попадания дает преимущество любому, кто пытается активировать ввод, в том числе с помощью устройства с сенсорным экраном.

Исходя из этого шаблона, вы связываете метку с вводом два раза и один раз для функции ввода фокуса. Первый из них предоставляет обе функции одновременно, поэтому нет смысла добавлять еще одну ассоциативность между меткой и вводом.