La consultation du site web avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
La dernière des 13 thématiques abordées dans le RGAA version 4.1.2 est particulièrement dense. Au-delà des problématiques d’accessibilité, cette thématique possède une dimension UX pour tous vos utilisateurs.
1. Le contrôle des limites de temps
Sur certains sites web, tout ou partie du contenu est automatiquement rafraîchi ou redirigé au bout d’une période de temps prédéfinie. Un rafraîchissement ou une redirection peut poser problème à différents profils d’utilisateurs :
- Les personnes avec des troubles cognitifs et mentaux (TDAH, troubles de la mémoire, dyslexie…) ;
- Les internautes avec des handicaps moteurs, qui utilisent un contacteur unique ou souffrent de tremblements qui ralentissent leurs actions ;
- Les utilisateurs malvoyants, qui utilisent un lecteur d’écran ou un fort zoom ;
- Les personnes souffrant d’anxiété, pour qui un compte à rebours est source d’inquiétude.
Le critère 13.1 est dédié à cette problématique.
Dans le cas de rafraîchissements du contenu, vous devez proposer l’une des solutions suivantes pour être en conformité avec le RGAA :
- Permettre à l’utilisateur de stopper et de relancer le rafraîchissement (par exemple, bouton lecture / pause) ;
- Permettre à l’utilisateur d’augmenter la limite de temps entre deux rafraîchissements en la multipliant par dix fois ou plus ;
- Avertir l’utilisateur de l’imminence du rafraîchissement, au moins 20 secondes en avance, à l’utilisateur, et lui permettre d’augmenter si besoin la limite de temps avant le prochain rafraîchissement ;
- Prévoir une limite de temps entre deux rafraîchissements de vingt heures minimum.
Dans le cas d’une redirection, la conformité dépend du choix technique initial :
- Pour une redirection avec
<meta http-equiv=“refresh” content=“0;URL=‘[URL ciblée]’” />, assurez-vous que la redirection est immédiate ; - Pour une redirection effectuée via un script, l’utilisateur doit se voir proposer l’une de ses solutions :
- Il peut arrêter ou relancer la redirection,
- Il peut multiplier la limite de temps par dix minimum,
- Il est averti au moins 20 secondes avant la redirection, et peut augmenter la limite de temps,
- La limite de temps est supérieure ou égale à 20 heures.
Cas particulier : la limite de temps d’une session
Pour des mesures de sécurité, certaines sessions sont limitées dans le temps. C’est par exemple le cas pour une boutique en ligne, le site web d’une banque ou un média avec contenus réservés aux abonnés. Pour être conforme avec le RGAA, vous devez proposer l’une de ces trois solutions :
- La suppression de la limite de temps ;
- L’augmentation de la limite de temps ;
- Une limite de temps supérieure ou égale à 20 heures.
Critère RGAA : 13.1
Vous devez rechercher les balises suivantes dans votre contenu : <object>, <embed>, <svg>, <canvas>., ou trouver dans les balises<head> de la page un élément<meta http-equiv="refresh" content="[compteur]">.
Les cas de rafraîchissement automatique des contenus sont plus fréquents que ce que l’on peut penser :
- Un site d’actualités propose un carrousel (diaporama) de ses actualités à la Une, avec un changement toutes les 5 secondes ;
- Un article en live qui suit un match de foot et s’actualise au fil des actions des joueurs ;
- Un site d’informations financières présente les taux de change avec une actualisation toutes les 30 secondes.
2. L'ouverture de nouvelles fenêtres
Vous ne devez pas déclencher automatiquement l’ouverture d’une nouvelle fenêtre ou d’un nouvel onglet sans action de l’utilisateur.
Les aficionados de pop-up, notamment, ne seront jamais conformes au critère 13.2 du RGAA : cette publicité intrusive crée une perte de contrôle qui peut perturber certains utilisateurs en situation de handicap, notamment ceux qui utilisent une technologie d’assistance tel qu’un lecteur d’écran.
Critère RGAA : 13.2
La pop-up est une nouvelle instance du navigateur qui s’ouvre sous la forme d’un onglet ou d’une fenêtre logicielle séparée. Elle est directement ciblée par le critère 13.2 du référentiel général pour l’amélioration de l’accessibilité.
La pop-in (ou fenêtre modale) s’affiche directement à l’intérieur de la page web consultée. Contrairement à la pop-up, elle ne crée pas de nouvelle fenêtre de navigateur et n’est donc pas concernée par l’interdiction d’ouverture automatique du critère 13.2. Elle peut apparaître automatiquement au chargement de la page, à condition d’être accessible, de gérer correctement le focus clavier et d’offrir un moyen simple de la refermer. D’ailleurs, la gestion des données (RGPD) se fait généralement avec une pop-in.
Astuces et tutoriels sur l'accessibilité Web
3. Le téléchargement de documents bureautiques
- Proposer au téléchargement des documents bureautiques compatibles avec l’accessibilité ;
- Proposer une alternative accessible (par exemple, une page web qui reprend le contenu d’un PDF).
Critères RGAA : 13.3 et 13.4
Seuls les formats suivants sont reconnus compatibles à l’heure actuelle : les formats Microsoft Office (Word, Excel), Open Office (ODF), Adobe PDF et EPUB.
Les mêmes critères du RGAA que pour les pages web s’appliquent :
- Alternatives aux images : chaque image porteuse d’information dans le document doit avoir une alternative textuelle.
- Structure et Titres : le document doit posséder une structure hiérarchique (titres, listes) correctement balisée.
- Langue : la langue principale du document doit être définie.
- Tableaux : les tableaux de données doivent avoir des en-têtes correctement identifiés.
- Titre de document : le fichier doit posséder un titre pertinent dans ses propriétés.
- Ordre de lecture : le contenu doit être structuré de manière à garantir un ordre de lecture logique pour les technologies d’assistance.
Pour certains sites web (ceux qui dépendent de la loi du 11 février 2005), les fichiers publiés avant le 23 septembre 2018 sont exemptés (à condition qu’ils ne soient pas nécessaires pour accomplir une tâche administrative dévolue à l’organisme éditeur du site).
Vous pouvez utiliser sur Windows le logiciel PDF Accessibility Checker (PAC) pour contrôler facilement et rapidement l’accessibilité d’un document PDF.
Seuls les critères relatifs au RGAA sont à prendre en considération.
4. Les contenus cryptiques
Les contenus cryptiques sont des éléments textuels ou visuels qui détournent des caractères de leur usage habituel. Derrière ce terme “barbare” se cachent des exemples concrets que vous connaissez déjà certainement :
- L’art ASCII qui consiste à former des images ou des symboles à l’aide de caractères typographiques.
- Les émoticônes réalisées à l’aide des touches du clavier.
- La syntaxe cryptique, qui concerne des écritures ou des codes dont la structure est difficile à déchiffrer sans aide particulière.
Exemples de contenus cryptiques
Visage qui fait les yeux ronds en art ASCII :
(o_o)Clin d’oeil en émoticône :
Notation de 3 étoiles sur 5 :
Ces contenus cryptiques posent un problème majeur pour les utilisateurs de technologies d’assistance, car ils sont mal vocalisés. Ils dérangent également les utilisateurs qui souffrent de troubles cognitifs. Ils sont traités dans les critères 13.5 et 13.6 du RGAA.
Vous devez proposer une alternative pertinente pour chaque contenu cryptique :
- Soit par l’utilisation d’un attribut
title; - Soit la définition est donnée juste avant ou juste après.
Si vous optez pour l’attribut title, vous pouvez le placer sur un élément <span> ou <pre>.
Critères RGAA : 13.5 et 13.6
L’élément <span> est recommandé pour les contenus brefs qui s’insèrent dans le flux d’une phrase, comme les émoticônes ou les syntaxes raccourcies :
<span title="Clin d'œil">;-)</span>;<p>Découvrez le camping Bellevue<span title="3 étoiles">***</span> à Triffouilly-les-Oies</p>.
La balise <pre> est surtout utilisée pour l’art ASCII, car elle permet de conserver la position de chaque caractère :
<pre title="Dessin d'un homme qui fait les yeux ronds"> (o_o)</pre>.
5. Les flashs et effets de clignotements
Les flashs, les changements de luminosité et les effets de clignotement peuvent avoir des conséquences catastrophiques pour des utilisateurs affectés par certaines maladies, qui peuvent déclencher par exemple déclencher des crises d’épilepsie.
Le référentiel général d’amélioration de l’accessibilité s’engage dans une démarche la plus inclusive possible.
Vous devez identifier les changements brusques de luminosité ou les effets de flash, et vous assurer que :
- La fréquence de l’effet est inférieure à 3 par seconde ;
- Ou que la surface totale cumulée des effets est inférieure ou égale à 21824 pixels.
Dans les faits, je vous conseille de limiter la fréquence, c’est la solution la plus sûre et la plus simple à mettre en oeuvre.
Critères RGAA : 13.7 et 13.8
Certaines balises HTML peuvent accueillir des éléments susceptibles de générer des clignotements, des effets de flash ou de brusques changements de luminosité : <video>, <img>, <svg>, <canvas>, <embed> ou <object>.
Un script peut également provoquer les mêmes effets. Vous devez notamment porter une attention particulière aux scripts qui utilisent :
- Des gestionnaires de temps
setInterval()ousetTimeout()avecrequestAnimationFrame(); - Des manipulations de classes avec
element.classList.toggle()ouelement.classList.add/remove()quand elles sont déclenchées de façon répétée ; - Des modifications directes de style, avec des fonctions modifiant l’objet
element.style(ex:element.style.backgroundColor = ...); - Etc.
Vous devez également contrôler certains effets visuels obtenus par une mise en forme CSS :
- Les couleurs de premier plan (
color) et d’arrière-plan (Background-color) ; - Les propriétés de visibilité et d’opacité (
opacity,visibility,display…) ; - Les contours et bordures (
outline-color,border-color) ; - Les filtres graphiques (
filter,brightness,filter: invert…) - Etc.
Exemple de mise en forme CSS :
.alerte-flash {
animation: clignotement 0.2s infinite;
}
@keyframes clignotement {
0% { background-color: #FFF; } /* Blanc */
50% { background-color: #FF0000; } /* Rouge vif */
}
Cette bannière clignote 5 fois par seconde, elle est non conforme si elle dépasse une surface de 21 824 pixels.
6. L'orientation de l'écran
Certains utilisateurs ont impérativement besoin de pouvoir consulter votre page web au format paysage ou au portrait.
Sauf dans des cas particuliers où l’orientation du périphérique est essentielle, votre site doit offrir une expérience de navigation similaire aux formats portrait et paysage pour ne pas pénaliser ce public en situation de handicap.
Critère RGAA : 13.9
Imaginez une personne en situation de handicap moteur, en fauteuil roulant et utilisant un contacteur unique ou une navigation oculaire.
Son smartphone ou sa tablette est positionné sur un support fixe. Que se passerait-il pour lui si, tout à coup, un site web était consultable uniquement au format portrait, alors que son smartphone est sur un support au format paysage ?
L’orientation du périphérique est parfois essentielle à l’utilisation d’une interface. Une application de jeu, par exemple, n’est parfois possible qu’au format portrait ou paysage.
Dans ces situations, le critère 13.9 est non applicable.
Attention : si l’interface est l’unique moyen pour accéder au service proposé, une alternative devra être mise en place pour y remédier.
7. Les gestes complexes et les annulations d'action
Pour mieux comprendre le critère 13.10, vous devez d’abord faire la distinction entre geste simple et geste complexe :
- Un geste simple repose sur un contact en un point unique de l’écran : clic, pression simple ou prolongée, double-pression ou double-clic.
- Un geste complexe peut impliquer plusieurs points de contact sur l’écran et/ou un geste basé sur une trajectoire.
La mise en conformité de votre site est plutôt simple pour ce critère : vous devez simplement proposer une alternative reposant sur un geste simple pour réaliser la même action. Par exemple, des flèches gauche et droite offrent une alternative au swipe.
Exemples de gestes complexes
Les gestes complexes sont présents sur de nombreux sites internet, et vous en effectuez certainement régulièrement sans vous en rendre compte :
- Vous utilisez vos deux doigts pour zoomer ou dézoomer sur une carte interactive ;
- Vous glissez déposez un document ;
- Vous swipez pour passer d’une photo à l’autre dans un diaporama ;
- Etc.
Vous devez également vous assurer que les actions déclenchées au moyen d’un dispositif de pointage sur un point unique peuvent être annulées.
Critères RGAA : 13.10 et 13.11
Votre alternative doit évidemment respecter tous les autres critères de conformité du RGAA. Si vous optez par exemple pour un lien, celui-ci doit notamment posséder un nom accessible et être accessible par une navigation au clavier.
Voici des exemples concrets pour mieux comprendre ce critère un peu complexe.
Prenez un bouton pour valider une commande : son comportement habituel consiste en un déclenchement de l’action au relâchement. Ce comportement est conforme au RGAA, car un utilisateur qui aurait cliqué par erreur peut déplacer son dispositif de pointage en dehors de la zone d’interaction du bouton pour annuler son action.
Vous pouvez également avoir un déclenchement à la pression et une annulation au relâchement : c’est le cas par exemple d’une icône aperçu rapide sur un site e-commerce qui zoome sur une image.
Un glisser-déposer doit bénéficier de la même logique d’annulation : imaginez que vous déplacez un document pour le ranger dans un dossier, vous devez pouvoir annuler l’action par un simple relâchement.
8. L'activation par le mouvement
Vous devez également adopter la même approche pour les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil : une alternative accessible doit être proposée (13.12).
Vous devez également permettre la désactivation de l’activation par le mouvement pour éviter les déclenchements intempestifs pour être en conformité avec le RGAA.
Exemples de fonctionnalités par le mouvement
Ces fonctionnalités sont plutôt rares, mais existent sur certains sites ou applications :
- Vous secouez votre smartphone pour annuler une saisie sur un formulaire ;
- Vous inclinez votre appareil pour scroller un contenu ;
- Vous effectuez un geste de la main devant la caméra pour faire défiler des images ;
- Etc.
Critère RGAA : 13.12
Les activations par le mouvement posent de véritables problèmes à certains internautes.
Un utilisateur en situation de handicap qui est affecté par des tremblements involontaires pourrait activer par erreur une fonctionnalité de suppression par le mouvement : il n’arrivera pas à finir de compléter son formulaire !