Скрыть все элементы от программ чтения с экрана, кроме одного div?

Правильная реализация доступных модальных диалоговых окон должна быть одним из самых сложных аспектов веб-доступности, так как есть только так много вещей, на которые следует обратить внимание, помимо обычных проблем, связанных с совместимостью программ чтения с экрана и браузеров и соблюдением спец. Вот краткое изложение (!), Отчасти основанное на личном опыте: эта статья из журнала Smashing Magazine о доступных модальных диалогах, Рекомендации по созданию WAI-ARIA 1.0 и это слайд-шоу по той же теме < / а>.

• Скажите программам чтения с экрана, что это диалог: добавьте role = "dialog" в родительский DIV и установите aria-labelledby так, чтобы он указывал на идентификатор заголовка.

  Это заставляет программу чтения с экрана в первую очередь распознавать часть пользовательского интерфейса как диалог; когда пользователь переходит в него, либо путем навигации, либо из-за того, что фокус перемещается в него, программа чтения с экрана сообщит, что пользователь теперь находится в диалоговом окне, и, вероятно, также объявит заголовок. (В некоторых комбинациях программы чтения с экрана / браузера - особенно VoiceOver + Safari, это также может повлиять на работу навигации программы чтения с экрана.) Однако это само по себе не «скрывает» какой-либо другой пользовательский интерфейс на странице.

• Добавить базовую поддержку клавиатуры

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

• Сделайте его модальным для пользователей программ чтения с экрана и пользователей клавиатуры

  Диалоги бывают двух видов: модальные, которые не позволяют пользователю взаимодействовать с любым другим пользовательским интерфейсом, пока они присутствуют, и немодальные, которые позволяют пользователю покинуть диалоговое окно и вернуться позже - примерами могут быть диалоговые окна «Найти текст» в некотором тексте. редакторы. role = "dialog" не делает различий между этими двумя случаями, а также использование ARIA не влияет на поведение браузера, поэтому, если ваш диалог является модальным, вы должны сами выполнить дополнительную работу, чтобы заставить его вести себя как модальный. У этого есть два аспекта:

  • Подобно тому, как в модальных диалогах используется серая сетка или эффект размытия, чтобы визуально скрыть неактивный фон от зрячих пользователей, мы также хотим скрыть этот контент от пользователей программ чтения с экрана: в противном случае они все равно смогут переходить из диалогового окна в фоновый режим или использовать другие горячие клавиши для перечисления ссылок или заголовков или других элементов управления со страницы и будут видеть оба элемента из фоновой части страницы и диалогового окна. В прошлом размещение aria-hidden = "true" на всех других DIV верхнего уровня было лучшим инструментом для этого (и немного неудобным - не забудьте удалить его, когда закончите!), Но с 2020 года aria-modal = "true", похоже, прилично поддерживается и реализовать намного проще.

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

• Прочие твики / исправления / хаки

  Программы чтения с экрана на базе Windows, такие как NVDA и JAWS, переходят в «режим приложения», когда входят в диалоговое окно: их горячие клавиши веб-навигации больше не работают, и они обрабатывают содержимое диалогового окна как форму, а не как полнофункциональную веб-страницу. Это нормально, если содержимое диалогового окна представляет собой классическую форму с полями, метками и кнопками, но не подходит, если диалоговое окно содержит веб-содержимое с текстом, гиперссылками и т.п. В этом случае вы можете поместить <div role="document">...</div> в свой role = "dialog", но обернуть основное содержимое.

• Убедитесь, что содержимое диалогового окна доступно

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

