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é par défaut dans Next.js, nous visons à rendre le Web plus inclusif pour tous.

Annonces de route

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 de son chargement, permettant ainsi aux utilisateurs de comprendre 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 ces 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 recherche 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 optimale en termes d'accessibilité, assurez-vous que chaque page de votre application possède un titre unique et descriptif.

Vérification de code (Linting)

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 précocement les problèmes d'accessibilité, notamment en signalant :

• 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-*, employez les bons attributs role, et plus encore.

Ressources sur l'accessibilité

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