Aria-label против ярлыков форм
Существуют ли какие-либо различия между этими двумя методами чтения с экрана в формах, и один из них рекомендуется больше, чем другой:
<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">.
Ответы 2
Aria-label для доступности. Если добавлена метка 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>
Пайель, хотя это правильно, так как label имеет встроенную семантику доступности, поэтому в случаях, когда вы должны использовать метку (например, почти или во всех случаях, когда у вас есть ввод), это лучше, чем aria-label, потому что aria-label будет не поможет зрячим пользователям, которые могли бы извлечь выгоду из визуальных аспектов доступности/удобства использования, которые также могут обеспечить собственные элементы HTML.
Эмпирическое правило: если реальный элемент может выполнить эту работу, используйте настоящий элемент. ARIA — это то, к чему вы возвращаетесь, когда нет реального элемента, выражающего семантику, или когда вы делаете что-то очень странно, которое не позволяет вам использовать обычный элемент.
(Большую часть времени, когда вы делаете что-то очень странно, вместо этого вы должны перестать делать странные вещи).
В данном конкретном случае между ними есть несколько существенных различий.
Браузеры не будут расширять цель клика до элемента div, как это было бы с элементом label.. Щелчок по метке сфокусирует ввод, а щелчок по div — нет.
Теперь у вас есть две метки. Div и атрибут предоставляют информацию такой же в двух разных местах. Атрибут не заменяет div, поэтому программа чтения с экрана прочитает текст div а также — метку, связанную с вводом.
Используйте <label>. Он специально предназначен для связывания текста с элементом управления формы.
aria-label предназначен для предоставления текстового описания некоторого контента, который программа чтения с экрана не может прочитать. например когда вы используете фоновое изображение для передачи информации вместо использования <img> с атрибутом alt (см. мою предыдущую заметку о странность).
почему бы не использовать оба? если вы используете правильную метку, это также позволяет пользователю щелкнуть метку, чтобы сфокусироваться на вводе