Éléments obligatoires pour la conformité RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Certains éléments doivent obligatoirement figurer dans votre page web. Pour être en conformité avec le RGAA, vous devez vous assurer de la présence et de l’utilisation pertinente de ces éléments.
1. La définition du type de document
<!DOCTYPE >. Mais vous pouvez aussi trouver des formats différents sur des sites plus anciens.
Critère RGAA : 8.1
Avant l’arrivée du HTML5 (qui a tout simplifié avec <!DOCTYPE html>), les balises DOCTYPE étaient beaucoup plus longues. Voici des exemples de balises DOCTYPE :
- HTML 4.01 Strict :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML 4.01 Transitional :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - HTML 4.01 Frameset :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> - XHTML 1.0 Strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML 1.0 Transitional :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML 1.1 :
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Vous pourriez encore trouver une balise DOCTYPE de ce type sur un vieux site.
2. La validité du code source
Le code source généré de la page doit être valide pour le type de document déclaré.
Vous devez notamment vous assurer :
- De respecter les règles d’écriture pour vos balises, attributs et valeurs d’attributs ;
- De bien ouvrir et fermer chaque balise ;
- D’imbriquer de façon conforme les balises entre elles
- D’utiliser des valeurs d’attribut
iduniques - De ne pas doubler les attributs sur un même élément.
Nu Html Checker : l’outil recommandé par le RGAA
Ne réalisez pas un contrôle manuel de votre code source, vous y perdriez un temps précieux. La documentation du Référentiel général d’amélioration de l’accessibilité préconise en effet d’utiliser Nu Html Checker, un outil édité par le W3C et disponible en ligne sur https://validator.w3.org/nu/ Entrez l’URL de la page à analyser ou copiez collez votre code source, filtrez uniquement les erreurs, et analysez celles qui sont remontées. Seules les erreurs suivantes concernent le critère 8.2 :- Règles d’écriture : Attribute “X” not allowed on element “Y”, Bad value for attribute ;
- Imbrication des balises : Element “X” not allowed as child of element “Y” ;
- Ouverture et fermeture : Unclosed element, Stray end tag ;
- Unicité des ID : Duplicate ID “X”. (Point critique pour l’accessibilité) ;
- Attributs doublés : Duplicate attribute “X”.
Critère RGAA : 8.2
Ce critère RGAA traite de plusieurs problématiques importantes pour l’accessibilité de votre site web.
L’unicité des ID est cruciale : elle assure la liaison sémantique entre étiquettes et champs via les attributs for, aria-labelledby ou aria-describedby. L’ID est également le pivot de la navigation interne (ancres et liens d’évitement). Une duplication brise ces “ponts” techniques, désorientant les utilisateurs de lecteurs d’écran ou de commandes vocales.
Un code valide garantit la fiabilité technique de votre site web. Si les navigateurs modernes corrigent nativement certaines erreurs de rendu, le code source généré peut présenter des failles d’analyse syntaxique (parsing). Ces erreurs, comme une mauvaise imbrication ou des balises mal fermées, compromettent la restitution fidèle des contenus par les technologies d’assistance
Astuces et tutoriels sur l'accessibilité Web
3. La langue et le changement de langue
La déclaration de la langue est déterminante pour l’accessibilité web. En effet, les technologies d’assistance recourent à la déclaration de la langue pour adapter leur vocalisation.
Vous devez tout d’abord déclarer la langue par défaut de votre page web via l’attribut lang (ou xml:lang selon le DOCTYPE), idéalement sur la balise racine <html>.
Vous devez également informer les technologies de navigation de tout changement de langue au sein de votre contenu : par exemple, pour une citation ou un terme anglophone.
Pourquoi la déclaration de la langue est-elle si importante ?
La déclaration de la langue permet d’adapter la vocalisation à la langue. C’est notamment pour cela que vous devez préciser tout changement de langue au sein de la page, pour ne pas égarer votre utilisateur en situation de handicap.
Imaginez par exemple que la langue par défaut soit le français, et que vous ayez la citation anglophone “Be sure that he is alive” au milieu de votre contenu. En l’absence d’information, le vocalisateur va lire cette phrase avec l’accent français : “beu su-re tat euh iss a-li-ve”. Tout simplement incompréhensible !
Critères RGAA : 8.3, 8.4, 8.7; 8.8
Vous devez utiliser le code langue défini par la norme ISO 639-1 (2 lettres) ou ISO 639-2 (3 lettres) .
La déclaration du pays n’est pas requise par le RGAA. Si vous souhaitez toutefois ajouter le pays, vous devrez utiliser un code pays conforme à la norme ISO 3166-1. Vous devrez d’abord préciser la langue puis le pays, en liant les deux par un tiret.
Exemples de déclarations de langues :
- Français (norme ISO 639-1) :
lang="fr"; - Français et Belgique (normes ISO 639-1 et ISO 3166-1) :
lang="fr-BE"; - Néerlandais et Belgique (normes ISO 639-2 et ISO 3166-1) :
lang="nld-BE";
La solution dépend de la longueur du texte dans une autre langue.
Pour un extrait court, utilisez une balise <span>. Par exemple : <p>Croyez-le ou non, Jean-Paul Vandamme est <span lang="en">aware.</span></p>.
Pour un paragraphe complet, mettez directement l’attribut lang sur la balise <p>. Par exemple : <p>Web accessibility is an international issue, governed by the Web Accessibility Initiative and the W3C.</p>
4. Le titre de la page
Ce critère est certainement le plus simple à mettre en œuvre si vous êtes également un professionnel du SEO.
Vous devez simplement vérifier :
- Que votre page web possède une balise
<title>placée entre les balises<head>; - Que chaque page web possède un intitulé de balise
<title>unique.
Une balise <title> pertinente doit résumer de façon synthétique et pertinente le contenu ou les fonctionnalités de la page web.
Elle doit être unique, y compris en cas de pagination profonde (vous reprenez alors le numéro de la page dans votre balise <title>.
Je vous invite à consulter mon dossier “La balise TITLE en SEO” pour optimiser vos balises.
5. Le détournement de balises
Vous ne devez pas détourner certaines balises à des fins de présentation. Cela créerait une rupture dans la compréhension de votre contenu par les technologies d’assistance.
Exemples de détournements de balises à des fins de présentation
Les balises <Hn> ne doivent pas être utilisées simplement pour mettre un intitulé ou un court paragraphe en avant en lui permettant de s’afficher dans une police plus grande.
Les balises <blockquote> servent à introduire une citation longue. Vous ne pouvez pas les utiliser pour mettre en retrait ou afficher avec une mise en forme distincte un paragraphe rédigé par vos soins.
Si vous avez déjà détourné des balises et ne pouvez pas reprendre facilement toute votre page, vous pouvez l’attribut role="presentation" : vous conservez le design associé à la balise, mais vous supprimez sa dimension sémantique pour les lecteurs d’écran. Je vous en parle car il existe, mais l’emploi de cet attribut est formellement déconseillé, ne s’applique pas aux balises <Hn>, mais peut rester acceptable dans certains cas.
Critère RGAA : 8.9
L’attribut role="presentation" peut par exemple être utilisé lorsqu’une balise <blockquote> est détournée de son usage à de simples fins de mise en forme.
Exemple de code :
<blockquote role="presentation">
Ce texte est décalé à droite visuellement, mais n'est pas une citation.
</blockquote>
On l’utilise aussi régulièrement pour signaler qu’une image de décoration doit être ignorée par les technologies d’assistance (critère 1.2) :
<img src="decoration.png" role="presentation">
Elle est aussi utilisée pour informer les lecteurs d’écran quand un tableau est utilisé à des fins de mise en forme (critère 5.3).
6. Le sens de lecture
Par défaut, le sens de lecture est défini de gauche à droite. Cependant, pour certaines langues, celui-ci peut être défini dans le sens inverse. Vous devez alors préciser ce changement de sens de lecture afin de permettre une vocalisation correcte par les lecteurs d’écran.
Cas 1 : toute votre page se lit de droite à gauche
Ajoutez l’attribut dir="rtl" (pour Right-To-Left) directement sur la balise <html>. Cette déclaration permet au navigateur d’inverser l’alignement par défaut, de placer correctement la ponctuation et d’indiquer aux technologies d’assistance le sens de déchiffrement des caractères.
Exemple de code conforme : <html lang="ar" dir="rtl">.
Cas 2 : seul une partie se lit de droite à gauche
Si votre page est majoritairement rédigée de gauche à droite (en français par exemple) mais contient un passage, une citation ou un mot dans une langue se lisant de droite à gauche, vous devez isoler ce contenu. Le plus simple est d’ajouter un attribut dir="rtl" sur une balise <p>, <div> ou <span>. N’oubliez pas de modifier la langue pour la partie concernée !
Critère RGAA : 8.10
Les 13 thématiques du référentiel RGAA
Répondez à vos obligations légales en réalisant un audit RGAA, et offrez à tous vos prospects et clients un site web accessible.