Веб-формы — Работа с пользовательскими данными

Несколько ярлыков

Строго говоря, вы можете поместить несколько меток на один виджет, но это не очень хорошая идея, поскольку у некоторых вспомогательных технологий могут возникнуть проблемы с их обработкой. В случае нескольких меток вы должны вложить виджет и его метки в один элемент.
Рассмотрим этот пример:

Required fields are followed by *.

Name:

*




Name:

*

Name: *

Скопировать в буфер обмена
Параграф вверху устанавливает правило для обязательных элементов. Правило должно быть включено до того, как оно будет использовано, чтобы зрячие пользователи и пользователи вспомогательных технологий, таких как программы для чтения с экрана, могли узнать, что оно означает, прежде чем столкнутся с требуемым элементом. Хотя это помогает информировать пользователей о том, что означает звездочка, на это нельзя полагаться. Программа чтения с экрана произносит звездочку как « звездочку », когда встречается. При наведении курсора мыши зрячим пользователем должно появиться « требуется », что достигается использованием атрибута title. Заголовки, читаемые вслух, зависят от настроек программы чтения с экрана, поэтому надежнее также включить атрибут aria-label, который всегда читается программой чтения с экрана.
Приведенные выше варианты повышают эффективность по мере их прохождения:

• 
  В первом примере метка вообще не считывается при вводе — просто получается «редактировать пустой текст», плюс собственно метки считываются отдельно. Несколько элементов сбивают с толку программу чтения с экрана.
  
• 
  Во втором примере все немного понятнее — вместе с вводом считывается метка «Требуется текст редактирования имени звездочки», а метки по-прежнему считываются отдельно. Все еще немного запутанно, но на этот раз все немного лучше, потому что с ним связан ярлык.
  
• 
  Третий пример лучше всего — реальная метка считывается вся вместе, а метка, считываемая с вводом, — это «имя, необходимое для редактирования текста».
  

Примечание. В зависимости от программы чтения с экрана вы можете получить немного разные результаты. Это было проверено в VoiceOver (и NVDA ведет себя аналогично). Мы также хотели бы услышать о вашем опыте.
Примечание. Вы можете найти этот пример на GitHub как required-labels.html ( см. также вживую ). Не тестируйте пример с 2 или 3 раскомментированными версиями — программы чтения с экрана определенно запутаются, если у вас есть несколько меток И несколько входных данных с одним и тем же идентификатором!