Dans la première partie de cette série, nous avons vu comment Next.js offre aux développeurs React un excellent point de départ en matière d’accessibilité (A11Y), grâce à des fonctionnalités intégrées telles que le routage sémantique, la gestion de la section `head` et la validation syntaxique. Dans cette deuxième partie, nous irons au-delà du framework pour aborder les pratiques de développement concrètes et montrer comment des outils tels qu’axe DevTools peuvent vous aider à valider l’ergonomie de vos applications en conditions réelles.
Par « pratiques de développement inclusif », nous entendons des techniques de développement modernes qui garantissent que les applications soient conçues dès le départ pour être accessibles — c’est-à-dire que l’accessibilité soit intégrée dès la conception et dans le code, plutôt que d’être ajoutée a posteriori ou laissée à des corrections en phase de post-production.
Nous aborderons des méthodes concrètes pour mettre en œuvre l'accessibilité au niveau du code, notamment l'utilisation correcte du HTML sémantique, des textes alternatifs, des rôles ARIA et de la prise en charge du clavier. Vous trouverez ci-dessous quelques bonnes pratiques et exemples de code pour vous aider à développer des applications inclusives dès leur conception.
Créer avec du HTML sémantique
Swapping a generic <div> for a more meaningful element such as <header>, <nav>, <main>, or <section> is a simple way to improve accessibility without adding complexity. These tags help screen readers and other assistive technologies understand how your page is structured, making it easier for users to navigate.
Le balisage sémantique améliore l'accessibilité et rend également votre code plus clair et plus facile à maintenir.
<nav>
<ul>
<li>
<Link href="/">Home Page</Link>
</li>
<li>
<Link href="/about">About Us</Link>
</li>
</ul>
</nav>
En choisissant l'élément le mieux adapté à la tâche, vous contribuez à offrir une meilleure expérience à tous sans avoir à écrire de code supplémentaire.
Garantir l'accessibilité au clavier
Assurez-vous que tous les éléments interactifs de votre application fonctionnent correctement pour les utilisateurs du clavier, qu'il s'agisse de naviguer entre les liens ou d'activer des boutons. Cela implique de gérer correctement le focus, de respecter un ordre de tabulation logique et d'utiliser des gestionnaires d'événements prenant en charge à la fois les entrées par souris et par clavier.
Native HTML elements such as <button> already support keyboard interactions out of the box. But if you’re building a custom interactive component (such as a <div> acting as a button), you need to manually support keyboard events like Enter, Space, or even arrow keys for navigation.
Voici un exemple illustrant comment rendre un composant personnalisé accessible au clavier :
'use client'
import { useRef } from 'react';
export const MyComponent = () => {
const divRef = useRef(null);
const handleClick = () => {
// Your click handler code here
};
const handleKeyDown = (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
divRef.current.click();
} else if (event.key === 'ArrowLeft') {
// Handle left arrow navigation
} else if (event.key === 'ArrowRight') {
// Handle right arrow navigation
}
};
return (
<div
ref={divRef}
role="button"
tabIndex={0}
onClick={handleClick}
onKeyDown={handleKeyDown}
>
Learn More
</div>
);
};Ce modèle garantit aux utilisateurs du clavier la même expérience interactive qu'aux utilisateurs de la souris, en particulier lorsque vous créez des composants à partir de zéro.
Tirer parti des rôles et des attributs ARIA
Lorsque le HTML sémantique ne couvre pas un cas d'utilisation spécifique, vous pouvez combler ces lacunes à l'aide des rôles et attributs ARIA. Utilisez-les à bon escient : ce sont des outils puissants, mais ils ne remplacent pas le balisage sémantique. Mal mis en œuvre, ARIA peut constituer un obstacle plutôt qu'un moyen d'améliorer l'accessibilité.
<nav>
<ul role="menu">
<li role="menuitem">
<Link href="/">Home Page</Link>
</li>
<li role="menuitem">
<Link href="/about">About Us</Link>
</li>
</ul>
</nav>
En attribuant des rôles tels que « menu » et « menuitem », vous fournissez aux lecteurs d'écran le contexte dont ils ont besoin pour interpréter des structures de navigation complexes ou personnalisées. N'oubliez pas : la meilleure accessibilité commence souvent par le HTML natif. Utilisez ARIA lorsque cela est nécessaire, en complément et non en remplacement.
Ajouter un texte alternatif pour les fichiers multimédias
Vous pouvez rendre votre contenu bien plus inclusif simplement en ajoutant un texte descriptif à vos images et des légendes à vos fichiers multimédias. Chaque image doit comporter un attribut « alt » qui en explique la fonction. Si l’image est purement décorative, utilisez « alt="" » pour permettre aux technologies d’assistance de l’ignorer.
<Image
src="/wilson.jpg"
width={450}
height={450}
alt="a wilson volleyball with a red handprint with a face on it"
/>
Pour les vidéos ou les fichiers audio, vous pouvez ajouter des légendes ou des sous-titres afin d'aider les utilisateurs sourds ou malentendants :
<video controls>
<source src="/helloWorld.mp4" type="video/mp4" />
<track kind="subtitles" src="/subtitles-en.vtt" label="English" />
</video>
En suivant ces étapes simples, vous contribuez activement à rendre votre contenu plus accessible à tous, quelle que soit la manière dont chacun navigue sur le Web.
Intégrer la localisation
Si votre public est réparti sur plusieurs langues ou régions, Next.js facilite la localisation grâce à une prise en charge intégrée du routage automatique en fonction des paramètres régionaux et de la négociation de la langue.
En intégrant une bibliothèque de localisation telle que next-i18next ou react-intl, vous pouvez proposer un contenu qui respecte les préférences linguistiques de vos utilisateurs et, ce faisant, rendre votre application plus conviviale.
Concilier performance et accessibilité
Performances et accessibilité vont de pair. Grâce à des fonctionnalités telles que le rendu côté serveur (SSR), le fractionnement automatique du code et la prélecture basée sur les routes, Next.js vous permet de garantir un chargement plus rapide et une réactivité optimale de votre application.
En optimisant les performances, vous créez une application plus facile à utiliser pour les utilisateurs de technologies d'assistance et ceux qui disposent d'une connexion réseau plus lente. En concevant votre application dans un souci à la fois de rapidité et d'inclusivité, vous contribuez à offrir une meilleure expérience à tous.
Tester à l'aide d'outils d'accessibilité
L'utilisation d'outils de test automatisés vous permet de détecter très tôt de nombreux problèmes courants liés à l'accessibilité. Des bibliothèques telles que React Testing Library associées à Jest facilitent la validation des modèles d'accessibilité dans vos composants :
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('needs to be accessible', () => {
render(<MyComponent />);
expect(screen.getByRole('button')).toBeVisible();
});
Intégrer l'accessibilité à votre suite de tests signifie qu'elle fait partie intégrante de votre flux de travail quotidien, ce qui facilite la détection précoce des problèmes et vous permet de proposer en toute confiance des fonctionnalités plus inclusives.
Écrire des tests avec axe DevTools pour le JavaScript du navigateur
Si vous utilisez axe DevTools for Web, vous pouvez aller encore plus loin en détectant par programmation les violations d'accessibilité dans le cadre de vos tests JavaScript effectués dans le navigateur.
Une fois que vous avez installé et initialisé le module DevTools d'Axe pour navigateur, vous pouvez analyser n'importe quel composant affiché afin de détecter d'éventuels problèmes d'accessibilité. Voici un exemple simple :
test('Component has no accessibility violations', (done) => {
const { container } = render(<Badcomp />);
axeDevTools.run(container, (err, results) => {
expect(results.violations.length).toBe(0);
done();
});
});
Ce test utilise la méthode `run()` de @axe-devtools/browser pour analyser le DOM rendu et vérifier qu'il ne présente aucune non-conformité. Il s'agit d'un moyen rapide et fiable de garantir le respect des normes d'accessibilité dans l'ensemble de votre bibliothèque de composants ou de votre application.
Vous avez besoin d'un exemple complet ? Voici un fichier de test complet pour vous aider à démarrer :
import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import "babel-polyfill";
describe('Bad Component', () => {
beforeEach((done) => {
axeDevTools.init('wcag2', () => done());
});
test('Component has no accessibility violations, w/ attest reporter', (done) => {
const { container } = render(<Badcomp />);
axeDevTools.run(container, (err, results) => {
expect(results.violations.length).toBe(0);
done();
});
});
});
Une fois les bases mises en place, vous pouvez étendre vos tests à l'aide de règles personnalisées, intégrer des fonctionnalités de reporting ou exploiter directement l'objet « résultats » pour obtenir des informations plus détaillées.
Utilisez l'extension DevTools d'Axe
Même avec Next.js, certains problèmes d’accessibilité peuvent passer inaperçus, en particulier les plus complexes, liés au contexte, que les frameworks peuvent ne pas détecter. C’est là que l’extension axe pour DevTools peut s’avérer utile.
En l'ajoutant à votre navigateur, vous pouvez analyser vos pages, repérer visuellement les problèmes et cibler précisément ce qui doit être corrigé — le tout grâce à axe-core, le moteur auquel font confiance les leaders du secteur.
Vous pouvez détecter les problèmes d'accessibilité les plus courants dès le départ. Et lorsque vous serez prêt, vous pourrez passer à axe DevTools Pro et bénéficier de fonctionnalités basées sur l'IA, notamment les tests guidés intelligents, qui améliorent encore davantage votre couverture. Vous profiterez également de fonctionnalités telles que les tests au niveau des composants, les rapports exportables, l'intégration à Jira, et bien plus encore.
Intégrez l'accessibilité numérique à votre processus de travail dès le premier jour
En intégrant dès le départ les principes d'accessibilité dans votre conception, vous rendez votre produit accessible à tous, y compris aux personnes en situation de handicap. Vous évitez ainsi les coûts et la complexité liés à une mise en conformité a posteriori, lorsque les corrections sont plus difficiles à mettre en œuvre et moins efficaces.
Cette approche précoce et proactive s'inscrit dans le cadre d'une stratégie de développement plus large appelée « shifting left », qui consiste à intégrer les tests d'accessibilité numérique plus tôt dans votre processus de travail, parallèlement à vos autres contrôles qualité. Dans notre prochain article, nous examinerons en détail ce que signifie le « shifting left » pour l'accessibilité numérique et comment cette approche peut transformer votre processus de développement.
C’est pourquoi Next.js offre aux développeurs React une base aussi solide sur laquelle s’appuyer. Il les encourage à intégrer l’accessibilité à leurs pratiques. Qu’il s’agisse de valider le code HTML sémantique, de signaler les changements de route ou de gérer correctement les métadonnées, le framework vous fournit des lignes directrices pour développer de manière plus inclusive dès le départ.
Pourtant, ce ne sont pas les frameworks qui créent les applications, mais les développeurs. En tant que développeur, vous avez la capacité et la possibilité de façonner l’expérience de vos utilisateurs finaux. Next.js offre une base solide, et des outils tels que l’extension axe DevTools vous permettent de construire sur cette base, en vous assurant de respecter les principes d’accessibilité, tout en vous appuyant sur des décennies de bonnes pratiques éprouvées.
Chez Deque, notre mission est de contribuer à créer un monde numérique accessible à tous. Si vous êtes arrivé jusqu’ici, vous faites déjà partie de cette mission. Alors continuez à créer, à tester et à aller de l’avant pour rendre le Web plus inclusif pour tous.
