Доступность
Команда 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при работе с анимациями