Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Навигация для слепых (https://javascript.ru/forum/dom-window/81694-navigaciya-dlya-slepykh.html)

Сергей Ракипов 14.01.2021 08:24

Навигация для слепых
 
Начал верстать сайт для людей с ограниченными возможностями.
Как сделать что бы навигация сайта (виде модального окна) открывалась и закрывались по нажатию клаши пробел.
С сразу был фокус на элементах навигации.

voraa 14.01.2021 09:21

Если вы делаете навигацию для слепых, то должны следовать всем правилам интерфейса работы с клавиатуры. Всякие переходы между фокусируемыми элементами по tab shift-tab, выполнение действий по enter и space...
Любое действие должно выполняться по нажатию кнопки. Кнопка (<button>, <input type=button>) автоматически реагирует на нажатие пробела или энтера.
Если используется другой элемент, то на него придется навесить все необходимые обработчики событий клавиатуры.
Кроме этого (если используется программа чтения с экрана) необходимо правильно устанавливать атрибуты aria- и role.
Тут
https://www.w3.org/TR/wai-aria-practices/
Есть различные примеры как рекомендуется делать интерфейс для людей с ограниченными возможностями (меню, вкладки, диалоги...)

Цитата:

Сообщение от Сергей Ракипов
виде модального окна

Окно дейсвительно модальное?
Модальное окно должно полностью перехватывать все действия пользователя. И единственный способ сделать что то вне окна (даже скроллинг страницы) - это закрыть окно. Это тоже должно выполнятся по кнопке.

Сергей Ракипов 14.01.2021 10:02

Цитата:

Сообщение от voraa (Сообщение 532703)
Окно дейсвительно модальное?

Пока задумка такая, сделать навигацию в модальном окне.

voraa 14.01.2021 12:08

Модальное окно должно размещаться не в body, а на специальной подложке (div) размером с экран прозрачной или полупрозрачной. Эта подложка должна перехватывать и задерживать все события клавиатуры и мыши. которые не обрабатывает модальное окно (event.stopPropagation())
При открытии модального окна фокус должен устанавливаться на какой то элемент в нем. В самом модальном окне должен быть список всех фокусируемых элементов и обработчик событий на нажатие клавиш tab и shift-tab, что бы с первого фокусируемого элемента передавать фокус на последний по shift-tab (а не вне окна), а с последнего на первый по tab.
Пример с обработчиками и необходимыми aria-
https://www.w3.org/TR/wai-aria-pract...al/dialog.html

Сергей Ракипов 15.01.2021 05:53

voraa,
Спасибо так чуть яснее куда двигаться.


Часовой пояс GMT +3, время: 03:28.