Как запретить NVDA объявлять все содержимое ссылки?

У меня есть раздел кода, который содержится в ссылке, проблема в том, что когда я фокусирую элемент с помощью NVDA, содержимое ссылки читается сразу.

Например, у меня есть этот код:

   <a href="example.html" title="description link">
     <h2>Heading H2</h2>
     <span>More Text</span>
     <p>More text</p>
   </a>

И когда я фокусирую ссылку с помощью NVDA и Firefox, программа чтения с экрана упоминает все содержимое тегов h2, span и p без нажатия клавиши со стрелкой вниз.

В идеале, когда вы фокусируетесь на ссылке, просто читайте заголовок ссылки, а когда вы нажимаете клавишу со стрелкой вниз, читается остальная часть содержимого.


html accessibility screen-readers nvda
person Jessy Tylor    schedule 09.08.2019    source источник
comment
Это поведение, которое я ожидал бы, учитывая вашу разметку: когда программа чтения с экрана фокусируется на интерактивном элементе (например, <a>), она объявляет содержимое как «метку» (или «доступное имя») для этого элемента. Поведение, к которому вы призываете, больше относится к неинтерактивному контенту (так называемый режим просмотра). Вам действительно нужен/нужен весь этот контент внутри ссылки? Семантика «ссылки» <a> переопределит семантику заголовков и абзацев элементов внутри, поэтому разметка h2 и p избыточна! Каков реальный вариант использования?   -  person brennanyoung    schedule 09.08.2019
comment
Я не понимаю, почему вы думаете, что это проблема. Пользователи NVDA могут остановить чтение программы чтения с экрана с помощью Ctrl или приостановить ее с помощью Shift. Но если что-то слишком длинное и неинтересное людям, они, скорее всего, просто перейдут к следующему, что отвлечет читателя от прочтения следующего.   -  person selfthinker    schedule 10.08.2019
comment
Большое спасибо за ваши ответы в конце, я изменил html (ссылку на статью) и добавил функцию onClick с javascript, теперь семантически имеет больше смысла.   -  person Jessy Tylor    schedule 16.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

@brennanyoung прав. Все, что находится внутри тега привязки, будет прочитано программой чтения с экрана.

Если вы хотите, чтобы диапазон h2 и p по-прежнему были интерактивными, как если бы они были ссылкой, но не читались, когда пользователь NVDA наводит на них фокус, вы можете использовать CSS, чтобы расширить интерактивную область, чтобы включить текст ниже. Однако вам, вероятно, понадобится что-то в теге привязки. С большим контекстом я могу привести лучший пример, но вот идея

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 250px;  
    position: absolute;
    left: -25px;
    top: -25px;
}
person Taylor N    schedule 09.08.2019