ария-метка против формы метки

Question

Существуют ли какие-либо различия между этими двумя техниками чтения с экрана в формах, и это более поощряется, чем другое:

<label for="titleInput">Title</label>
<input type="text" id="titleInput" name="title" value="">


<div>Title</div>
<input type="text" aria-label="Title" name="title" value="">

Первым способом всегда было настроить это, но с тех пор, как была представлена ​​WAI-ARIA, я подумал, что лучше использовать aria-label с формами, чем <label for="x">.

Answer 1

Практическое правило. Если реальный элемент может выполнить работу, то используйте реальный элемент. ARIA - это то, к чему вы возвращаетесь, когда нет реального элемента, который выражает семантику, или когда вы делаете что-то действительно странное , которое мешает вам использовать обычный элемент.

(В большинстве случаев, когда вы делаете что-то действительно странное , вы должны прекратить делать странные вещи вместо этого).

В данном конкретном случае между ними есть пара существенных отличий.

Браузеры не будут расширять цель клика до элемента div, как это было бы с элементом label . Нажатие на метку будет фокусировать ввод, нажатие на div не будет.

Теперь у вас есть две метки . Div и атрибут предоставляют одинаковую информацию в двух разных местах. Атрибут не заменяет div, поэтому программа чтения с экрана считывает текст div и метку, связанную с вводом.

Используйте <label>. Это специально для связывания текста с контролем формы.

aria-label предназначен для предоставления текстового описания некоторого содержимого, которое программа чтения с экрана не может прочитать. например когда вы используете фоновое изображение для передачи информации вместо <img> с атрибутом alt (см. мое предыдущее примечание о странность ).

Answer 2

Ария-лейбл для доступности.Если добавлена ​​метка Aria, то при передаче голоса за кадром, т. Е. (Cmd + F5 на MAC или JAWS на машине с Windows будет считывать все, что введено в атрибуте aria-label тега HTML. Эта функция очень полезна для пользователей с ограниченным зрением. Читатьздесь https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Метка - это тег HTML, как и теги <form> or <h1>..<h6> и т. д., когда тег используется, он отображает метку в пользовательском интерфейсе. Например: <Label>ENTER NAME</Label>