Développer une application Nextjs accessible

Publié le 14 juin 2024
Baptiste Drillien avatar
Baptiste Drillien
Développeur front-end

L'accessibilité permet de garantir que tous les utilisateurs, y compris ceux ayant des handicaps, peuvent utiliser et naviguer sur une application web.

Dans une application Next.js, il existe de nombreux outils et bonnes pratiques pour améliorer l'accessibilité et garantir l’inclusivité.

Dans cet article, nous allons explorer les éléments essentiels, mais également méconnus, pour rendre votre application Next.js plus accessible.

Pourquoi rendre son app Nextjs accessible ?

L’accessibilité d’une application web, en l’occurence Next.js, est très importante, en particulier pour 3 raisons principales :

  • Équité et inclusivité : L'accessibilité web favorise l'inclusivité en garantissant que les personnes handicapées peuvent profiter des sites internets peu importe leurs capacités. Elle réduit les obstacles et offre à chacun l'accès aux informations, services et opportunités sur le web.
  • Obligations légales et éthiques : L'accessibilité web est exigée par les lois et réglementations dans de nombreux pays (notamment la France). Se conformer à ces lois démontre également une responsabilité éthique en offrant un accès équitable à tous.
  • Amélioration de l'UX : Les améliorations en matière d'accessibilité bénéficient à tous les utilisateurs, pas seulement aux personnes handicapées. Les bonnes pratiquent en matière d’accessibilité améliorent l’UX globale d’une application web.

1. Standards HTML5 et les rôles ARIA

Cela peut paraitre évident mais l’une des premières étapes pour améliorer l’accessibilité passe par la bonne utilisation des balises HTML5. Pareil pour les rôles et attributs ARIA (Accessible Rich Internet Applications).

Standards HTML5

Les balises HTML5 comme <header>, <nav>, <main>, <footer>, <aside> et <section> définissent clairement la structure application React / Next.js pour les technologies d'assistance.

page.html
1<header>
2 <h1>En-tête</h1>
3</header>
4
5<nav>
6 <!-- navigation principale ici -->
7</nav>
8
9<!-- Contenu principal de la page -->
10<main>
11 <!-- Un article -->
12 <article>
13 <h2>En-tête de l'article</h2>
14
15 <!-- contenu de l'article ici, par exemple un p -->
16 </article>
17
18 <aside>
19 <h2>Connexe</h2>
20
21 <!-- contenu de l'encadré ici -->
22 </aside>
23</main>
24
25<!-- Footer principal utilisé sur toutes les pages -->
26
27<footer>
28 <!-- contenu du footer ici -->
29</footer>

Rôles et attributs ARIA

Supporté par tous les navigateurs modernes, ARIA (Accessible Rich Internet Applications) permet d’améliorer l’accessibilité des projets Next.js, React et autres frameworks javascript.

“ ARIA est un ensemble de rôles et d'attributs qui définissent comment rendre le contenu et les applications web accessibles (notamment ceux développés avec JavaScript) pour les personnes avec des handicaps. ”
MDN

Les rôles permettent de préciser le comportement d’un élément dénué de rôle par défaut :

1<div role="article">
2 <h2>Titre du segment</h2>
3 <p>Paragraphe du segment.</p>
4 <p>Un autre paragraphe.</p>
5 ...
6</div>

Les attributs ARIA permettent de modifier les états et les propriétés d'un élément dans le DOM. Par exemple, aria-label permet d’ajouter un label sur un élément interactif. aria-hidden permet de masquer un élément pour les lecteurs d’écran :

button.tsx
1<button aria-label="Close" onClick={() => close()}>
2 <svg
3 aria-hidden="true"
4 focusable="false"
5 width="16"
6 height="16"
7 xmlns="http://www.w3.org/2000/svg">
8 <path
9 d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
10 fill="#000" />
11 </svg>
12</button>

Il est possible d’aller encore plus loin avec des éléments en sr-only, littéralement screen reader only.

1<a href="#">
2 <svg><!-- ... --></svg>
3 <span class="sr-only">Paramètres</span>
4</a>

