Dans chaque page web, les changements du sens de lecture sont-ils signalés ?
Un lecteur d’écran qui rencontre un extrait en arabe sur une page française sans attribut dir peut annoncer les caractères dans le mauvais ordre, rendant le texte incompréhensible. L’algorithme bidi du navigateur peut aussi mal placer la ponctuation ou inverser des séquences de mots. Pas d’attribut dir, pas de sens.
Ce critère s’applique chaque fois qu’une page contient un passage dans une langue dont le sens de lecture est opposé au sens par défaut du document. Pour une page française (gauche-droite), cela concerne l’arabe, l’hébreu, le persan, l’ourdou. Chaque passage concerné doit être encapsulé dans une balise HTML portant un attribut dir.
La valeur attendue est rtl (right-to-left) pour les textes droite-gauche insérés dans une page ltr, ou ltr pour un texte gauche-droite dans un document rtl. La valeur doit être pertinente : un dir="rtl" appliqué à un texte en alphabet latin échoue au test 8.10.2.
Ne confondez pas l’attribut HTML dir avec la propriété CSS direction. Cette dernière affecte l’affichage visuel mais est ignorée par les technologies d’assistance. Seul l’attribut dir dans le balisage est reconnu par les lecteurs d’écran.
2 tests pour vérifier la cohérence du sens de lecture
Attribut dir sur les passages à sens de lecture inversé
- Repérez dans la page tous les passages de texte rédigés dans une langue dont le sens de lecture est opposé à celui du document (ex. : arabe ou hébreu dans une page française).
- Pour chaque passage identifié, vérifiez que la balise HTML qui le contient possède un attribut
dir. - Si tous les passages ont un attribut
dirsur leur élément conteneur, le test est validé. Si un seul passage en est dépourvu, le test échoue.
Validité et pertinence de la valeur de l'attribut dir
- Pour chaque passage validé au test 8.10.1, vérifiez que la valeur de
direst correcte :rtlpour un texte qui se lit de droite à gauche,ltrpour un texte qui se lit de gauche à droite. - Vérifiez que cette valeur est pertinente par rapport à la langue du passage :
dir="rtl"sur un texte arabe est pertinent ;dir="rtl"sur du texte français ne l’est pas. - Si les deux conditions sont remplies pour chaque passage, le test est validé.
Exemples
❌ Non conforme : Texte arabe sans indication de sens de lecture
<p>Ce mot signifie « bonjour » en arabe : <span>مرحبا</span>.</p>L’absence d’attribut dir laisse le navigateur gérer le bidi via l’algorithme Unicode, avec des résultats imprévisibles. La ponctuation peut se retrouver du mauvais côté et certains lecteurs d’écran parcourent les caractères dans l’ordre visuel latin, rendant le mot arabe inintelligible.
✅ Conforme : Texte arabe avec attribut dir et lang
<p>Ce mot signifie « bonjour » en arabe : <span dir="rtl" lang="ar">مرحبا</span>.</p>L’attribut dir="rtl" indique explicitement que ce passage se lit de droite à gauche. La technologie d’assistance sait dans quel ordre parcourir les caractères. L’attribut lang="ar" n’est pas requis par ce critère mais fortement recommandé : il permet au lecteur d’écran de basculer sur la voix arabe et de prononcer correctement le texte.
Astuces et pièges
⚠️ CSS direction: rtl ne remplace pas l’attribut dir
C’est l’erreur la plus fréquente en audit sur ce critère. La propriété CSS direction: rtl modifie l’affichage visuel mais NVDA, JAWS et VoiceOver l’ignorent totalement. Seul l’attribut HTML dir est interprété par les technologies d’assistance. Un site qui pilote le bidi uniquement par CSS échoue au test 8.10.1.
💡 Associez toujours dir et lang sur le même élément
L’attribut dir signale le sens de lecture ; lang signale la langue. Les deux sont techniquement indépendants, mais les combiner sur la même balise donne le meilleur résultat : le lecteur d’écran bascule sur la voix appropriée et lit dans le bon sens. Exemple : <span dir="rtl" lang="ar">...</span>.
⚠️ Passages bidi imbriqués : URLs et chiffres dans un texte arabe
Un texte en arabe peut contenir une URL ou un numéro de téléphone qui se lit de gauche à droite. Ce sous-passage doit lui-même être encapsulé dans une balise avec dir="ltr". Le critère s’applique de façon récursive. C’est rare sur des pages françaises, mais courant sur des interfaces multilingues avec mélange fréquent de contenu latin et sémitique.
⚠️ Critère non applicable si aucun texte RTL n’est présent
Si votre page ne contient aucun passage dans une langue à écriture droite-gauche, ce critère est non applicable (NA). Il n’est pas nécessaire d’ajouter dir="ltr" sur tous les éléments d’une page française : c’est le sens par défaut. La balise <html lang="fr"> sans attribut dir implique déjà ltr.
Questions fréquentes
Pourquoi vérifier le critère RGAA 8.10 même sans texte arabe ou hébreu ?
Non. Ce critère est non applicable dès lors que la page ne contient aucun passage dans une langue à sens de lecture inversé. Une page entièrement en français, anglais ou toute autre langue ltr est hors périmètre du critère 8.10.
Sur quelles balises HTML l'attribut dir est-il valide selon le RGAA ?
dir est un attribut global HTML, utilisable sur quasiment tout élément : <span>, <p>, <div>, <blockquote>, <td>, etc. Préférez la balise la plus proche du texte concerné pour éviter que l’attribut ne s’applique à un périmètre trop large et ne perturbe la mise en page des éléments adjacents.
Comment tester le critère RGAA 8.10 sans utiliser de lecteur d'écran ?
Inspectez le code source : repérez visuellement les caractères arabes, hébreux ou persans, puis vérifiez dans les DevTools que leur balise contenante (ou un ancêtre direct) porte dir="rtl". Avec NVDA ou VoiceOver, lisez le passage à voix haute : si la prononciation est correcte et dans le bon ordre, le sens de lecture est bien signalé.
Quelle est la position du RGAA sur l'utilisation de dir="auto" ?
Le RGAA exige des valeurs explicites : ltr ou rtl. La valeur auto laisse le navigateur détecter automatiquement le sens, ce qui peut fonctionner visuellement mais reste peu fiable pour les technologies d’assistance selon les combinaisons navigateur et lecteur d’écran. Utilisez rtl ou ltr explicitement pour garantir la conformité au test 8.10.2.