Компонент navigateRegions в WordPress позволяет добавлять навигацию по клавиатуре между различными разделами страницы, обозначенными как «регионы» (role="region"). Этот компонент разработан для повышения доступности, помогая пользователям легко переходить между основными секциями контента.
navigateRegions представляет собой высокоуровневый компонент (Higher-Order Component, HOC) в React, который добавляет функциональность для управления фокусом и перемещения по регионам.
Основные сведения о NavigateRegions
Компонент navigateRegions оборачивает переданный компонент, добавляя к нему возможность перемещения по «регионам». Эти регионы должны быть фокусируемыми элементами и иметь правильно настроенные атрибуты aria, чтобы обозначить их назначение. Это не только улучшает UX, но и делает компонент более доступным, особенно для пользователей, полагающихся на клавиатуру или экранные читалки.
Важно: Роль
regionявляется ролью «ориентира» (landmark role) в спецификации WAI-ARIA. Используйте её только для важных разделов, чтобы избежать излишней сложности навигации.
Пример использования navigateRegions
Рассмотрим, как создать компонент с навигацией между различными секциями. В этом примере мы оборачиваем MyComponentWithNavigateRegions с помощью navigateRegions, чтобы пользователи могли переходить по основным разделам: заголовку, основному контенту и боковой панели.
import { navigateRegions } from '@wordpress/components';
const MyComponentWithNavigateRegions = navigateRegions(() => (
<div>
<div role="region" tabIndex="-1" aria-label="Шапка страницы">
Шапка страницы
</div>
<div role="region" tabIndex="-1" aria-label="Основной контент">
Основной контент
</div>
<div role="region" tabIndex="-1" aria-label="Боковая панель">
Боковая панель
</div>
</div>
));
Основные параметры и настройки
role="region"
- Описание: Атрибут
role="region"указывает, что данный элемент является отдельной секцией или областью на странице. Это «ориентир» для пользователей экранных читалок, позволяющий понять, что данный элемент — важный регион страницы. - Рекомендация: Используйте эту роль только для ключевых секций, чтобы не перегружать навигацию и избежать путаницы.
tabIndex
- Тип:
number - Описание: Значение
tabIndexпозволяет сделать элемент фокусируемым. УстановкаtabIndex="-1"делает его доступным для фокусировки программно, что полезно для упрощённой навигации. - Рекомендация: Установите
tabIndex="-1"для регионов, чтобы пользователи могли программно перемещаться между ними, избегая нежелательного попадания в фокус.
aria-label
- Тип:
string - Описание: Атрибут
aria-labelописывает цель и содержимое секции, чтобы пользователи, полагающиеся на вспомогательные технологии, могли понимать назначение каждого региона. - Рекомендация: Предоставьте краткое, понятное описание каждой области, например,
aria-label="Основной контент"илиaria-label="Боковая панель".
Пример с дополнительными секциями
В этом примере добавлены дополнительные регионы — «Подвал» и «Навигация». Это позволяет пользователям перемещаться между всеми основными областями страницы.
const EnhancedComponentWithNavigateRegions = navigateRegions(() => (
<div>
<div role="region" tabIndex="-1" aria-label="Заголовок страницы">
Заголовок страницы
</div>
<div role="region" tabIndex="-1" aria-label="Навигация">
Основная навигация
</div>
<div role="region" tabIndex="-1" aria-label="Контент">
Основной контент страницы
</div>
<div role="region" tabIndex="-1" aria-label="Боковая панель">
Боковая панель с дополнительными ссылками
</div>
<div role="region" tabIndex="-1" aria-label="Подвал">
Подвал страницы
</div>
</div>
));
Особые примечания и рекомендации по доступности
- Использование роли
regionтолько для ключевых областей: Рольregionследует применять только к основным секциям, таким как заголовок, основной контент и боковая панель. Избыточное использование может снизить доступность страницы. - Краткость и ясность описаний: Обеспечьте, чтобы все
aria-labelбыли краткими, но информативными. Это важно для пользователей экранных читалок, так как позволяет им сразу понять цель каждой секции. - Семантические и структурные ориентиры: Весь воспринимаемый контент должен быть структурирован в соответствии с его назначением, чтобы пользователи не упустили важную информацию.
Заключение
Компонент navigateRegions в WordPress облегчает создание доступных интерфейсов, позволяя пользователям удобно переключаться между ключевыми секциями контента с помощью клавиатуры. Благодаря параметрам role="region", tabIndex, и aria-label, navigateRegions позволяет структурировать страницу так, чтобы каждый её важный раздел был легко доступен, что особенно важно для улучшения UX и обеспечения доступности.