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

Question

В настоящее время я работаю над 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" курсор не вводит ввод, выбирая метку.

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

Answer 1

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

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

<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 в разделе " Вычисление доступного имени и описания")