Почему скрытые элементы формы все еще читаются JAWS? - PullRequest
Новая
       48

Почему скрытые элементы формы все еще читаются JAWS?

1 голос
/ 28 октября 2008

Ситуация

У меня есть область экрана, которую можно показать и скрыть с помощью JavaScript (что-то вроде «показать / скрыть параметры расширенного поиска»). Внутри этой области есть элементы формы (выберите, флажок и т. Д.). Для пользователей, использующих вспомогательные технологии, такие как программа чтения с экрана (в данном случае JAWS), нам необходимо связать эти элементы формы с меткой или использовать атрибут «title» для описания назначения каждого элемента. Я использую атрибут title, потому что для метки недостаточно места, а всплывающая подсказка удобна для пользователей, не читающих экран.

Код выглядит примерно так: 

<div id="placeholder" style="display:none;">
  <select title="Month">
    <option>January</option>
    <option>February</option>
    ...
  </select>
</div>

Проблема

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

Возможные решения

Моей первой мыслью было использование скрытого ярлыка вместо заголовка, например: 

<div id="placeholder" style="display:none;">
  <label for="month" style="display:none">Month</label>
  <select id="month">...</select>
</div>

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

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

<div id="placeholder" style="display:none;">
  <label for="month" style="position:absolute;left:-5000px:width:1px;">Month</label>
  <select id="month">...</select>
</div>

Это на самом деле работает, но мы снова теряем всплывающую подсказку и все еще генерируем дополнительный HTML.

Мое третье возможное решение - рекурсивно перемещаться по DOM в JavaScript, удаляя заголовок, когда область скрыта, и добавляя его обратно, когда область отображается. Это также работает ... но довольно уродливо по очевидным причинам и не очень хорошо подходит для более общего случая.

Есть еще какие-нибудь идеи? Почему JAWS ведет себя так?

Ответы [ 3 ]

2 голосов
/ 23 апреля 2015

Дайте элементам атрибут aria-hidden = "true", и он должен быть скрыт от программы чтения с экрана.

1 голос
/ 29 октября 2008

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

Тем не менее, игра с говорить: слуховое свойство может быть полезным? Я не знаю, так как у меня нет доступных JAWS.

http://www.w3.org/TR/CSS2/aural.html#speaking-props

0 голосов
/ 15 апреля 2015

Вы пробовали это? 

<div id="placeholder" style="display:none;">
  <select title="Month" style="speak:none;">
    <option>January</option>
    <option>February</option>
    ...
  </select>
</div>

Это работало для меня в прошлом, когда я хотел, чтобы JAWS прочитал одну вещь и пропустил что-то еще, что обычно читается.

...