Présentation de l'information avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Les 14 critères de la thématique n°10 intitulée Présentation de l’information s’intéressent de près à la manière dont l’information est mise en forme, et s’assure que celle-ci reste accessible dans des situations bien précises, qui peuvent être requises par des situations de handicap :
- Utilisation de feuilles de style (CSS) pour la mise en forme ;
- Adaptabilité visuelle ;
- Lisibilité et contraste des liens hypertextes ;
- Visibilité du focus ;
- Sémantique sensorielle ;
- Redistribution du contenu selon la taille de l’écran ;
- Etc.
1. Les feuilles de style et déclarations CSS
Le référentiel général d’amélioration de l’accessibilité demande à ce que des feuilles de style soient utilisées pour contrôler la présentation de l’information.
Pour vous assurer que c’est bien le cas, vous devez tout d’abord rechercher et vérifier l’absence :
- Des balises suivantes :
<basefont>,<big>,<blink>,<center>,<font>,<marquee>,<s>,<strike>,<tt>; - Des attributs de présentation :
align,alink,background,bgcolor,border,cellpadding,cellspacing,char,charoff,clear,color,compact,frameborder,hspace,link,marginheight,marginwidth,text,valign,vlink,vspace,size(sauf si utilisé avec l’élément<select>),width(sauf si utilisé sur les éléments<img>,<object>,<embed>,<canvas>et<svg>),height(sauf si utilisé avec des éléments<img>,<object>,<embed>,<canvas>et<svg>).
Vous devez ensuite désactiver les feuilles de style et vous assurer que :
- Le contenu visible et porteur d’information est toujours présent à l’écran.
- L’information reste compréhensible.
Vous devez également contrôler que chaque déclaration de couleur de texte s’accompagne d’une déclaration de couleur de fond, et vice-versa :
- Vous analysez si une propriété
colorest accompagnée d’unbackground-colorou d’un background ; - Vous analysez si une propriété
background-colorou unbackgroundest accompagnée d’uncolor; - Vous vérifiez qu’en cas de
background-image, unbackground-colorou unbackgroundoffre une alternative.
Note : la couleur de fond peut être héritée d’un parent.
N’utilisez pas les espaces pour présenter l’information
Pour être conforme au RGAA, vous ne devez pas utiliser les espaces pour :
- Séparer les lettres d’un mot (privilégier la propriété CSS
letter-spacing) ; - Simuler des tableaux (utiliser dans l’idéal une balise
<table>) ; - Simuler des colonnes de texte (préférer les balises
<div>).
Critères RGAA : 10.1, 10.2, 10.3 et 10.5
Le navigateur Firefox (qui fait d’ailleurs partie de l’environnement de test du RGAA) propose nativement une fonctionnalité de désactivation des feuilles de style : appuyez sur la touche Alt pour faire apparaître la barre de menus, puis allez dans Affichage > Style de la page > Aucun style.
Vous pouvez également utiliser une extension, comme Web Developer (de Chris Pederick). Si vous installez cette dernière, allez dans l’onglet CSS et choisissez Disable All Styles.
2. Le zoom des caratères
Certains utilisateurs sont affectés par une vision basse ou des troubles de la vue qui implique l’utilisation d’un zoom maximal.
Vous devez vous assurer que :
- Qu’il soit possible de zoomer jusqu’à 200 % minimum en utilisant la fonction d’agrandissement du navigateur, la fonction de zoom du navigateur ou un composant d’interface propre au site ;
- Que ce zoom ne s’accompagne pas d’une perte d’informations (par exemple, contenu caché par une image ou hors écran) ;
- Que le texte reste lisible avec un tel niveau de zoom.
Critère RGAA : 10.4
Trois cas particuliers font exception, car il n’y a pas de possibilité de personnalisation :
- Les sous-titres incrustés dans une vidéo ;
- Les textes en image ;
- Le texte au sein d’une balise
<canvas>.
Attention cependant pour les textes en image. En effet, le critère 1.8 vous recommande de remplacer quand c’est possible, et en l’absence d’un mécanisme de remplacement, une image texte porteuse d’information par un équivalent en texte stylé.
Astuces et tutoriels sur l'accessibilité Web
3. La reconnaissance des liens et la prise de focus
Les liens de la même couleur que le texte adjacent, ou signalés uniquement par un changement de couleur, sont considérés comme des liens dont la nature n’est pas évidente. Vous devez les identifier et vérifier qu’ils remplissent les trois conditions suivantes :
- La différence de couleur avec le texte adjacent doit présenter un ratio de contraste de 3:1 minimum ;
- Une indication visuelle autre qu’un changement de couleur apparait au survol ;
- Une indication visuelle autre qu’un changement de couleur apparait à la prise de focus.
Vous devez vérifier ces trois conditions pour tous les états d’un lien (non visité, visité, activé, au survol, à la prise de focus).
Tous les liens doivent également être visibles à la prise de focus. Deux options s’offrent à vous :
- Vous conservez le style du focus natif du navigateur, sans le supprimer ou le dégrader ;
- Vous définissez votre propre style de focus (respectez alors le ratio de contraste de 3:1 mentionné dans le critère 3.3)
Critères RGAA : 10.6, 10.7
Un lien souligné en permanence n’est pas un lien dont la nature n’est pas évidente, et échappe du coup au critère 10.6.
Vous pouvez ajouter tout simplement un soulignement permanent pour résoudre les problèmes de conformité RGGA liés à des liens dont la nature n’est pas évidente (car il sera devenu un lien évident).
4. Les contenus cachés
Le contenu caché n’est pas lu par les technologies d’assistance. Cette situation peut poser problème quand le contenu n’a en réalité pas vocation à être ignoré par les technologies d’assistance.
Vous devez tout d’abord rechercher tous les contenus cachés :
- Si ceux-ci ont bien vocation à être ignorés par les technologies d’assistance, vous êtes conforme au RGAA ;
- Si ceux-ci sont temporairement cachés (exemple : la réponse à une question dans une FAQ), le contenu devient restituable (comprendre : n’est plus caché) après une action de l’utilisateur.
Les solutions pour masquer du contenu
Les technologies d’assistance ne restituent pas aux utilisateurs les contenus cachés par :
display: none;visibility: hidden;font-size:0;- Attribut HTML5
hidden; - Attribut WAI-ARIA
aria-hidden="true".
Note : l’attribut aria-hidden="true" est le seul parmi cette liste qui cache un contenu uniquement aux technologies d’assistance. Les autres solutions cachent le contenu à tout le monde.
Critères RGAA : 10.8
Plusieurs situations justifient un changement de visibilité.
Dans une FAQ, la réponse par exemple est masquée par défaut car elle n’est pas encore pertinente. Elle devient restituable après une action utilisateur au clavier sur la question.
Avant ouverture, nous avons ce code :
<button onclick="ouvrir()">Comment modifier mon profil ?</button>
<div id="reponse" style="display: none;">
Accédez aux paramètres de votre compte...
</div>
Si l’internaute clique pour ouvrir la question, il obtient le code suivant :
<button onclick="ouvrir()">Comment modifier mon profil ?</button>
<div id="reponse" style="display: block;">
Accédez aux paramètres de votre compte...
</div>
Une fenêtre modale qui permet l’affichage d’un contenu présente les mêmes exigences.
5. L'information par la taille, la forme ou la position
- La position : par exemple, présence d’un marqueur visuel pour indiquer la page active dans un menu de navigation ;
- La forme : par exemple, mise en avant-plan pour signaler l’onglet actif ;
- La taille : par exemple, agrandissement de la police.
Critère RGAA : 10.10
Imaginez une série d’onglets (Tabs) où un seul onglet est visible à la fois, articulée autour des attributs WAI-ARIA role="tablist", role="tab", role="tabpanel".
La mise en avant-plan de l’onglet actif consiste en un effet visuel dont voici une représentation possible :
Vous pouvez utiliser des attributs WAI-ARIA pour apporter le même niveau d’information aux technologies d’assistance :
- Attribut
aria-selected="true": Pour une série d’onglets. - Attribut
aria-current="page": Pour un lien dans un menu de navigation.
Ce qui donnerait le code suivant :
<button role="tab" aria-selected="true" class="onglet-avec-ombre">
Produits
</button>
Vous pouvez aussi utiliser une class="sr-only" qui ajoute une information (par exemple, “onglet actif”). Vous auriez alors un code HTML de ce type :
<button role="tab" class="onglet-avec-ombre">
Produits <span class="sr-only">(onglet actif)</span>
</button>
La solution avec des WAI-ARIA est plus propre et plus robuste, mais le sr-only est également conforme au RGAA.
N’utilisez pas par contre la propriété CSS display: none, car l’information serait également inaccessible aux lecteurs d’écran.
6. L'axe unique de défilement
L’utilisation d’un smartphone avec un écran de taille réduite peut poser des problèmes de navigation.
Pour chaque page web, le contenu doit pouvoir être présenté sans perte d’information ou de fonctionnalité avec un défilement sur un axe unique :
- Scroll vertical pour un contenu qui se lit horizontalement (ce qui est le cas de la quasi-totalité des sites web)
- Scroll horizontal pour un un contenu qui se lit verticalement (c’est par exemple le cas pour un site japonais écrit en Tategaki).
Vous devez maintenir ce scroll unique pour les dimensions suivantes :
- Jusqu’à une fenêtre réduite à 320 pixels de large pour une lecture horizontale ;
- Jusqu’à une fenêtre réduite à 256 pixels de haut pour une lecture verticale.
Ce défilement sur un seul axe facilite la lecture et améliore l’accessibilité du contenu aux personnes souffrant de troubles moteur (tremblements, utilisation d’un contacteur unique, etc.).
Les cas particuliers
Certains éléments peuvent entraîner un défilement à la fois vertical et horizontal pour être appréhendés dans leur ensemble :
- Images, graphiques ou vidéos ;
- Jeux ;
Présentations (diaporama par exemple) ; - Tableaux de données ;
- Interfaces où un ascenseur horizontal est nécessaire lors de la manipulation de l’interface.
Critère RGAA : 10.11
Les sites avec un contenu vertical sont en réalité très rares.
Je vous propose deux exemples glanés sur le web :
- https://65bunjitsu.tokyo/ : un site japonais écrit dans l’écriture verticale traditionnelle, appelée Tategaki ;
- https://codepen.io/marklchaves/pen/GVNqEe : un exemple de code pour afficher du contenu vertical.
7. Les propriétés d'espacement
Certains utilisateurs personnalisent l’apparence du texte pour répondre à leurs besoins de lecture et compenser un handicap (basse vision, dyslexie, etc.).
Vous devez vous assurer que le texte reste lisible si les propriétés suivantes sont modifiées :
- L’espacement entre les lignes (
line-height) est augmenté jusqu’à 1,5 fois la taille de la police ; - L’espacement suivant les paragraphes (balise
<p>) est augmenté jusqu’à 2 fois la taille de la police ; - L’espacement des lettres (
letter-spacing) est augmenté jusqu’à 0,12 fois la taille de la police ; - L’espacement des mots (
word-spacing) est augmenté jusqu’à 0,16 fois la taille de la police.
Les cas particuliers
Certains textes ne peuvent pas être traités :
- Les sous-titres directement intégrés à une vidéo ;
- Les images texte ;
- Le texte au sein d’une balise
<canvas>.
Critère RGAA : 10.12
Le plus simple est d’utiliser un Bookmarklet, qui est un petit script stocké dans vos favoris :
- Créez un nouveau favori
- Copiez-collez le code suivant :
javascript:(function(){var style=document.createElement('style');style.innerHTML='* { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } p { margin-bottom: 2em !important; }';document.head.appendChild(style);})();comme s’il s’agissait d’un lien hypertexte ; - Rendez-vous sur la page à tester, et cliquez sur le bookmarklet créé pour vérifier le critère 10.12.
8. Les contenus additionnels
Un contenu additionnel est une information (texte, image, ou composant interactif) qui est initialement masquée et qui devient visible uniquement lorsque l’utilisateur effectue une action spécifique :
- Le survol par une souris ou un pointeur ;
- La prise de focus, en naviguant avec la touche Tabulation du clavier.
Votre contenu additionnel doit respecter trois conditions pour être conforme avec le RGAA :
- Supprimable : l’utilisateur doit pouvoir faire disparaître le contenu (par exemple avec la touche Echap) sans bouger la souris ou le focus.
- Survolable : si le contenu apparaît au survol, l’utilisateur doit pouvoir déplacer sa souris sur ce nouveau contenu sans qu’il ne disparaisse (pour pouvoir lire ou cliquer dessus).
- Persistant : le contenu doit rester visible tant que l’utilisateur ne l’enlève pas ou ne déplace pas son focus ou son pointeur.
Les contenus additionnels apparaissant via les styles CSS doivent également être accessibles de manière équivalente, quel que soit le mode de navigation utilisé :
- Équivalence au survol et prise focus : concrètement, si un contenu apparaît au survol de la souris, il doit également apparaître à la prise de focus du composant par le clavier.
- Équivalence pour l’activation : si un contenu apparaît lors de l’activation (clic) d’un composant, il doit également être disponible via l’activation au clavier ;
- Visible au clavier : L’utilisateur naviguant avec la touche Tabulation doit pouvoir déclencher l’affichage du contenu sans utiliser de souris ;
- Persistance de l’affichage : Le contenu doit rester affiché tant que le focus clavier est maintenu sur l’élément ou tant que l’utilisateur n’effectue pas une action pour le masquer.
Les cas particuliers
Deux cas particuliers existent :
- Lorsque le contenu additionnel est contrôlé par le navigateur, ou qu’il correspond à une fenêtre modale conforme au motif de conception WAI-ARIA dialog, le critère 10.13 n’est pas applicable ;
- Lorsque le contenu additionnel ne masque ou ne remplace aucun contenu porteur d’information, son masquage n’est pas nécessaire.
Critères RGAA : 10.13, 10.14
Pour identifier ces contenus, il faut repérer dans le document les mécanismes CSS utilisant les pseudo-classes d’état :hover (pour le survol) ou :focus (pour la prise de focus) qui modifient la visibilité d’un élément. Cette vérification consiste à détecter si l’activation de ces pseudo-classes déclenche l’apparition d’une information initialement masquée dans le code source.
Vous avez identifié des contenus additionnels ? Validez leur conformité très facilement :
- Test Clavier : naviguez avec la touche Tabulation pour vérifier que le contenu s’affiche à la prise de focus et reste visible jusqu’à ce que vous déplaciez le focus sur un autre élément ;
- Test Souris : survolez l’élément déclencheur puis déplacez le pointeur directement sur le contenu apparu qui doit alors rester affiché et pouvoir être masqué par la touche Echap.
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.