Программа чтения с экрана должна читать aria-label и игнорировать метку с атрибутом for

В настоящее время я работаю над html-формой с надлежащим доступом для людей с ограниченными возможностями. У меня есть входы, помеченные метками с атрибутом for. Но теперь я хочу, чтобы один ввод получал для программы чтения с экрана другой текст, чем отображается на этикетке:

<div class="cc_form_w50 t5">
  <label id="lbl_city" for="input_city">City / Town</label>
</div>
<div class="cc_form_w50 t5">
  <input type="text" required name="city" title="City / Town" placeholder="Enter your city or town" class="w100" id="input_city">
</div>

Программа чтения с экрана подготовила символ «/» в качестве символа на системном языке, поэтому я хочу сделать программу чтения с экрана «или» вместо названия или заполнителя. Пока я использую атрибут «for» или «aria-labelledby», текст метки читается. Любой атрибут "aria-label" игнорируется читателем.

Без атрибута «for» курсор не входит в поле ввода, выбирая метку.

Можно ли указать программе чтения с экрана читать что-то еще, кроме содержимого метки-тега?


forms html screen-readers disability
person Baro    schedule 13.08.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Есть два способа исправить это.

Первый скрывает '/' от программ чтения с экрана (с помощью aria-hidden), а затем добавляет визуально скрытый текст, который читается программами чтения с экрана. Вы можете выполнить поиск в Google по классу sr-only. Он исходит из начальной загрузки, но его определяют и многие другие фреймворки. Вы можете скопировать определение класса из этого ответа stackoverflow.

<div>
  <label for="input_city">City <span aria-hidden="true">/</span> <span class="sr-only">or</span> Town</label>
</div>
<div>
  <input type="text" required name="city" placeholder="Enter your city or town" id="input_city">
</div>

Другой способ исправить это (и это немного проще) - полностью скрыть метку (опять же, используя aria-hidden) в программе чтения с экрана, а затем указать aria-label в <input>.

<div>
  <label for="input_city" aria-hidden="true">City / Town</label>
</div>
<div>
  <input type="text" required name="city" placeholder="Enter your city or town" id="input_city" aria-label="city or town">
</div>

Оба решения по-прежнему позволяют пользователю мыши нажимать на метку и перемещать фокус в поле <input>.

Я также удалил атрибут title (всплывающая подсказка), потому что казалось излишним наличие метки, заполнителя и всплывающей подсказки. Кроме того, некоторые программы чтения с экрана неправильно включают всплывающую подсказку в название ярлыка при его чтении, поэтому иногда вы все равно слышите "/" в ярлыке, если у вас есть всплывающая подсказка. (Всплывающая подсказка - это атрибут последний, который проверяется при определении доступного имени элемента. См. Шаг 2I в "Вычисление доступных имен и описаний")

person slugolicious    schedule 14.08.2018
comment
Большое спасибо, оба работают в определенном смысле, но первый создает довольно расплывчатое чтение при чтении этикетки. При нажатии на него готовятся только город и город, а не весь ярлык. Итак, я придерживаюсь второго подхода, когда щелчок по метке перемещает курсор во вход, но, следовательно, всегда читает текст, как ожидалось. - person Baro; 15.08.2018