Программа чтения с экрана NVDA читает кликабельное слово в тексте

Краткий ответ:

атрибут tabindex подразумевает функциональность некоторых программ чтения с экрана.

Длинный ответ:

Два основных способа, которыми пользователь программы чтения с экрана будет перемещаться по вашей веб-странице, — это пропуск интерактивных элементов или заголовков. Интерактивные элементы — это такие вещи, как ссылки, кнопки, поля формы и любые другие функции, которые пользователь инициирует на вашей странице. Навигация по ним осуществляется с помощью клавиши «Tab».

Другой основной способ навигации по вашей странице — по заголовкам. На самом деле, в опросе webaim заголовки в подавляющем большинстве указываются как основной метод навигации по странице для поиска информации (источник ). В вашем примере вы дали заголовку tabindex, который создаст впечатление, что он имеет некоторую функциональность или интерактивность. Насколько я понимаю, и JAWS, и NVDA будут считывать «кликабельные» элементы с tabindex, поскольку они могут легко (и обычно будут) иметь некоторые обработчики кликов javascript, которые не очевидны из программы чтения с экрана.

Во-первых, помните, что tabindex не является хорошей практикой в ​​a11y, а также заголовки не нуждаются в tabindex. NVDA обеспечивает навигацию по заголовку с помощью клавиши H. Про кликабельность могу сказать по моему опыту это известная проблема для NVDA, если проверить то в других SR (Voice over или Chromebox) должно читаться нормально

Ответ:

Это из-за атрибута tabindex, который делает этот элемент клавиатурой фокусируемым. Его можно сфокусировать, нажав клавишу TAB на клавиатуре.

Совет №1: Атрибут tabindex со значением выше 0 следует вообще избегать!

Не используйте tabindex="1", tabindex="2" и так далее. В некоторых случаях могут быть полезны только tabindex="0" или tabindex="-1". В противном случае вы можете создать полный беспорядок для пользовательского опыта.

Подробнее:

• Google: Использование tabindex больше 0 считается антишаблоном.
• WebAIM (доступность): Это почти всегда плохая идея.
• MDN: Избегайте использования значений tabindex больше 0.

Совет № 2. Как правило, нет необходимости создавать фокусируемые элементы, с которыми пользователь не может взаимодействовать.

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

Если вы беспокоитесь о пользователях программы чтения с экрана, не беспокойтесь, так как они прекрасно читают содержимое, не находящееся в фокусе. Цитата из Руководства по специальным возможностям: В отличие от пользователей, использующих только клавиатуру, пользователи программ чтения с экрана обычно не используют клавишу Tab для чтения страницы! Прочтите «Режимы просмотра и фокусировки программ чтения с экрана», чтобы узнать разницу между навигацией с помощью клавиш со стрелками и клавиши Tab.

Но... существует исключение из правил

Существует исключение из правила, и это, вероятно, хорошая идея в тех случаях, когда разработчики устанавливают tabindex="-1" для заголовков, фокус которых они хотят программно перемещать в целях доступности. К таким случаям относятся, например, обновление свежего контента с помощью AJAX в одностраничных приложениях. Фокус будет перемещен на заголовок, чтобы пользователь мог узнать об обновлении контента и начать с него. Также это может быть полезно, когда текущий выделенный контент собирается удалить из DOM (например, удаление текущей выделенной записи таблицы) или перемещение фокуса на заголовок сводки ошибок после пробной отправки формы и т. д.