• Самое главное: сначала понять, почему вы делаете диалог доступным, и протестируйте его соответствующим образом.

  К сожалению, на данный момент (январь 2015 года!) Поведение разных программ чтения с экрана все еще сильно различается (также в зависимости от используемого браузера); это почти так же, как браузеры с CSS около десяти (!) лет назад. Стоит понять, почему вы хотите сделать свой пользовательский интерфейс доступным, выяснить, где будет находиться большинство ваших пользователей, и провести соответствующее тестирование с учетом программ чтения с экрана, которые они будут использовать. Из последнего (январь 2014 г.) опроса WebAim Screenreader, читатели Windows, в частности JAWS и NVDA - имеют большую часть рынка, а VoiceOver занимает третье место.

  Вот одна из возможных стратегий:

  • Если вы просто хотите провести базовую «должную осмотрительность», то тестирование с помощью VoiceOver может подойти. Работа с другими программами для чтения с экрана может быть не такой хорошей, но если что-то работает с VO, это, скорее всего, не будет полностью нарушено на других.

  • Следующий уровень - получить копию (бесплатно, но вы можете сделать пожертвование) NVDA для чтения с экрана на основе Windows. и запустите его в виртуальной машине на Mac (при условии, что вы здесь используете Mac). NVDA и JAWS, как правило, довольно близки по поведению.

  • Если доступность является частью вашей должностной инструкции, вероятно, вам или вашей компании потребуется копия JAWS (более 800 долларов!), Поскольку это программа для чтения с экрана, которую предпочитают правительственные и образовательные учреждения. (Это, пожалуй, аналог тестирования доступности более ранних версий IE!)

Вам следует перебрать все элементы верхнего уровня и установить для них aria-hidden = true. Это пример:

<!doctype html>
<html>
    <head>
        <title>aria-hidden examples</title>
    </head>
    <body>
        <a aria-hidden="true" href="#">Link at top</a>
        <p aria-hidden="true">Lots of text content</p>
        <form aria-hidden="true">
            <label for="input">Label</label>
            <input id="input" type="text" />
            <button>Submit</button>
        </form>
        <div>
            <label for="dialogInput">Nother Label</label>
            <input id="dialogInput" type="text"/>
        </div>
        <form aria-hidden="true">
            <label for="input2">Label 2</label>
            <input id="input2" type="text" />
            <button>Submit 2</button>
        </form>
        <a aria-hidden="true" href="#">Link at bottom</a>
    </body>
</html>

Проблема в том, что это приведет к тому, что объявления останутся в «диалоге», но если вы нажмете клавишу табуляции, фокус может переместиться за пределы диалога и не будет объявлен. Это означает, что если есть интерактивные элементы за пределами диалога, пользователь может в конечном итоге взаимодействовать с неправильными элементами. Другие браузеры будут делать то же самое.

Таким образом, вам нужно будет захватить фокус внутри диалогового окна с помощью обработчика событий Javascript для обработки ваших клавиш TAB, если ваша страница включает другие естественно фокусируемые элементы, как в приведенном выше примере.

WAI-ARIA предоставляет диалог и alerttdialog ролей для определения диалогов. Роль диалога используется, когда ожидается, что пользователь предоставит данные, а роль alerttdialog используется для объявления пользователю содержимого диалогового окна.

Диалоговое окно с предупреждением

<div role="alertdialog"
     aria-labelledby="dlgtitle"
     aria-describedby="instructions">
  <h1 id="dlgtitle">Shutdown instructions</h1>
  <ol id="instructions">
    <li>Open timesheet</li>
    <li>Enter time for today</li>
    <li>Close all open applications</li>
    <li>Shut down system</li>
  </ol>
  <div>
    <input type="button" value="OK">
  </div>
</div>

Диалог

<div role="dialog" aria-labelledby="dlgtitle">
  <h1 id="dlgtitle">Sign up to Newsletter</h1>
  <ol id="instructions">
    <li>Enter email address</li>
    <li>Press the 'Sign up' button</li>
    <li>You're all signed up!</li>
  </ol>
  <div>
    <label for="email">Email: </label>
    <input type="text" 
           id="email"
           name="email"
           aria-describedby="instructions">
    <input type="button" value="Sign up">
  </div>
</div>

WAI-ARIA Шаблон проектирования практики разработки для модального диалогового окна