Доступность
Giuliomax Menu Builder создан с расчётом на поддержку WCAG 2.2 уровня AA. Навигация полностью работает без мыши, выпадающие меню озвучиваются программами чтения с экрана, а анимации можно отключить на уровне системы.
О соответствии. Эти функции созданы с расчётом на поддержку WCAG 2.2 уровня AA, однако итоговое соответствие вашего работающего сайта зависит также от контента, темы оформления и любых цветов, заданных вами вручную. Проверяйте свой сайт с помощью перечисленных ниже инструментов.
Поддержка WCAG 2.2 AA
Плагин спроектирован вокруг следующих критериев успеха WCAG 2.2, относящихся к навигационным компонентам:
| Критерий | Уровень | Как выполняется |
|---|---|---|
| 1.4.3 Контрастность (минимальная) | AA | Встроенные темы спроектированы с расчётом на коэффициент контрастности 4.5:1; собственные переопределения цветов нужно перепроверять. |
| 2.1.1 Клавиатура | A | Все функции доступны только с клавиатуры. |
| 2.1.2 Отсутствие клавиатурной ловушки | A | Фокус всегда можно вывести из меню без использования указывающего устройства. |
| 2.4.3 Порядок фокуса | A | Порядок фокуса соответствует визуальному порядку чтения меню. |
| 2.4.7 Видимость фокуса | AA | На каждом интерактивном элементе отображается видимый индикатор фокуса. |
| 2.4.11 Внешний вид фокуса | AA | Индикаторы фокуса соответствуют требованиям к минимальному размеру и контрастности (новый критерий в WCAG 2.2). |
| 4.1.2 Имя, роль, значение | A | У всех интерактивных элементов есть доступное имя и корректная роль ARIA. |
Навигация с клавиатуры
| Клавиша | Действие |
|---|---|
| Tab | Переместить фокус на следующий пункт меню или интерактивный элемент. |
| Shift + Tab | Переместить фокус на предыдущий элемент. |
| Enter / Space | Активировать ссылку или открыть / закрыть выпадающее меню. |
| ↓ / ↑ | Перемещать фокус по элементам внутри открытого выпадающего меню или панели мегаменю. |
| → / ← | Перемещаться между элементами верхнего уровня. |
| Escape | Закрыть текущее выпадающее меню или панель мегаменю и вернуть фокус на родительский элемент. |
| Home / End | Перейти к первому / последнему элементу в списке выпадающего меню. |
Атрибуты ARIA
Плагин автоматически добавляет в формируемую разметку следующие атрибуты ARIA:
role="navigation"иaria-labelдля элемента<nav>(метка совпадает с названием меню в WordPress).aria-haspopup="true"иaria-expandedдля элементов верхнего уровня, у которых есть выпадающее меню или мегаменю.aria-controls, связывающий кнопку-триггер с её панелью.role="menu"иrole="menuitem"внутри выпадающих меню.aria-current="page"для элемента, соответствующего текущей странице.
Ничего из этого настраивать не нужно — атрибуты применяются автоматически на основе структуры меню.
Управление фокусом
- При открытии выпадающего меню фокус перемещается на первый элемент внутри него.
- При закрытии выпадающего меню (по Escape или при переводе фокуса в сторону) фокус возвращается на элемент, открывший его.
- Оверлей мобильного меню удерживает фокус внутри себя, пока открыт (фокус нельзя вывести за пределы панели клавишей Tab). При закрытии оверлея фокус возвращается на кнопку-гамбургер.
Уменьшение анимации
Все переходы и анимации учитывают CSS-медиазапрос prefers-reduced-motion: reduce. Когда пользователь включил режим «Уменьшить движение» в настройках доступности своей операционной системы:
- Анимации появления/затухания выпадающих меню заменяются мгновенным показом/скрытием.
- Переходы открытия/закрытия мобильного меню становятся мгновенными.
- Анимация появления панели объявлений отключается.
- Анимации появления пунктов меню отключаются.
Проверка вашего меню
После настройки меню используйте следующие инструменты, чтобы проверить доступность:
- Только клавиатура — отключите мышь и пройдитесь по всему меню, используя только Tab, клавиши со стрелками, Enter и Escape.
- axe DevTools — бесплатное расширение браузера, которое запускает автоматические проверки WCAG на живой странице.
- NVDA / VoiceOver — программы чтения с экрана для проверки того, что состояния выпадающих меню и метки озвучиваются корректно.
- Color Contrast Analyzer — убедитесь, что ваши собственные настройки цветов по-прежнему соответствуют минимальному коэффициенту 4.5:1.