Ici, un assistant vocal peut facilement donner du sens au lien bien qu’il ne soit composé que d’un svg. Visuellement, le span n'affiche pas de contenu textuel, mais il est lu par les lecteurs d’écran. Ce className est disponible par défaut avec TailwindCSS mais également de nombreux frameworks CSS.

hexa web logo
Hexa web
Des conseils pour un projet web ?
Nous contacter

2. Les choix liés au design

Bien qu’en tant que développeurs, nous avons une responsabilité vis-à-vis de l’accessibilité, il est important d’y réfléchir également en amont, notamment au niveau du design.

Le choix des polices

Le choix de la police est souvent négligé, mais il a un impact significatif sur l'accessibilité. Des polices lisibles avec des tailles de caractères adéquates et de nombreux variants facilitent la lecture. Les polices plus fantaisistes peuvent la complexifier.

Quelques polices recommandées :

  • Sans-serif : Arial, Helvetica, Verdana.
  • Serif : Georgia, Times New Roman.
  • Polices adaptées : OpenDyslexic, Atkinson Hyperlegible.

Il est important d’avoir une taille minimale pour faciliter la lecture (au moins 16px). L’utilisateur doit également pouvoir utiliser l’application Next.js en grossissant le texte jusqu’à 200%.

Le choix des couleurs

Il est également important d’utiliser des contrastes de couleurs suffisants pour garantir la lisibilité du texte.

C’est pourquoi la couleur primaire doit être méticuleusement choisie, notamment pour assurer une bonne lisibilité des boutons, par exemple.

La couleur primaire ne doit pas forcément être la couleur principale de la charte graphique. Elle peut en être une déclinaison ou la couleur complémentaire (celle opposée sur le cercle chromatique).

Par exemple, Leroy Merlin a décidé d’avoir un bouton plus foncé pour augmenter le contraste avec le texte blanc :

landing page Leroy Merlin

Il existe de nombreux outils pour vérifier le contraste entre 2 couleurs, comme WebAIM ou directement via des plugins Figma.

3. Des outils pour faciliter le développement

Pour garantir un développement accessible, de nombreux outils existent pour faciliter sa mise en place.

Librairies de composants accessibles

La plupart des librairies de composants destinées à React ou Next.js ont une approche qui tend vers l’accessibilité. Par exemple, les éléments interactifs comme un Dialog ou un Drawer doivent pouvoir être atteints et manipulés via le clavier.

Par exemple, plusieurs fonctionnalités misent en avant pour le Dialog de RadixUI sont orientées vers l'accessibilité :

liste des fonctionnalités d'un dialog radix-ui

Plugin ESLint

Grâce à des plugins comme eslint-plugin-jsx-a11y compatible avec Next.js, fini les oublis comme l’ajout de alt sur des images, l’utilisation de htmlFor et id entre label et input, etc.

Toutes les options de configuration sont disponibles sur leur documentation.

hexa web logo
Hexa web
Des conseils pour un projet web ?
Nous contacter

Tester avec Lighthouse

Certains outils comme Lighthouse (développé par Google), permettent de tester l’accessibilité d’une application web.

En plus de pouvoir générer des rapports en local via la console du navigateur et en ligne grâce à l’extension, Lighthouse peut également être directement intégré à la CI de votre projet. Nous avons écrit un article à ce sujet.

Checklist a11y

header de la checklist a11y project

“The a11y project” propose une checklist exhaustive pour s’assurer du respect des règles principales de l’accessibilité d’une application web.

Conclusion

Rendre une application Next.js / React accessible nécessite une attention particulière aux détails et un engagement actif envers les meilleures pratiques.

En suivant ces recommandations et conseils, un plus grand nombre de personnes pourra utiliser votre application web.

Globalement, ces améliorations offrent une meilleure expérience utilisateur pour tous, en plus de favoriser un meilleur référencement naturel.

Échangeons sur votre projet web

Présentez-nous votre projet web, nous vous recontacterons dans les prochaines 24h.