Доступность форм: Проблемы с заполнителями placeholder HTML

От автора: на днях я заполнял регистрационную форму онлайн-экзамена. Они попросили меня ввести мой адрес офиса, домашний адрес, рабочий телефон и домашний телефон. Я заполнил всю информацию без каких-либо проблем. Однако, когда я захотел проверить, ввел ли я все данные в правильных полях, текст «Адрес офиса» и тексты для других полей исчезли. Что мне было делать? Нужно ли повторно вводить данные в поле, чтобы убедиться, что я прав? К сожалению, это единственный способ, который отнимает много времени и расстраивает.

Атрибут placeholder HTML указывает краткую подсказку, которая описывает ожидаемое значение поля ввода (например, примерное значение или краткое описание ожидаемого формата).

Краткая подсказка отображается в поле ввода до того, как пользователь введет значение.

Атрибут placeholder работает со следующими типами ввода:

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

В первой части серии, посвященной доступным формам, мы рассмотрим, почему использование заполнителя не очень полезно с точки зрения доступности и как успешно использовать атрибут заполнителя.

Избегайте атрибута заполнителя

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

Недостаточный цветовой контраст заполнителей

Цвет по умолчанию для заполнителя в поле формы — светло-серый, который часто не соответствует Критерия 1.4.3 Web Content Accessibility Guidelines (WCAG). В соответствии с WCAG SC 1.4.3 визуальное представление текста и изображений текста должно иметь контрастность не менее 4,5: 1, а разные браузеры по-разному отображают заполнитель. Чтобы заполнитель соответствовал требованиям к цветовой контрастности, необходимо использовать надлежащий CSS:

Пример кода CSS для заполнителя

::-moz-placeholder { color: #333; opacity: 1;
} ::-webkit-input-placeholder { color: #333;
}

Заполнитель не заменяет видимые метки

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

Избегайте предоставления инструкций с использованием атрибута заполнителя

Инструкции помогают пользователям успешно заполнить форму. Однако, если инструкции добавляются через атрибут заполнителя, пользователь может быть не в состоянии эффективно использовать эту инструкцию. Поскольку заполнители исчезают, когда пользователь начинает заполнять форму, пользователи могут пропустить важную информацию. Например, инструкции для пароля не должны предоставляться с использованием атрибута-заполнителя.

Пример синтаксиса для пароля-заполнителя

<label for="password1">Password</label>
<input type="text" id="password1" placeholder="Password should be 8 characters with one number, one special character">

В приведенном выше примере для пароля требуется специальный символ, число, и пароль должен быть длиной 8 символов. Это может стать более сложным, если к инструкции добавится больше вариантов.

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

Пример синтаксиса для статической подсказки

<label for="password">Password</label>
<input type="text" id="password" placeholder="enter password" aria-describedby="password-hint">
<span id="password-hint">Password should be 8characters long with a number & a special character</span>

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

Важно отметить, что не все программы чтения с экрана и браузеры поддерживают атрибут placeholder. Если он не читается программой чтения с экрана, пользователь программы чтения с экрана может пропустить эту информацию.

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

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

На мой взгляд, лучший пользовательский опыт для всех, если заполнитель используется так, как это предусмотрено в спецификации HTML. Если вы решите использовать заполнитель, его следует использовать только для коротких подсказок.

Заключение

Автор: Raghavendra Satish Peri

Источник: https://www.deque.com

Редакция: Команда webformyself.