Guide RGAA · Thème 8
Les 10 critères du thème « Éléments obligatoires » du RGAA 4.1, expliqués et accompagnés de pistes de correction et d'exemples de code.
Ce que ça vérifie — Chaque page doit déclarer un type de document (doctype) afin que les navigateurs et les technologies d'assistance interprètent le code de façon standard et prévisible.
Comment corriger — Ajoutez la déclaration de doctype en toute première ligne du document, avant la balise <html>, sans rien la précéder.
<!DOCTYPE html>
<html lang="fr">
<head>…</head>
</html>Ce que ça vérifie — Le code source généré doit être valide au regard du type de document déclaré : balises correctement ouvertes/fermées et imbriquées, attributs valides, identifiants uniques. Un code valide garantit une restitution fiable par les technologies d'assistance.
Comment corriger — Corrigez les erreurs signalées par un validateur (W3C) : balises non fermées, imbrications incorrectes, attributs invalides, valeurs d'id dupliquées. Validez le code réellement généré (après exécution des scripts), pas seulement le gabarit source.
<!-- À éviter --> <p>Texte <strong>gras</p></strong>
<!-- Recommandé -->
<p>Texte <strong>gras</strong></p>Ce que ça vérifie — La langue principale de la page doit être indiquée dans le code afin que les technologies d'assistance, notamment les synthèses vocales, restituent le contenu avec la bonne prononciation.
Comment corriger — Renseignez l'attribut lang sur l'élément <html> avec le code de la langue principale du contenu.
<html lang="fr">Ce que ça vérifie — Le code de langue déclaré sur la page doit être valide et correspondre effectivement à la langue principale du contenu. Une langue erronée entraîne une prononciation incorrecte par les lecteurs d'écran.
Comment corriger — Utilisez un code de langue valide conforme à la norme (par exemple fr, en, es) et assurez-vous qu'il reflète bien la langue majoritaire de la page.
<!-- Contenu en français --> <html lang="fr">Ce que ça vérifie — Chaque page doit avoir un titre de page, défini par l'élément <title>. C'est souvent la première information annoncée par les lecteurs d'écran et il identifie l'onglet du navigateur.
Comment corriger — Ajoutez un élément <title> non vide dans le <head> de chaque page.
<head>
<title>Contact — Neodyr</title>
</head>Ce que ça vérifie — Le titre de page doit être pertinent : il doit décrire clairement le sujet ou la fonction de la page et permettre de la distinguer des autres pages du site.
Comment corriger — Rédigez un titre unique et explicite pour chaque page, en plaçant l'information spécifique en premier, éventuellement suivie du nom du site. Évitez les titres génériques comme « Accueil » ou « Page sans titre ».
<!-- À éviter --> <title>Bienvenue</title>
<!-- Recommandé -->
<title>Nos formations à l'accessibilité — Neodyr</title>Ce que ça vérifie — Tout passage rédigé dans une langue différente de la langue principale de la page doit être signalé dans le code, afin que la synthèse vocale l'énonce avec la bonne prononciation.
Comment corriger — Entourez le passage concerné d'un élément (par exemple <span>) portant un attribut lang indiquant sa langue. Ce marquage n'est pas requis pour les noms propres, les termes techniques ou les mots étrangers passés dans l'usage courant.
<p>Il a présenté son <span lang="en">design system</span> à l'équipe.</p>Ce que ça vérifie — Le code de langue utilisé pour signaler un changement de langue doit être à la fois valide et pertinent, c'est-à-dire correspondre réellement à la langue du passage marqué.
Comment corriger — Employez un code de langue valide et vérifiez qu'il désigne bien la langue effective du passage. Corrigez tout code inexistant ou ne correspondant pas au texte.
<blockquote lang="es">La accesibilidad es un derecho.</blockquote>Ce que ça vérifie — Les balises HTML ne doivent pas être détournées de leur rôle sémantique à des fins purement visuelles. Une structure sémantique erronée trompe les technologies d'assistance sur la nature du contenu.
Comment corriger — Réservez chaque balise à son usage sémantique : n'utilisez pas <table> pour la mise en page, ni les titres <h1>–<h6> pour grossir du texte, ni <blockquote> pour créer un simple retrait. Obtenez le rendu visuel voulu avec CSS.
<!-- À éviter --> <h2>Texte simplement mis en avant</h2>
<!-- Recommandé -->
<p class="exergue">Texte simplement mis en avant</p>Ce que ça vérifie — Les changements de sens de lecture (passage à une écriture de droite à gauche comme l'arabe ou l'hébreu, ou inversement) doivent être signalés dans le code pour que le texte s'affiche et soit restitué dans le bon ordre.
Comment corriger — Indiquez le sens d'écriture avec l'attribut dir (rtl pour droite à gauche, ltr pour gauche à droite) sur l'élément contenant le passage concerné, en le combinant si besoin avec l'attribut lang.
<p lang="ar" dir="rtl">مرحبا بكم في موقعنا</p>