Si vous avez suivi la leçon Qu’est-ce que l’accessibilité et pourquoi est-elle importante ?, vous savez que l’accessibilité numérique est un concept vaste : son objectif principal est de garantir qu’un maximum de personnes puisse utiliser le Web.
Il y a bien sûr des aspects juridiques et commerciaux, mais le plus important est que le respect des directives d’accessibilité améliore considérablement l’expérience de navigation pour tout le monde.
La manière la plus simple de créer un thème, une extension ou un site accessible consiste à y penser dès le départ. Intégrez cette réflexion dès la phase de planification et sensibilisez vos collègues (ainsi que vos clients) à ce sujet. Vous pourrez ainsi non seulement détecter les erreurs dès le début, mais aussi en éviter beaucoup en amont.
Dans cette leçon, vous découvrirez les bases du HTML accessible et apprendrez comment les appliquer à votre thème WordPress.
Principes fondamentaux
Le HTML est aussi accessible que puissant.
Essayez par vous-même : ouvrez votre éditeur de code et créez une page HTML valide, correctement balisée avec des repères, des titres, du texte, des boutons, des liens, des formulaires, etc.
Vous pouvez utiliser le code ci-dessous si vous le souhaitez.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site web</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site web</h1>
<nav>
<ul>
<li><a href="#home">Accueil</a>
<li><a href="#about">À propos</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<h2>Accueil</h2>
<p>Voici la section d’accueil, où vous trouverez du contenu de présentation.</p>
<form name="Just a button">
<button type="button">Cliquez sur moi !</button>
</form>
</article>
<article id="about">
<h2>À propos</h2>
<p>Cette section contient des informations sur le site web ou sur la personne/l’entreprise qui se trouve derrière celui-ci.</p>
<p><a href="https://example.com">Voir leur profil complet</a></p>
</article>
<article id="services">
<h2>Services</h2>
<p>Vous trouverez ici le détail des services proposés.</p>
</article>
<article id="contact">
<h2>Contact</h2>
<form action="#" method="post" name="contact" autocomplete="on">
<fieldset>
<legend>Parlons-en</legend>
<div><label for="name">Nom :</label></div>
<div><input type="text" id="name"></div>
<div><label for="email">E-mail :</label></div>
<div><input type="email" id="email"></div>
<div><label for="message">Message :</label></div>
<div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
<div><input type="submit" value="Envoyer"></div>
</fieldset>
</form>
</article>
</main>
<footer>
<p>© 2024 Mon site web</p>
</footer>
</body>
</html>
Testez maintenant le code à l’aide d’un outil en ligne tel que Web Accessibility Checker et vérifiez qu’il ne signale aucun problème d’accessibilité.
Les problèmes commencent généralement lorsque vous ajoutez des styles, des scripts ou des ressources multimédias. En tant que développeur ou développeuse de thèmes WordPress modernes, vous travaillerez principalement avec ces technologies : blocs basés sur React, compositions créées en PHP et CSS généré à partir de theme.json.
L’essentiel est de rester attentif à l’accessibilité lors du codage et de la conception.
Examinons quelques techniques et bonnes pratiques que les développeurs et les designers peuvent suivre lorsqu’ils créent des blocs personnalisés, des modèles et des compositions.
HTML sémantique
Utilisez les éléments HTML sémantiques, ou porteurs de sens, plutôt que d’envelopper tout dans des éléments <div>.
Cela vous évitera de créer du code inutilement complexe ou de vous lancer dans des solutions qui reviennent à « réinventer la roue ».
Repères
Les repères sont un moyen de définir la structure d’une page. Ils aident les lecteurs d’écran à parcourir le contenu plus facilement.
Par exemple, au lieu d’utiliser simplement quelques éléments <div> et leurs classes :
<div class="header">
<h1>Bienvenue sur mon site web</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>Vous pouvez utiliser des repères pour les sections correspondantes.
<header>
<h1>Bienvenue sur mon site web</h1>
</header>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Si vous concevez ou créez un thème via l’éditeur de site, vous pouvez également y définir des repères.
Pour définir les blocs Group, Row et Stack comme éléments de sectionnement du contenu, sélectionnez le bloc, ouvrez Settings et développez la section Advanced .
Faites défiler la page vers le bas et, selon la fonction et la position du bloc, sélectionnez header, main, section, article, aside ou footer comme HTML ELEMENT.
Titres
Lorsque vous ajoutez des titres à un modèle, utilisez-les toujours dans le bon ordre, en commençant par H2 et en progressant jusqu’à H6.
Dans l’éditeur de site, cliquez sur Document Overview > Outline pour vérifier qu’aucun niveau ne manque et que tout est correct.
Bouton ou lien
Lorsque vous concevez des actions utilisateur, tenez compte des éléments suivants concernant l’utilisation des boutons et des liens :
- Si vous voulez que les utilisateurs effectuent une action, utilisez l’élément button.
- Si vous voulez qu’ils accèdent à une autre page, utilisez l’élément anchor (<a>).
- Si un lien doit ressembler à un bouton, par exemple pour un appel à l’action sur une page d’atterrissage, appliquez-lui un style avec CSS.
Formulaires
Lorsque vous concevez un formulaire dans votre thème, suivez les recommandations ci-dessous :
Placez toujours le formulaire dans un élément form.
Définissez toujours un type et des attributs correspondants appropriés pour les champs de saisie. Par exemple, si vous définissez le type de saisie sur tel, un clavier numérique s’affichera sur les appareils mobiles.
<input type="tel" name="phone" id="phone" required>Ne vous fiez pas uniquement au texte indicatif pour expliquer l’usage du champ de saisie : utilisez toujours des libellés accessibles.
Utilisez l’élément search pour tout formulaire de recherche.
Lors de la conception d’un formulaire de connexion, vous pouvez utiliser l’attribut autocomplete afin d’aider le gestionnaire de mots de passe à remplir le formulaire.
<input type="password" autocomplete="current-password">Par défaut, la plupart des navigateurs affichent un anneau de focus sur l’élément ciblé.
Si vous souhaitez modifier l’affichage de cet anneau de focus, utilisez la pseudo-classe :focus-visible et ne supprimez jamais complètement l’anneau de focus.
Couleurs
Créez une palette de couleurs accessible avec un contraste suffisant.
Lors de la modification d’un modèle, WordPress vous avertit si vous utilisez des couleurs de texte et d’arrière-plan qui n’offrent pas un contraste suffisant.
Ne transmettez pas d’informations par la couleur uniquement. Par exemple, n’identifiez pas les liens uniquement par leur couleur : définissez également les états de focus de la même manière. En cas de doute, consultez les styles HTML par défaut des liens et du focus, puis suivez-les.
Typographie
Lorsque vous définissez la taille des polices, utilisez des unités relatives telles que rem et évitez d’utiliser px.
Limitez la largeur du contenu à 50 à 70 caractères : l’unité character ou ch est parfaite pour cela.
Utilisez un interligne suffisant en fonction de la taille de la police.
Privilégiez les préférences de l’utilisateur
Les media queries constituent la base du design réactif et contribuent à améliorer l’expérience utilisateur.
Certaines media queries, telles que prefers-color-scheme ou prefers-reduced-motion, sont directement liées à l’accessibilité, tandis que des requêtes comme pointer, hover ou scripting permettent d’adapter le comportement des composants selon l’appareil.
Solution de contournement ARIA
ARIA est l’abréviation de Accessible Rich Internet Applications framework et est souvent présenté comme un moyen rapide de rendre le contenu HTML plus accessible aux lecteurs d’écran.
Cependant, la règle la plus importante concernant ARIA est de ne l’utiliser que lorsque cela est réellement nécessaire. Dans l’idéal, il faut toujours utiliser les fonctionnalités natives du HTML pour transmettre le sens du contenu aux lecteurs d’écran.
Les attributs ARIA mal utilisés réduisent l’accessibilité. Évitez-les donc lorsque vous contrôlez le HTML ou lorsque vous n’avez pas besoin de gérer du contenu dynamique.
Pour plus d’informations, consultez les bases de WAI-ARIA de MDN.
Résumé et ressources complémentaires
L’accessibilité est un processus continu. Même une petite amélioration peut faire une grande différence pour les visiteurs de votre site et n’a aucun effet négatif. Elle ne dégradera jamais l’expérience utilisateur.
Pour en savoir plus, consultez les tutoriels de la Web Accessibility Initiative (WAI) du W3C.