Доступность
Команда Next.js стремится сделать фреймворк доступным для всех разработчиков (и их конечных пользователей). Добавляя функции доступности в Next.js по умолчанию, мы хотим сделать веб более инклюзивным для всех.
Озвучивание переходов между страницами
При переходах между страницами, отрендеренными на сервере (например, с использованием тега <a href>), скринридеры и другие вспомогательные технологии озвучивают заголовок страницы при её загрузке, чтобы пользователи понимали, что страница изменилась.
Помимо традиционной навигации между страницами, Next.js также поддерживает клиентские переходы для повышения производительности (с использованием next/link). Чтобы клиентские переходы также озвучивались вспомогательными технологиями, Next.js по умолчанию включает механизм озвучивания маршрутов.
Механизм озвучивания маршрутов в Next.js ищет название страницы для озвучивания, сначала проверяя document.title, затем элемент <h1>, и наконец путь URL. Для наиболее доступного пользовательского опыта убедитесь, что каждая страница вашего приложения имеет уникальное и описательное название.
Линтинг
Next.js предоставляет интегрированный опыт работы с ESLint из коробки, включая специальные правила для Next.js. По умолчанию Next.js включает eslint-plugin-jsx-a11y для раннего выявления проблем с доступностью, в том числе предупреждений о:
- aria-props
- aria-proptypes
- aria-unsupported-elements
- role-has-required-aria-props
- role-supports-aria-props
Например, этот плагин помогает убедиться, что вы добавляете альтернативный текст к тегам img, используете правильные атрибуты aria-*, корректные атрибуты role и многое другое.
Ресурсы по доступности
- Чеклист WCAG от WebAIM
- Руководство WCAG 2.2
- Проект A11y
- Проверяйте соотношение контрастности цветов между передним планом и фоном
- Используйте
prefers-reduced-motionпри работе с анимациями