Considérations d'accessibilité dans le développement web
L'accessibilité web est essentielle pour créer des expériences inclusives. Elle bénéficie aux utilisateurs en situation de handicap et améliore l'expérience globale.
Garantir l'accessibilité web est essentiel pour créer des expériences numériques inclusives. L'accessibilité ne profite pas seulement aux utilisateurs en situation de handicap : elle améliore également l'expérience utilisateur globale et élargit votre audience. Ce guide aborde l'importance de l'accessibilité, les techniques pour rendre la manipulation du DOM accessible, le rôle d'ARIA (Accessible Rich Internet Applications), et la manière de rendre les widgets JavaScript dynamiques utilisables par tous.
Lorsque vous ajoutez de l'interactivité avec JavaScript — en basculant du contenu, en sélectionnant et mettant à jour des éléments, ou en modifiant le document — vous assumez la responsabilité de l'accessibilité que le navigateur fournirait autrement gratuitement avec du HTML simple. Ce chapitre montre où se situe cette responsabilité et comment y répondre.
Créer du contenu accessible
Importance de l'accessibilité dans le développement web
L'accessibilité dans le développement web garantit que tous les utilisateurs, y compris ceux en situation de handicap, peuvent accéder au contenu web et interagir avec lui efficacement. L'Organisation mondiale de la Santé estime que plus d'un milliard de personnes vivent avec une forme de handicap. En rendant votre contenu web accessible, vous touchez un public plus large, améliorez l'utilisabilité et respectez les normes légales telles que l'Americans with Disabilities Act (ADA) et les Web Content Accessibility Guidelines (WCAG).
Avantages de l'accessibilité
- Inclusivité : Permet aux utilisateurs souffrant de divers handicaps d'accéder aux informations et aux services.
- Amélioration du référencement : Les moteurs de recherche récompensent souvent les sites accessibles par de meilleurs classements.
- Conformité légale : Aide à éviter les problèmes juridiques potentiels liés aux normes d'accessibilité.
- Utilisabilité améliorée : Améliore l'expérience utilisateur globale pour tous les visiteurs, y compris ceux sans handicap.
Techniques pour rendre la manipulation du DOM accessible
Navigation au clavier
De nombreuses personnes ne peuvent pas utiliser une souris — elles naviguent avec le clavier, un dispositif de commutation ou un lecteur d'écran qui pilote le clavier. Si un contrôle ne répond qu'aux clics, ces utilisateurs sont bloqués. La règle d'or : tout ce qu'un utilisateur de souris peut faire, un utilisateur de clavier doit pouvoir le faire aussi.
Assurez-vous que tous les éléments interactifs sont accessibles via le clavier. Reposez-vous sur l'ordre naturel du DOM pour la navigation par tabulation afin de maintenir un flux logique. L'attribut tabindex contrôle cela :
tabindex="0"place un élément dans l'ordre de tabulation naturel (utile lorsque vous rendez un élément non natif interactif).tabindex="-1"le retire de l'ordre de tabulation mais vous permet de le cibler par programmation avecelement.focus().- Les valeurs positives comme
tabindex="3"remplacent l'ordre naturel et provoquent presque toujours de la confusion — évitez-les.
Les éléments natifs tels que <button>, <a href> et les contrôles de formulaire sont accessibles au clavier par défaut, ce qui constitue l'une des raisons les plus solides de les préférer aux <div> cliquables. Assurez-vous toujours qu'un indicateur de focus visible (le contour) est stylisé de sorte que les utilisateurs du clavier puissent clairement voir quel élément est en focus — ne définissez jamais outline: none sans fournir de remplacement.
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Navigation Example</title>
</head>
<body>
<h4>Press the 'Tab' key to navigate through the buttons!</h4>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</body>
</html>Cet exemple s'appuie sur l'ordre naturel du DOM pour les boutons, facilitant ainsi la navigation pour les utilisateurs du clavier.
Composants interactifs accessibles
Cet exemple montre comment créer un accordéon accessible à l'aide de rôles et propriétés ARIA, et comment gérer efficacement le focus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessible Accordion Example</title>
<style>
.accordion {
border: 1px solid #ccc;
border-radius: 5px;
margin: 20px 0;
}
.accordion-header {
padding: 10px;
cursor: pointer;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
width: 100%;
text-align: left;
}
.accordion-content {
display: none;
padding: 10px;
}
</style>
</head>
<body>
<h1>Accessible Accordion Example</h1>
<h4>Use your keyboard (Enter or Space key) to toggle the accordion!</h4>
<div class="accordion">
<button class="accordion-header" id="accordion-header-1" aria-controls="accordion-content-1" aria-expanded="false">
Section 1
</button>
<div class="accordion-content" id="accordion-content-1" role="region" aria-labelledby="accordion-header-1" tabindex="-1">
<p>This is the content of section 1.</p>
</div>
</div>
<div class="accordion">
<button class="accordion-header" id="accordion-header-2" aria-controls="accordion-content-2" aria-expanded="false">
Section 2
</button>
<div class="accordion-content" id="accordion-content-2" role="region" aria-labelledby="accordion-header-2" tabindex="-1">
<p>This is the content of section 2.</p>
</div>
</div>
<div class="accordion">
<button class="accordion-header" id="accordion-header-3" aria-controls="accordion-content-3" aria-expanded="false">
Section 3
</button>
<div class="accordion-content" id="accordion-content-3" role="region" aria-labelledby="accordion-header-3" tabindex="-1">
<p>This is the content of section 3.</p>
</div>
</div>
<script>
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', function () {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
const content = document.getElementById(this.getAttribute('aria-controls'));
content.style.display = !expanded ? 'block' : 'none';
});
header.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.click();
}
});
});
</script>
</body>
</html>- Structure de l'accordéon : L'accordéon est composé d'en-têtes qui, lorsqu'on clique dessus, développent ou réduisent leur contenu associé.
- HTML sémantique et ARIA :
- Des éléments
<button>natifs sont utilisés pour les en-têtes afin de garantir la prise en charge intégrée du clavier et des lecteurs d'écran. aria-controlsassocie les en-têtes à leur contenu.aria-expandedindique l'état de la section de l'accordéon.role="region"sur les sections de contenu les identifie comme des régions importantes.
- Des éléments
- Accessibilité au clavier :
- Les écouteurs d'événements gèrent les événements
clicketkeydownpour permettre de basculer l'accordéon via le clavier (Entrée ou Espace).
- Les écouteurs d'événements gèrent les événements
Pourquoi c'est important :
- Utilisabilité améliorée : L'accordéon est utilisable via la souris et le clavier.
- Accessibilité renforcée : Les attributs ARIA communiquent l'état et la structure aux technologies d'assistance, le rendant accessible aux utilisateurs de lecteurs d'écran.
- Gestion du focus : Le focus reste sur le bouton déclencheur, suivant les modèles standards d'accordéon et évitant les sauts de navigation inattendus pour les utilisateurs du clavier.
Pour une couverture plus approfondie de la gestion des événements clavier et clic, consultez La gestion des événements dans le DOM.
HTML sémantique
Utilisez des éléments HTML sémantiques pour transmettre le sens et la structure du contenu. Cela aide les technologies d'assistance à interpréter et à naviguer efficacement dans le contenu web.
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>Content for section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Content for section 2.</p>
</section>
</main>
<footer>
<p>Footer content</p>
</footer>
</body>
</html>Cet exemple utilise des éléments HTML sémantiques tels que <header>, <nav>, <main>, <section> et <footer> pour définir la structure de la page.
Alternatives textuelles
Les lecteurs d'écran ne peuvent pas interpréter les images, les icônes ou les dessins canvas — ils lisent l'alternative textuelle que vous fournissez. Chaque image significative a besoin d'un attribut alt qui décrit son contenu ou sa fonction. Les images décoratives qui n'apportent aucune information doivent avoir un alt="" vide afin que le lecteur d'écran les ignore plutôt que d'annoncer un nom de fichier.
<!-- Meaningful image: describe it -->
<img src="chart.png" alt="Sales rose 40% from January to March" />
<!-- Decorative image: hide it from screen readers -->
<img src="divider.png" alt="" />
<!-- Icon-only button: label it -->
<button aria-label="Close dialog">×</button>Lorsque vous générez des images ou des boutons d'icônes dynamiquement avec JavaScript, définissez l'alt ou l'aria-label en même temps que vous créez l'élément — ne diffusez jamais un contrôle sans étiquette.
Gestion du focus dans le contenu dynamique
Lorsque JavaScript ouvre une boîte de dialogue, révèle un nouveau contenu ou guide l'utilisateur dans un flux en plusieurs étapes, vous devez déplacer le focus délibérément. Sinon, un utilisateur de clavier ou de lecteur d'écran se retrouve à l'ancienne position sans savoir que quelque chose a changé. L'exemple ci-dessous ouvre une fenêtre modale, y déplace le focus, piège le focus pour que la touche Tab ne puisse pas s'échapper, et restaure le focus sur le bouton déclencheur à la fermeture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accessible Modal Example</title>
<style>
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); }
.overlay.open { display: flex; align-items: center; justify-content: center; }
.dialog { background: #fff; padding: 20px; border-radius: 6px; min-width: 260px; }
</style>
</head>
<body>
<button id="open-btn">Open dialog</button>
<div class="overlay" id="overlay">
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Confirm action</h2>
<p>Are you sure you want to continue?</p>
<button id="confirm-btn">Confirm</button>
<button id="close-btn">Cancel</button>
</div>
</div>
<script>
const overlay = document.getElementById('overlay');
const openBtn = document.getElementById('open-btn');
const closeBtn = document.getElementById('close-btn');
let lastFocused = null;
function openDialog() {
lastFocused = document.activeElement; // remember the trigger
overlay.classList.add('open');
document.getElementById('confirm-btn').focus(); // move focus in
}
function closeDialog() {
overlay.classList.remove('open');
if (lastFocused) lastFocused.focus(); // restore focus
}
openBtn.addEventListener('click', openDialog);
closeBtn.addEventListener('click', closeDialog);
// Trap focus inside the dialog and close on Escape
overlay.addEventListener('keydown', function (event) {
if (event.key === 'Escape') { closeDialog(); return; }
if (event.key !== 'Tab') return;
const focusable = overlay.querySelectorAll('button');
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
});
</script>
</body>
</html>Points clés : role="dialog" et aria-modal="true" indiquent aux technologies d'assistance qu'il s'agit d'une modale, aria-labelledby lui donne un nom accessible, le focus se déplace à l'intérieur à l'ouverture et revient au déclencheur à la fermeture, et Tab/Maj+Tab restent dans la boîte de dialogue au lieu de s'en échapper. Pour plus d'informations sur le focus par programmation, consultez Focus : focus / blur.
ARIA (Accessible Rich Internet Applications)
En savoir plus sur ARIA
Comme vous l'avez appris jusqu'ici, ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs pouvant être ajoutés aux éléments HTML pour améliorer l'accessibilité pour les utilisateurs de technologies d'assistance telles que les lecteurs d'écran. Les attributs ARIA aident à définir les rôles, les propriétés et les états des éléments, rendant les applications web plus accessibles.
La règle la plus importante d'ARIA est : si un élément HTML natif avec le comportement dont vous avez besoin existe déjà, utilisez-le plutôt que de le recréer avec ARIA. Un <button> est toujours préférable à <div role="button">, car le bouton natif vous offre l'activation au clavier, le focus et la sémantique du lecteur d'écran sans aucun JavaScript. ARIA n'ajoute aucun comportement — il ne fait que changer la façon dont un lecteur d'écran décrit un élément. Utilisez ARIA lorsqu'aucun élément natif ne convient (onglets personnalisés, curseurs, arborescences, régions dynamiques).
Utiliser les attributs ARIA pour améliorer l'accessibilité
Rôles ARIA
Les rôles ARIA définissent le type d'élément, aidant les technologies d'assistance à comprendre son objectif.
<div role="button" aria-pressed="false">Toggle</div>Cet élément non interactif utilise l'état aria-pressed pour indiquer son état de bascule.
Propriétés et états ARIA
Les propriétés et états ARIA fournissent des informations supplémentaires sur les éléments.
<!DOCTYPE html>
<html>
<head>
<title>ARIA Example</title>
</head>
<body>
<div role="alert" id="live-region">
<!-- Dynamic content goes here -->
</div>
<script>
document.getElementById('live-region').textContent = "This is an important message.";
</script>
</body>
</html>Cet exemple utilise les propriétés ARIA pour créer une région dynamique qui annonce les messages importants de manière dynamique. Une région dynamique est un élément dont les changements sont lus à voix haute automatiquement par le lecteur d'écran, sans que l'utilisateur n'ait à y déplacer le focus — idéal pour les mises à jour de statut, les erreurs de formulaire ou les messages de chat.
Vous contrôlez l'urgence avec laquelle le changement est annoncé :
role="alert"(ouaria-live="assertive") interrompt l'utilisateur immédiatement — réservez-le aux erreurs et aux messages urgents.aria-live="polite"attend que l'utilisateur soit inactif avant d'annoncer — utilisez-le pour les statuts non urgents comme « Article ajouté au panier ».
<div aria-live="polite" id="status"></div>
<script>
// Updating the text content triggers the announcement
document.getElementById('status').textContent = 'Settings saved.';
</script>L'élément de région dynamique doit déjà exister dans le DOM avant que vous ne le mettiez à jour ; si vous injectez l'élément et son texte en même temps, de nombreux lecteurs d'écran manqueront le changement.
Bonnes pratiques
- Utiliser le HTML sémantique : Préférez toujours les éléments HTML sémantiques pour fournir une signification et une structure claires au contenu.
- Implémenter l'accessibilité au clavier : Assurez-vous que tous les éléments interactifs sont accessibles et utilisables via le clavier.
- Gérer le focus efficacement : Contrôlez le focus par programmation pour guider les utilisateurs à travers les changements de contenu dynamiques.
- Utiliser ARIA judicieusement : Appliquez les rôles, propriétés et états ARIA pour améliorer, et non remplacer, la sémantique des éléments HTML natifs.
- Tester avec des technologies d'assistance : Testez régulièrement vos applications web avec des lecteurs d'écran et d'autres technologies d'assistance pour garantir l'accessibilité.
- Utiliser des outils de test automatisés : Exécutez des vérifications avec des outils comme axe ou Lighthouse pour détecter les problèmes d'accessibilité courants tôt.
Assurez-vous toujours que vos modales et autres éléments dynamiques sont accessibles en gérant le focus efficacement. Utilisez JavaScript pour piéger le focus dans les modales, en passant d'un élément focusable à l'autre avec la touche Tab pour éviter que les utilisateurs du clavier ne naviguent accidentellement en dehors de la boîte de dialogue. Cela améliore l'accessibilité et offre une meilleure expérience utilisateur.
Sujets connexes
- Sélectionner des éléments DOM — trouvez les éléments que vous devez étiqueter et cibler.
- Modifier le document — définissez les attributs ARIA et le texte
altlorsque vous créez des éléments. - La gestion des événements dans le DOM — ajoutez des gestionnaires
clicketkeydownpour la prise en charge du clavier. - Focus : focus / blur — gérez le focus par programmation pour les modales et le contenu dynamique.
Conclusion
L'accessibilité est un aspect fondamental du développement web qui garantit que votre contenu est utilisable par toutes les personnes, quelles que soient leurs capacités. En créant du contenu accessible, en utilisant des techniques pour rendre la manipulation du DOM accessible et en exploitant les attributs ARIA, vous pouvez améliorer considérablement l'inclusivité et l'utilisabilité de vos applications web. La mise en œuvre de ces pratiques aide non seulement à respecter les normes légales, mais améliore également l'expérience utilisateur globale.