Accessibilité

L'équipe Next.js s'engage à rendre Next.js accessible à tous les développeurs (et leurs utilisateurs finaux). En ajoutant des fonctionnalités d'accessibilité à Next.js par défaut, nous visons à rendre le Web plus inclusif pour tous.

Annonces de navigation

Lors des transitions entre les pages rendues côté serveur (par exemple en utilisant la balise <a href>), les lecteurs d'écran et autres technologies d'assistance annoncent le titre de la page lors du chargement afin que les utilisateurs comprennent que la page a changé.

En plus des navigations traditionnelles entre pages, Next.js prend également en charge les transitions côté client pour améliorer les performances (en utilisant next/link). Pour s'assurer que les transitions côté client sont également annoncées aux technologies d'assistance, Next.js inclut par défaut un annonceur de route.

L'annonceur de route de Next.js cherche le nom de la page à annoncer en inspectant d'abord document.title, puis l'élément <h1>, et enfin le chemin de l'URL. Pour une expérience utilisateur la plus accessible possible, assurez-vous que chaque page de votre application possède un titre unique et descriptif.

Vérification avec ESLint

Next.js fournit une expérience ESLint intégrée prête à l'emploi, incluant des règles personnalisées pour Next.js. Par défaut, Next.js inclut eslint-plugin-jsx-a11y pour aider à détecter tôt les problèmes d'accessibilité, notamment en alertant sur :

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

Par exemple, ce plugin permet de s'assurer que vous ajoutez un texte alternatif aux balises img, utilisez correctement les attributs aria-*, les attributs role, et plus encore.

Ressources sur l'accessibilité

• Liste de contrôle WCAG de WebAIM
• Directives WCAG 2.1
• The A11y Project
• Vérifiez les ratios de contraste des couleurs entre les éléments avant-plan et arrière-plan
• Utilisez prefers-reduced-motion lorsque vous travaillez avec des animations