Считыватель экрана NVDA читает заголовок дважды, когда встроен со ссылкой

Question

Считыватель экрана NVDA читает заголовок дважды, когда встроен со ссылкой

1

Я столкнулся с проблемой в читателе 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>

Кроме того, программа чтения с экрана читает несколько раз клики, когда сосредоточена на ссылке.

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

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

Deepak 07 окт. 2018, в 18:56

Источник

1

То есть вы имеете в виду, что Example Title читается дважды?
brk 07 окт. 2018, в 16:42
0

Да. Он читает «пример заголовка ссылки», сгруппированный по «пример заголовка ссылки заголовка уровня 3», как это.
Deepak 08 окт. 2018, в 02:50

Теги:

javascript

html5

accessibility

uiaccessibility

nvda

1 ответ

Ещё вопросы

То есть вы имеете в виду, что Example Title читается дважды?
Да. Он читает «пример заголовка ссылки», сгруппированный по «пример заголовка ссылки заголовка уровня 3», как это.

slugolicious · Answer 1 · 2018-10-08T12-02-00.000Z

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

Оба firefox и chrome обрабатывают <figcaption> как групповую роль. Что действительная роль для этого элемента, как указано в спецификации 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), то большинство браузеров не будут aria-labelledby роль этого элемента, поэтому экран читатель не прочитает его.

Обновить:

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

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

Спасибо за ваш ответ. Я получил причину ошибки. Наряду с этим я наблюдал приведенную ниже ошибку при фокусировке на некоторых ссылках. Кроме того, программа чтения с экрана считывает несколько нажатий, когда фокусируется на ссылке .
Ах, я забыл о "кликабельном" вопросе. Я только что обновил свой ответ.