Développer une application Nextjs accessible

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.

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.

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).

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.

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>

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.

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 :

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

Des conseils pour un projet web ?

Nous contacter

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 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%.

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 :

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

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

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é :

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

Des conseils pour un projet web ?

Nous contacter

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.

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

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.