Как заставить программу чтения с экрана не распознавать элемент как группу элементов?

Question

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

В настоящее время пример элемента будет выглядеть следующим образом:

<div tabindex="0" class="comic-panel">
  <span role="img" aria-label="There is a cat sitting in the window."></span>
  <div style="background-image: url(/assets/img/window.png);" class="comic-panel__layer"></div>
  <div style="background-image: url(/assets/img/cat.png);" class="comic-panel__layer"></div>
  <p class="speech-bubble">Meow!</p>
</div>

Тестирование с помощью OSX VoiceOver после вставки в этот элемент изображенияописание и текст читаются нормально, но впоследствии также делается следующее объявление:

Возможно ли обновить разметку этого элементатаким образом, что это group объявление не сделано программами чтения с экрана?Практически во всех случаях пользователю будет нечего дальше исследовать или использовать внутри элемента, поэтому это сообщение будет избыточным, и я бы хотел, чтобы VoiceOver не распознал элемент как группу, которая вызывает это сообщение.

Answer 1

(Перемещение всех моих комментариев из раздела комментариев в раздел ответов, поскольку обсуждение в комментариях решило проблему.)

Я думаю, что может быть некоторое недопонимание того, как работает программа чтения с экрана (SR) и как пользователь SR перемещается по веб-странице.

У вас есть tabindex="0" на вашем

, но

не имеет роли и не является интерактивным элементом. tabindex spec имеет предупреждение, которое гласит:

«авторы должны делать элементы фокусируемыми, только если они действуют как интерактивные элементы управления».

Таким образом, если пользователь не может реально взаимодействовать с

, он не должен иметь tabindex="0".

Если пользователь может взаимодействовать с

, тогда

также потребуется role (см. Предыдущий URL-адрес role), чтобы SR правильно объявлял элемент и пользователь поймет, как взаимодействовать с этим элементом.

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

Один из наиболее распространенных способов навигации - использование клавиш со стрелками вверх и вниз для обхода DOM. (На самом деле вы идете не по DOM как таковому, а по Accessibility Tree , которое в основном является подмножеством DOM. Например, скрытые элементы (CSS display:none) находятся в DOM но не в дереве доступности.)

В любом случае, клавиши со стрелками вверх / вниз позволяют пользователю SR получить доступ к каждому фрагменту текста на дисплее. Все ваши заголовки, абзацы, списки и т. Д.

Существуют также однобуквенные сочетания клавиш, которые позволяют пользователю SR перемещаться к определенным типам элементов. Например,

• H приведет меня к следующему заголовку
• T приведет меня к следующему столу
• L перенесет меня в следующий список
• B перенесет меня к следующей кнопке

Но эти ключи будут работать, только если вы используете семантический html, такой как

, , , и т. Д. или , если вы используете соответствующий атрибуты ARIA . Например, если есть причина, по которой вы не можете использовать для создания реального заголовка, вы все равно можете сообщить SR, что у вас есть заголовок, с помощью ARIA. <span role="heading" aria-level="2">This is a custom h2 heading</span> JAWS и NVDA являются распространенными SR на ПК. У них будут похожие сочетания клавиш, которые можно увидеть здесь: сочетания клавиш JAWS Сочетания клавиш NVDA Сочетания клавиш VoiceOver (для Mac, а не для iOS). Обратите внимание, что это не одиночные сочетания клавиш, как простые H , но они требуют клавиши «VO» ( Ctrl + Option по умолчанию) в сочетании с Cmd и H . У Apple есть хорошее руководство по VoiceOver . Для ПК у Freedom Scientific (создателя JAWS) есть хорошее руководство по по JAWS . Если у вас есть вопросы о доступности, публикация в stackoverflow - это, безусловно, один из способов, особенно если вы пометите свой вопрос с помощью accessibility и других связанных с доступностью тегов (таких как wai-aria или screen-readers, как вы это делали в этот вопрос). Еще одним ресурсом является сообщество WebAIM . Любой может присоединиться, и вы можете «прятаться» и просто читать обсуждения по мере их поступления или участвовать полностью.