WedX - журнал о программировании и компьютерных науках

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

Я реализовал всплывающее окно, которое запускается кнопкой на моей веб-странице. Это всплывающее окно почти заполняет весь экран и не позволяет пользователям взаимодействовать с чем-либо на веб-странице, пока всплывающее окно не будет закрыто. Это хорошо работает для зрячих пользователей, но при использовании VoiceOver на Mac вы по-прежнему можете перемещаться по базовому содержимому веб-страницы, и слепой пользователь не догадывается, что появилось всплывающее окно.

Как я могу запретить VoiceOver перемещаться по всем элементам на странице, кроме одного div (и каждого элемента в этом div)?

Я знаю, что можно использовать aria-hidden="true", чтобы скрыть это от программ чтения с экрана, и я знаю, что можно принудительно сфокусироваться на элементе, но я не уверен, как лучше всего этого добиться. Нужно ли мне перебирать весь DOM и по существу все скрывать, а затем при закрытии все отображать? Или есть лучший подход, какое-то свойство ARIA, которое определяет этот тип элемента, который представлен?

Веб-сайт, демонстрирующий желаемое поведение, называется Piazza. Когда вы активируете кнопку «Вход», появляется всплывающее модальное диалоговое окно, требующее фокуса, и вы не можете уйти от него, пока не закроете всплывающее окно.


  • aria-hidden указывает, что элемент и все его потомки не видны, поэтому вам не нужно зацикливать всю DOM 23.12.2014
  • пожалуйста, добавьте свою модальную реализацию 23.12.2014

Ответы:


1

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

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

05.01.2015
  • Это много полезной информации. Жаль, что это не просто работает. Спасибо за ссылки! 05.01.2015
  • Да, диалоги - это полный беспорядок, ИМО. В HTML5 планировалось наличие тега dialog, который мог бы делать большую часть этого автоматически - , но увы, кажется, что сейчас его отбросили. Кстати, некоторые фреймворки (например, JQueryUI?) Могут делать большую часть вышеперечисленного за вас автоматически; может быть лучшим подходом, чем сворачивание собственной поддержки. 05.01.2015

  • 2

    Вам следует перебрать все элементы верхнего уровня и установить для них 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, если ваша страница включает другие естественно фокусируемые элементы, как в приведенном выше примере.

    23.12.2014

    3

    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 Шаблон проектирования практики разработки для модального диалогового окна

    23.12.2014
  • Однако они не скрывают другие элементы; для этого вам нужно использовать aria-hidden. 25.12.2014
  • Необходимость OP заключается в том, что VoiceOver не может перемещаться по всем элементам на странице, кроме модального, WAI-ARIA 1.0 Authoring Practices предлагает диалоговое окно и диалоговое окно с предупреждениями для выполнения этой задачи. 25.12.2014
  • Я думаю, вы неправильно читаете документы; role = dialog дает читателю понять, что эта часть пользовательского интерфейса является автономным диалогом, но не обязательно модальным; и, как результат, не мешает пользователю перемещаться наружу, используя табуляцию клавиатуры или. (Это также мой опыт использования ARIA в модальных диалогах, тестирования против VoiceOver, JAWS и NVDA, поэтому мой комментарий здесь основан как на спецификации, так и на опыте RL). Если вы хотите запретить программе чтения с экрана доступ к контенту, используйте aria-hidden; для модального диалога impl вам нужно использовать оба метода. 25.12.2014
  • FWIW, методы разработки ARIA часто бывают полезными, но, как правило, неполными или не принимают во внимание поведение в реальном мире; думайте о них, возможно, скорее как о стремлении, чем о описании. Эта статья о доступных модальных диалогах от Smashing Magazing содержит более подробную информацию о проблемах, связанных с этим, включая использование как role, так и aria-hidden. 25.12.2014
  • @BrendanMcK, пожалуйста, добавьте свой ответ 25.12.2014
  • @BrendanMcK После установки role="dialog" И ручного изменения фокуса на элемент внутри диалогового окна VoiceOver действительно не позволяет вам фокусировать что-либо за пределами диалогового окна. Если вы не фокусируетесь вручную, вы все равно можете взаимодействовать с чем угодно на странице. 30.12.2014
  • @Joey; на самом деле здесь происходит то, что VoiceOver + Safari (но не VoiceOver + Chrome - и AFAIK, а не какая-либо из других основных комбинаций программы чтения с экрана / браузера) обрабатывает содержимое в диалоговом окне role = dialog как отдельный раздел; Ctrl + Option + Arrow остановится в конце, как вы заметили, но пользователь может перейти к родительскому контейнеру - веб-странице - с помощью Shift + Ctrl + Option + Up (или + Down, чтобы вернуться обратно); это стандартная VO-навигация для навигации по составным элементам, сделайте это снова на веб-странице, а затем вы сможете перемещаться по пользовательскому интерфейсу браузера. 05.01.2015
  • @BrendanMcK Теперь я вижу такое поведение. Вы действительно можете подняться по иерархии, чтобы выйти из диалога. Это могло бы быть нормально, по крайней мере, в этом случае, хотя, возможно, не идеально. Хм 05.01.2015
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

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

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]