Программа чтения с экрана NVDA дважды читает заголовок, если в него встроена ссылка

Я столкнулся с проблемой в программе чтения с экрана NVDA. Это чтение заголовка дважды. Ниже приведена структура HTML.

<article>
  <figure>
    <div id="placeholder">
      <a id="thumbnail" href="" aria-hidden="true" tabindex="-1" class="focused">
        <img src="/static-files/img.png" width="700" height="400" alt="">
      </a>
    </div>
    <figcaption>
      <h3 class="h6">
        <a href="/stories/sample.html"> Example Title </a>
      </h3>
      <small>
        September 24, 1999
      </small>
    </figcaption>
  </figure>
</article>

  • Кроме того, средство чтения с экрана читает кликабельно несколько раз, когда фокусируется на ссылке.

    Если кто-то может придумать решение, это было бы большим подспорьем. Я новичок в доступности.

Заранее спасибо :)


javascript html accessibility uiaccessibility nvda
person Deepak    schedule 07.10.2018    source источник
comment
То есть вы имеете в виду, что Example Title читается дважды?   -  person brk    schedule 07.10.2018
comment
Да. Он читает ссылку примера заголовка, сгруппированную по примеру заголовка ссылки уровня 3, как это.   -  person Deepak    schedule 08.10.2018

Ответы (1)


arrow_upward
3
arrow_downward

Проблема не в NVDA, а в браузере. Какой браузер вы используете? Я дважды слышу «Название примера» при использовании программы чтения с экрана с Firefox и Chrome, но не с Internet Explorer. Неважно, использовал ли я NVDA или JAWS. Проблема была в браузере.

И Firefox, и Chrome рассматривают <figcaption> как роль group. Это действительная роль для этого элемента, как указано в html. спецификация для figcaption, но обычно браузер не должен выбирать роль по умолчанию, если в спецификации html не указано, какой должна быть роль по умолчанию. Например, элемент <section> говорит роль по умолчанию — region, но ей можно назначить несколько других типов ролей. Если ни одна из других ролей не назначена разработчиком HTML, тогда следует использовать роль по умолчанию region.

<figcaption>, с другой стороны, нет роли по умолчанию, и браузер не должен выбирать group за вас. Имеет смысл, что <figcaption> должна быть групповой ролью, поэтому, возможно, спецификация html должна измениться, чтобы сказать это, но до тех пор неправильно выбирать роль по умолчанию браузером.

Теперь, если все это имеет смысл, что firefox и chrome (неправильно) выбирают для вас групповую роль, когда вы переходите в группу с помощью клавиши tab, сначала объявляется имя группы, а затем что угодно элемент, на который вы приземлились, объявляется следующим.

Имя группы в данном случае — это весь текст, содержащийся в файле <figcaption>. Это означает текст ссылки, «пример заголовка», а также дату «24 сентября 1999 года». И тогда элемент, на который вы переместили фокус, представляет собой ссылку, содержащуюся в заголовке, поэтому текст ссылки (правильно) объявляется как «пример заголовка». В общем, я слышу "Example Title September 24, 1999 grouping, Example Title, link, heading level 3".

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

Если вы перемещаетесь с помощью клавиш навигации DOM средства чтения с экрана (клавиши вверх/вниз), вы не слышите текст ссылки дважды. Вы переходите к каждому элементу отдельно.

Конечным результатом является то, что вам не нужно ничего делать, чтобы это исправить. Ваш код правильный, и это ошибка в браузере. Однако, если вы хотите обойти проблему, вы можете назначить <figcaption> конкретную роль group и не давать ему роль aria-label. Это предотвратит чтение вашего figcaption как группового ярлыка, но опять же, я бы не рекомендовал это делать.

Если вам интересно, почему этот хак работает, если вы дадите элементу роль, но не присвоите роли метку (через aria-label или aria-labelledby), тогда большинство браузеров не отобразят роль этого элемента, поэтому программа чтения с экрана не будет читать Это.

Обновление:

Я забыл прокомментировать проблему «кликабельности». То есть NVDA дает вам знать, что элемент или его родитель, или кто-то выше по древу предков имеет обработчик щелчка, когда обычно щелчок не обрабатывается. Например, если у вас есть <div>, или <h2>, или <p>, или какой-то другой неинтерактивный элемент с обработчиком onClick, то обычно это не интерактивные элементы, поэтому NVDA сообщает, что вы можете выбрать этот элемент.

Вы можете увидеть более подробную информацию на https://github.com/nvaccess/nvda/issues/7430#issuecomment-318984375

person slugolicious    schedule 08.10.2018
comment
Спасибо за ваш ответ. Я понял причину бага. Наряду с этим я наблюдал следующую ошибку, когда фокусировался на некоторых ссылках. Кроме того, программа чтения с экрана читает кликабельно несколько раз, когда фокусируется на ссылке. - person Deepak; 08.10.2018
comment
Ах, я забыл о кликабельной проблеме. Я только что обновил свой ответ. - person slugolicious; 08.10.2018