Есть ли способ сделать доступный модальный?

Я работаю над проектом с Twitter Bootstrap и играю с компонентами JavaScript, используя программа для чтения с экрана.

Когда я запускаю модальный диалог, Jaws пропускает модальный переход к следующей ссылке на странице.

Есть ли способ реализовать доступный модальный режим?

Другое решение, которое я думаю, состоит в том, чтобы сделать статическую страницу функциональной из модальной и перенаправить на эту страницу, когда пользователь использует программу чтения с экрана. Могу ли я как-то определить, использует ли пользователь программу чтения с экрана?


javascript twitter-bootstrap modal-dialog accessibility jaws-screen-reader
person Community    schedule 04.04.2012    source источник

Ответы (2)


arrow_upward
7
arrow_downward

РЕДАКТИРОВАТЬ 2019: Н. Хоффманн написал и поддерживает доступный модальный компонент как в vanilla JS (вместе с другими компонентами в своем проекте van11y) и jQuery.
Поведение и стили легко модифицируются с помощью data-* атрибутов и классов.
Это было протестировано в гораздо большем количестве условий (программы чтения с экрана и т. д.), чем то, что вы бы сделали со своим скриптом ;-)

Кроме того, Bootstrap 4 имеет довольно доступное модальное окно, а Bootstrap 3 в последних версиях (большая часть или весь плагин доступности Paypal Bootstrap был перенесен в версию 3.3.x).

Современные ресурсы: европейская инициатива Доступ и использование подробно описывает интересных аспектов простым способом и указывает на другие ресурсы, включая последнюю версию ARIA Design Pattern.

Вот доступный модальный диалог: http://hanshillen.github.com/jqtest/#goto_dialog

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

http://irama.org/web/dhtml/lightbox/ подробно описывает такую ​​доступную реализацию (между лайтбоксом и модальным диалоговым окном небольшая разница, главное — это модальная часть и управление клавиатурой).
Вы также можете прочитать в Неофициальной копии Руководства по стилю DHTML модальная часть диалога и W3C/WAI-ARIA Создание модального диалога.

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

person FelipeAls    schedule 05.04.2012
comment
Большое спасибо! Очень полезный ответ. - person ; 05.04.2012

arrow_upward
0
arrow_downward

я не знаю никакого решения для автоматического обнаружения, если пользователь использует программу чтения с экрана. но есть решение Google, чтобы скрыть ссылку в начале страницы (с левой стороны: -1000em и позицией: абсолютная), которую можно активировать, если вы используете клавиатуру и отображаете «специальный режим».

<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a>

для вашего модального диалога попробуйте использовать атрибут aria и aria-atomic="true" aria-live="assertive" в html div диалога. он должен объявить содержимое вашего диалогового окна.

person halna frédéric    schedule 05.04.2012