Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.01.2021, 08:24
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Навигация для слепых
Начал верстать сайт для людей с ограниченными возможностями.
Как сделать что бы навигация сайта (виде модального окна) открывалась и закрывались по нажатию клаши пробел.
С сразу был фокус на элементах навигации.
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2021, 09:21
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

Сообщение от Сергей Ракипов
виде модального окна
Окно дейсвительно модальное?
Модальное окно должно полностью перехватывать все действия пользователя. И единственный способ сделать что то вне окна (даже скроллинг страницы) - это закрыть окно. Это тоже должно выполнятся по кнопке.
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2021, 10:02
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от voraa Посмотреть сообщение
Окно дейсвительно модальное?
Пока задумка такая, сделать навигацию в модальном окне.
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2021, 12:08
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 13:31
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
Навигация для слайдера opalsmoke Общие вопросы Javascript 7 04.12.2014 12:15
drag-and-drop и position:fixed dotwatt Элементы интерфейса 5 05.12.2012 08:44
IDE для Java Script constant Библиотеки/Тулкиты/Фреймворки 0 27.09.2012 09:31