Как запретить JAWS говорить "недопустимые записи" в обязательных полях?

При использовании атрибутов HTML5 для разметки формы с обязательными полями JAWS 14 в Firefox (и возможных других) объявляет пустые поля как "недопустимые записи" при первом обращении к ним (то есть, когда пользователь впервые сталкивается с поле).

<input type="text" required value="">

Использование aria-required="true" позволяет избежать неприятного сообщения (и JAWS по-прежнему информирует пользователя о том, что это поле необходимо), однако вы теряете функции проверки формы HTML5 (предотвращая отправку формы, подсказки, созданные браузером, для руководства пользователя и т.д.).

  • Как вы можете обойти объявление "недействительной записи"?
  • Почему JAWS это делает?
    Я бы понял, описывая поле как "недопустимое", если пользователь пропускает его (оставляя его пустым и, следовательно, недействительным), а затем снова фокусируется на нем. Текущая реализация запутывает, так как пользователю говорят, что они ввели что-то не так в поле, которое они даже не знали.

Я читал о хаках, которые устанавливали aria-invalid с JavaScript, чтобы обмануть JAWS, но я бы очень хотел, чтобы вы не наблюдали за взаимодействием с пользователем (событие focus и т.д.) в каждом отдельном поле на странице со многими входами. В настоящее время я использую <label>Label text <span style="display:none;">required field</span></label>, но это очень хакерское, не смысловое решение (не говоря уже о том, что я теряю преимущества HTML5 required).

Ответы

Ответ 1

FYI... это была известная проблема в JAWS 13/14 и других устройствах для чтения с экрана, как упоминалось в этой статье: Доступные формы 2: обязательные поля и дополнительная информация.

При использовании JAWS 13/14, NVDA 2012.3 и WindowsEyes 8.1 с Firefox 20 (и, возможно, некоторые другие браузеры), неверное сообщение для сообщения HTML5 для каждого поля требуемой формы при стрельбе по форме в режиме просмотра или с помощью вкладок от ввода до ввода в режиме форм. поскольку это предупреждение появляется до того, как запись была сделана, и это может быть потенциально запутанный для некоторых пользователей.

Теперь вы можете использовать вместе required и aria-required вместе с заполнителем.

<label for="theInput">Label Text (required):</label>
<input type="text" name="theInput" id="theInput" required="required" aria-required="true" placeholder="the Input" value="" />

Ответ 2

"Недопустимая запись" вызвана обязательным атрибутом. Вместо этого вы можете использовать aria-required = true. С этим решением вы избавляетесь от "недопустимой записи" с помощью JAWS и NVDA.

Чтобы получить полный список известных проблем, перейдите по этой ссылке на сообщение в блоге группы Paciello