Заполнитель текста лучшие практики для доступности

Question

В качестве примера приведена следующая разметка:

<label for="email">Email</label>
<input type="email" placeholder="[e-mail]" id="email" />

<label for="cc">Credit card</label>
<input type="input" placeholder="XXXX XXXX XXXX XXXX" id="cc" />

Будет ли программа чтения с экрана читать что-то вроде "Поле электронной почты, foo at bar dot com", "Кредитная карта XXXX пробел XXXX пробел..."? Если да, я думаю, что это не лучший пользовательский опыт, и лучше избегать использования заполнителей таким способом. Существуют ли рекомендации или примеры того, как дать пользователю краткую подсказку, предназначенную для того, чтобы помочь пользователю с вводом данных в удобном для понимания формате, который работает для всех пользователей?

Answer 1

Программы чтения с экрана, такие как JAWS и NVDA, не читают текст-заполнитель, это только визуальное дополнение.

Однако, если вы предоставляете важную информацию визуально (например, формат для ввода данных), нет никаких причин, по которым вам не следует передавать эту информацию также пользователям программ чтения с экрана. Хороший способ сделать это с помощью программы чтения с экрана только немного текста. Создайте класс с помощью CSS, который скрывает текст визуально (за пределами экрана), и вставьте его в промежуток, где вы хотите, чтобы он был прочитан.

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

.sr-only {
  position: absolute;
  left: -99999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

<label for="DOB">
  DOB <span class="sr-only">Enter date in the format DD/MM/YYYY</span>
</label>
<input type="text" placeholder="DD/MM/YYYY" id="DOB">

Answer 2

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

В твоих примерах это совершенно нормально. Пользователи программы чтения с экрана прекрасно знают формат адреса электронной почты и не хотят слышать "ex ex ex. Ex ex ex. Ex ex ex. Ex ex ex." вместо "введите номер своей кредитной карты" (учтите, что группировать четыре на четыре невозможно, если номер вашей карты состоит из 13 цифр.)

Если вам действительно нужно дать подсказку, вы должны вставить ее в ярлык:

Более подробная информация на веб-странице W3C:

• Placeholder Research
• G89: Предоставление ожидаемого формата данных и примера

Answer 3

Советы по форматированию хороши для всех пользователей, независимо от того, являются ли они слабовидящими или нет. Имея пример под полем и связанный с полем, используя aria-describedby как я обычно это делаю.

<label for="email">Email</label>
<input type="email" id="email" aria-describedby="format"/>
<span id='format'>Format: [e-mail]</span>