Critères du RGAA 4.1 2021 (Référentiel Général d'Amélioration de l'Accessibilité), version web par Tanaguru
Ce site web a pour vocation de présenter le RGAA sous une forme différente de la version officielle, qui nous convient mieux chez Tanaguru. Il présente les mêmes contenus que la version officielle. Cependant, des coquilles ont pu se glisser dans nos pages. N'hésitez pas à nous les signaler sur le projet Github !
Filtres
Sommaire
Mode d'emploi
Ce référentiel s’applique à tout contenu HTML (HTML4, XHTML1 et HTML5). Il utilise, pour certains tests une base de référence prenant en compte un ensemble de technologies d’assistance, de navigateurs et de systèmes d’exploitation sur lesquels l’accessibilité des composants d’interface développés par JavaScript doit être vérifiée notamment. Une description détaillée de la base de référence est disponible ici : base de référence.
Note importante pour tout contenu antérieur à la spécification HTML5 :
Lorsque le code HTML de la page n’est pas du HTML5, les éléments HTML5 (balises et attributs) exigés par un critère ou test sont non applicables. Tous les autres critères ou tests restent applicables, y compris les dispositifs ARIA. Les critères et tests suivants sont non applicables :
Critère 1.9 ;
Critère 9.2 ;
Test 11.10.1 (condition 2 relative à l’attribut HTML5 required).
Méthode de validation
Le niveau de conformité est établi au niveau des critères selon ces statuts :
Conforme (C) : l’ensemble des tests applicables sont réussis ;
Non Conforme (NC) : un test applicable est échoué, au moins ;
Non Applicable (NA) : il n’y a pas de contenu concerné par le critère.
RGAA propose, en plus de ces trois statuts de validation, deux statuts complémentaires :
Dérogé (D) : il existe des contenus dérogés applicables au critère ;
Non Testé (NT) : le critère n’a pas été testé.
Vous pouvez consulter, à ce sujet, le guide d’accompagnement : Comment vérifie-t-on la conformité au RGAA ?
Test 1.1.1 : Chaque image (balise <img> ou balise possédant l'attribut WAI-ARIA role="img") porteuse d'information a-t-elle une alternative textuelle ?
Test 1.1.4 : Chaque zone cliquable d'une image réactive côté serveur est-elle doublée d’un mécanisme utilisable quel que soit le dispositif de pointage utilisé et permettant d’accéder à la même destination ?
Critère 1.4 [A] Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d'identifier la nature et la fonction de l'image ?
S'il est présent, le contenu de l'attribut alt est pertinent.
S'il est présent, le contenu de l'attribut title est pertinent.
S'il est présent, le contenu de l'attribut WAI-ARIA aria-label est pertinent.
S'il est présent, le passage de texte associé via l'attribut WAI-ARIA aria-labelledby est pertinent.
Test 1.4.2 : Pour chaque zone (balise <area>) d'une image réactive utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?
S'il est présent, le contenu de l'attribut alt est pertinent.
S'il est présent, le contenu de l'attribut title est pertinent.
S'il est présent, le contenu de l'attribut WAI-ARIA aria-label est pertinent.
S'il est présent, le passage de texte associé via l'attribut WAI-ARIA aria-labelledby est pertinent.
Test 1.4.6 : Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?
S'il est présent, le contenu de l'attribut title est pertinent.
S'il est présent, le contenu de l'attribut WAI-ARIA aria-label est pertinent.
S'il est présent, le passage de texte associé via l'attribut WAI-ARIA aria-labelledby est pertinent.
Critère 1.5 [A] Pour chaque image utilisée comme CAPTCHA, une solution
d'accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?
Test 1.5.1 : Chaque image (balises <img>, <area>, <object>, <embed>, <svg>, <canvas> ou possédant un attribut WAI-ARIA role="img") utilisée comme CAPTCHA vérifie-t-elle une de ces conditions ?
Il existe une autre forme de CAPTCHA non graphique, au moins.
Il existe une autre solution d'accès à la fonctionnalité qui est sécurisée par le CAPTCHA.
Test 1.5.2 : Chaque bouton associé à une image (balise <input> avec l'attribut type="image") utilisée comme CAPTCHA vérifie-t-il une de ces conditions ?
Il existe une autre forme de CAPTCHA non graphique, au moins.
Il existe une autre solution d'accès à la fonctionnalité qui est sécurisée par le CAPTCHA.
Test 1.6.9 : Pour chaque image (balise <img>, <input> avec l'attribut type="image", <area>, <object>, <embed>, <svg>, <canvas>, ou possédant un attribut WAI-ARIA role="img") porteuse d'information, qui est accompagnée d'une description détaillée et qui utilise un attribut WAI-ARIA aria-describedby, l'attribut WAI-ARIA aria-describedby associe-t-il la description détaillée ?
Test 1.8.6 : Chaque image texte SVG (balise <svg>) porteuse d’information et dont le texte n’est pas complètement structuré au moyen d’éléments <text>, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
Test 1.9.1 : Chaque image pourvue d'une légende (balise <img>, <input> avec l'attribut type="image" ou possédant un attribut WAI-ARIA role="img" associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
L'image (balise <img>, <input> avec l'attribut type="image" ou possédant un attribut WAI-ARIA role="img") et sa légende adjacente sont contenues dans une balise <figure>.
La balise <figure> possède un attribut WAI-ARIA role="figure" ou role="group".
La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende.
La légende est contenue dans une balise <figcaption>.
Test 1.9.2 : Chaque image objet pourvue d'une légende (balise <object> avec l'attribut type="image/…" associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
L'image objet (balise <object>) et sa légende adjacente sont contenues dans une balise <figure>.
La balise <figure> possède un attribut WAI-ARIA role="figure" ou role="group".
La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende.
La légende est contenue dans une balise <figcaption>.
Test 1.9.3 : Chaque image embarquée pourvue d'une légende (balise <embed> associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
L'image embarquée (balise <embed>) et sa légende adjacente sont contenues dans une balise <figure>.
La balise <figure> possède un attribut WAI-ARIA role="figure" ou role="group".
La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende.
La légende est contenue dans une balise <figcaption>.
Test 1.9.4 : Chaque image vectorielle pourvue d'une légende (balise <svg> associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
L'image vectorielle (balise <svg>) et sa légende adjacente sont contenues dans une balise <figure>.
La balise <figure> possède un attribut WAI-ARIA role="figure" ou role="group".
La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende.
La légende est contenue dans une balise <figcaption>.
Test 1.9.5 : Chaque image bitmap pourvue d'une légende (balise <canvas> associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
L'image bitmap (balise <canvas>) et sa légende adjacente sont contenues dans une balise <figure>.
La balise <figure> possède un attribut WAI-ARIA role="figure" ou role="group".
La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende.
La légende est contenue dans une balise <figcaption>.
Ne pas donner l’information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés.
Mots clés
Principe : Perceptible
Critère 3.1 [A] Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Test 3.1.1 : Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d'information, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Test 3.1.2 : Pour chaque indication de couleur donnée par un texte, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Critère 3.2 [AA] Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Test 3.2.1 : Dans chaque page web, le texte et le texte en image sans effet de graisse d'une taille restituée inférieure à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins.
Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4.5:1, au moins.
Test 3.2.2 : Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins.
Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4.5:1, au moins.
Test 3.2.3 : Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins.
Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 3:1, au moins.
Test 3.2.4 : Dans chaque page web, le texte et le texte en image en gras d'une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins.
Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 3:1, au moins.
Critère 3.3 [AA] Dans chaque page web, les couleurs utilisées dans les composants d'interface ou les éléments graphiques porteurs d'informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Test 3.3.3 : Dans chaque page web, le rapport de contraste des différentes couleurs contiguës entre elles d'un élément graphique, lorsqu'elles sont nécessaires à sa compréhension, vérifie-t-il une de ces conditions (hors cas particuliers) ?
Test 4.3.2 : Pour chaque média temporel synchronisé pré-enregistré possédant des sous-titres synchronisés diffusés via une balise <track>, la balise <track> possède-t-elle un attribut kind="captions" ?
Test 4.7.1 : Pour chaque média temporel seulement son, seulement vidéo ou synchronisé, le contenu textuel adjacent permet-il d'identifier clairement le média temporel (hors cas particuliers) ?
Test 4.9.1 : Pour chaque média non temporel ayant une alternative, cette alternative permet-elle d'accéder au même contenu et à des fonctionnalités similaires ?
Test 4.10.1 : Chaque séquence sonore déclenchée automatiquement via une balise <object>, <video>, <audio>, <embed>, <bgsound> ou un code JavaScript vérifie-t-elle une de ces conditions ?
La séquence sonore a une durée inférieure ou égale à 3 secondes.
La séquence sonore peut être stoppée sur action de l'utilisateur.
Le volume de la séquence sonore peut être contrôlé par l'utilisateur indépendamment du contrôle de volume du système.
Donner à chaque tableau de données complexe, un résumé et un titre pertinent, identifier clairement les cellules d’en-tête, utiliser un mécanisme pertinent pour lier les cellules de données aux cellules d’en-tête. Pour chaque tableau de mise en forme, veiller à sa bonne linéarisation.
L'en-tête de lignes est structuré au moyen d'une balise pourvue d'un attribut WAI-ARIA role="rowheader".
Test 5.6.3 : Pour chaque tableau de données, chaque en-tête ne s'appliquant pas à la totalité de la ligne ou de la colonne est-il structuré au moyen d'une balise <th> ?
Test 5.6.4 : Pour chaque tableau de données, chaque cellule associée à plusieurs en-têtes est-elle structurée au moyen d’une balise <td> ou <th> ?
Critère 5.7 [A] Pour chaque tableau de données, la technique appropriée permettant d'associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?
Test 5.7.1 : Pour chaque contenu de balise <th> s'appliquant à la totalité de la ligne ou de la colonne, la balise <th> respecte-t-elle une de ces conditions (hors cas particuliers) ?
La balise <th> possède un attribut id unique.
La balise <th> possède un attribut scope.
La balise <th> possède un attribut WAI-ARIA role="rowheader" ou role="columnheader".
Test 5.7.2 : Pour chaque contenu de balise <th> s'appliquant à la totalité de la ligne ou de la colonne et possédant un attribut scope, la balise <th> vérifie-t-elle une de ces conditions ?
La balise <th> possède un attribut scope avec la valeur "row" pour les en-tête de lignes.
La balise <th> possède un attribut scope avec la valeur "col" pour les en-tête de colonnes.
Test 5.7.3 : Pour chaque contenu de balise <th> ne s'appliquant pas à la totalité de la ligne ou de la colonne, la balise <th> vérifie-t-elle ces conditions ?
La balise <th> ne possède pas d'attribut scope.
La balise <th> ne possède pas d'attribut WAI-ARIA role="rowheader" ou role="columnheader".
La balise <th> possède un attribut id unique.
Test 5.7.4 : Pour chaque contenu de balise <td> ou <th> associée à un ou plusieurs en-têtes possédant un attribut id, la balise vérifie-t-elle ces conditions ?
La balise possède un attribut headers.
L'attribut headers possède la liste des valeurs d'attribut id des en-têtes associés.
Test 5.7.5 : Pour chaque balise pourvue d'un attribut WAI-ARIA role="rowheader" ou role="columnheader" dont le contenu s'applique à la totalité de la ligne ou de la colonne, la balise vérifie-t-elle une de ces conditions ?
La balise possède un attribut WAI-ARIA role="rowheader" pour les en-têtes de lignes.
La balise possède un attribut WAI-ARIA role="columnheader" pour les en-têtes de colonnes.
Le tableau de mise en forme (balise <table>) n’a pas d’attribut summary (sinon vide) et ne contient pas de balises <caption>, <th>, <thead>, <tfoot>, <colgroup> ou de balises ayant un attribut WAI-ARIA role="rowheader", role="columnheader".
Les cellules du tableau de mise en forme (balises <td>) ne possèdent pas d'attributs scope, headers, axis.
Rendre possible le contrôle de chaque code script au moins par le clavier et tout dispositif de pointage et s’assurer de leur compatibilité avec les technologies d’assistance.
Le nom accessible du composant contient au moins l'intitulé visible.
Le composant possède un rôle pertinent.
Critère 7.2 [A] Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?
Test 7.2.1 : Chaque script débutant par la balise <script> et ayant une alternative vérifie-t-il une de ces conditions ?
L'alternative entre <noscript> et </noscript> permet d'accéder à des contenus et des fonctionnalités similaires.
La page affichée, lorsque JavaScript est désactivé, permet d'accéder à des contenus et des fonctionnalités similaires.
La page alternative permet d'accéder à des contenus et des fonctionnalités similaires.
Le langage de script côté serveur permet d'accéder à des contenus et des fonctionnalités similaires.
L'alternative présente dans la page permet d'accéder à des contenus et des fonctionnalités similaires.
Test 7.2.2 : Chaque élément non textuel mis à jour par un script (dans la page, ou dans un cadre) et ayant une alternative vérifie-t-il ces conditions ?
L’alternative de l’élément non textuel est mise à jour.
Test 7.5.1 : Chaque message de statut qui informe de la réussite, du résultat d'une action ou bien de l'état d'une application utilise-t-il l'attribut WAI-ARIA role="status" ?
Test 7.5.2 : Chaque message de statut qui présente une suggestion, ou avertit de l'existence d'une erreur utilise-t-il l'attribut WAI-ARIA role="alert" ?
Test 7.5.3 : Chaque message de statut qui indique la progression d'un processus utilise-t-il l'un des attributs WAI-ARIA role="log", role="progressbar" ou role="status" ?
Test 8.7.1 : Dans chaque page web, chaque texte écrit dans une langue différente de la langue par défaut vérifie-t-il une de ces conditions (hors cas particuliers) ?
L'indication de langue est donnée sur l'élément contenant le texte (attribut lang et / ou xml:lang).
L'indication de langue est donnée sur un des éléments parents (attribut lang et/ou xml:lang).
Test 8.9.1 : Dans chaque page web les balises (à l'exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?
Test 8.10.1 : Dans chaque page web, chaque texte dont le sens de lecture est différent du sens de lecture par défaut est contenu dans une balise possédant un attribut dir ?
Test 8.10.2 : Dans chaque page web, chaque changement du sens de lecture (attribut dir) vérifie-t-il ces conditions ?
La valeur de l'attribut dir est conforme (rtl ou ltr).
Utiliser des titres, des listes, des abréviations et des citations pour structurer l’information. S’assurer que la structure du document est cohérente.
Mots clés
Principe : Perceptible
Critère 9.1 [A] Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
Test 9.1.1 : Dans chaque page web, la hiérarchie entre les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-elle pertinente ?
Test 9.1.2 : Dans chaque page web, le contenu de chaque titre (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-il pertinent ?
Test 9.1.3 : Dans chaque page web, chaque passage de texte constituant un titre est-il structuré à l'aide d'une balise <hx> ou d'une balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level ?
Utiliser des feuilles de style pour contrôler la présentation de l’information. Vérifier l’effet de l’agrandissement des taille des caractères sur la lisibilité. S’assurer que les liens sont correctement identifiables, que la prise de focus est signalée, que l’interlignage est suffisant et donner la possibilité à l’utilisateur de contrôler la justification des textes. S’assurer que les textes cachés sont correctement restitués et que l’information n’est pas donnée uniquement par la forme ou la position d’un élément.
Test 10.1.1 : Dans chaque page web, les balises servant à la présentation de l'information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ?
Test 10.1.2 : Dans chaque page web, les attributs servant à la présentation de l'information ne doivent pas être présents dans le code source généré des pages. Cette règle est-elle respectée ?
Test 10.1.3 : Dans chaque page web, l'utilisation des espaces vérifie-t-elle ces conditions ?
Les espaces ne sont pas utilisées pour séparer les lettres d'un mot.
Les espaces ne sont pas utilisées pour simuler des tableaux.
Les espaces ne sont pas utilisées pour simuler des colonnes de texte.
Critère 10.4 [AA] Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins (hors cas particuliers) ?
Test 10.4.1 : Dans chaque page web, l'augmentation de la taille des caractères jusqu'à 200 %, au moins, ne doit pas provoquer de perte d'information. Cette règle est-elle respectée selon une de ces conditions (hors cas particuliers) ?
Lors de l'utilisation de la fonction d'agrandissement du texte du navigateur.
Lors de l'utilisation des fonctions de zoom graphique du navigateur.
Lors de l'utilisation d'un composant d'interface propre au site permettant d'agrandir le texte ou de zoomer.
Test 10.4.2 : Dans chaque page web, l'augmentation de la taille des caractères jusqu'à 200 %, au moins, doit être possible pour l’ensemble du texte dans la page. Cette règle est-elle respectée selon une de ces conditions (hors cas particuliers) ?
Lors de l'utilisation de la fonction d'agrandissement du texte du navigateur.
Lors de l'utilisation des fonctions de zoom graphique du navigateur.
Lors de l'utilisation d'un composant d'interface propre au site permettant d'agrandir le texte ou de zoomer.
Critère 10.5 [AA] Dans chaque page web, les déclarations CSS de couleurs de fond d'élément et de police sont-elles correctement utilisées ?
Test 10.5.1 : Dans chaque page web, chaque déclaration CSS de couleurs de police (color), d'un élément susceptible de contenir du texte, est-elle accompagnée d'une déclaration de couleur de fond (background, background-color), au moins, héritée d'un parent ?
Test 10.5.2 : Dans chaque page web, chaque déclaration de couleur de fond (background, background-color), d'un élément susceptible de contenir du texte, est-elle accompagnée d'une déclaration de couleur de police (color) au moins, héritée d'un parent ?
Test 10.5.3 : Dans chaque page web, chaque utilisation d'une image pour créer une couleur de fond d'un élément susceptible de contenir du texte, via CSS (background, background-image), est-elle accompagnée d'une déclaration de couleur de fond (background, background-color), au moins, héritée d'un parent ?
Test 10.6.1 : Dans chaque page web, chaque lien texte signalé uniquement par la couleur, et dont la nature n'est pas évidente, vérifie-t-il ces conditions ?
La couleur du lien à un rapport de contraste supérieur ou égal à 3:1 par rapport au texte environnant.
Le lien dispose d'une indication visuelle au survol autre qu'un changement de couleur.
Le lien dispose d'une indication visuelle au focus autre qu'un changement de couleur.
Le contenu caché a vocation à être ignoré par les technologies d'assistance.
Le contenu caché n’a pas vocation à être ignoré par les technologies d’assistances et est rendu restituable par les technologies d'assistance suite à une action de l'utilisateur réalisable au clavier ou par tout dispositif de pointage sur un élément précédent le contenu caché ou suite à un repositionnement du focus dessus.
Test 10.9.1 : Dans chaque page web, pour chaque texte ou ensemble de textes, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?
Test 10.9.2 : Dans chaque page web, pour chaque image ou ensemble d'images, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?
Test 10.10.1 : Dans chaque page web, pour chaque texte ou ensemble de textes, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle implémentée de façon pertinente ?
Test 10.10.2 : Dans chaque page web, pour chaque image ou ensemble d'images, l'information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?
Critère 10.11 [AA] Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou à un défilement horizontal pour une fenêtre ayant une largeur de 320px (hors cas particuliers) ?
Test 10.11.1 : Pour chaque page web, lorsque le contenu dont le sens de lecture est horizontal est affiché dans une fenêtre réduite à une largeur de 320px, l'ensemble des informations et des fonctionnalités sont-elles disponibles sans aucun défilement horizontal (hors cas particuliers) ?
Test 10.11.2 : Pour chaque page web, lorsque le contenu dont le sens de lecture est vertical est affiché dans une fenêtre réduite à une hauteur de 256px, l'ensemble des informations et des fonctionnalités sont-elles disponibles sans aucun défilement vertical (hors cas particuliers) ?
Critère 10.12 [AA] Dans chaque page web, les propriétés d'espacement du texte peuvent-elles être redéfinies par l'utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ?
Test 10.12.1 : Dans chaque page web, le texte reste-t-il lisible lorsque l'affichage est modifié selon ces conditions (hors cas particuliers) ?
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.
Test 10.13.1 : Chaque contenu additionnel devenant visible à la prise de focus ou au survol d'un composant d'interface peut-il être masqué par une action utilisateur sans déplacer le focus ou le pointeur de la souris (hors cas particuliers) ?
Test 10.13.2 : Chaque contenu additionnel qui apparaît au survol d'un composant d'interface peut-il être survolé par le pointeur de la souris sans disparaître (hors cas particuliers) ?
Le contenu additionnel reste visible jusqu'à ce que l'utilisateur retire le pointeur souris ou le focus du contenu additionnel et du composant d'interface ayant déclenché son apparition.
Le contenu additionnel reste visible jusqu'à ce que l'utilisateur déclenche une action masquant ce contenu sans déplacer le focus ou le pointeur souris du composant d'interface ayant déclenché son apparition.
Le contenu additionnel reste visible jusqu'à ce qu'il ne soit plus valide.
Critère 10.14 [A] Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ?
Test 10.14.1 : Dans chaque page web, les contenus additionnels apparaissant au survol d'un composant d'interface via les styles CSS respectent-ils si nécessaire une de ces conditions ?
Les contenus additionnels apparaissent également à l'activation du composant via le clavier et tout dispositif de pointage.
Les contenus additionnels apparaissent également à la prise de focus du composant.
Les contenus additionnels apparaissent également par le biais de l'activation ou de la prise de focus d'un autre composant.
Test 10.14.2 : Dans chaque page web, les contenus additionnels apparaissant au focus d'un composant d'interface via les styles CSS respectent-ils si nécessaire une de ces conditions ?
Les contenus additionnels apparaissent également à l'activation du composant via le clavier et tout dispositif de pointage.
Les contenus additionnels apparaissent également au survol du composant.
Les contenus additionnels apparaissent également par le biais de l'activation ou du survol d'un autre composant.
Associer pour chaque formulaire chacun de ses champs à son étiquette, grouper les champs dans des blocs d’informations de même nature, structurer les listes de choix de manière pertinente, donner à chaque bouton un intitulé explicite. Vérifier la présence d’aide à la saisie, s’assurer que le contrôle de saisie est accessible et que l’utilisateur peut contrôler les données à caractère financier, juridique ou personnel.
Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
Test 11.1.2 : Chaque champ de formulaire associé à une balise <label> ayant un attribut for, vérifie-t-il ces conditions ?
La valeur de l'attribut for est égale à la valeur de l'attribut id du champ de formulaire associé.
Test 11.1.3 : Chaque champ de formulaire ayant une
étiquette dont le contenu n'est pas visible ou à proximité (masqué, aria-label) ou qui n’est pas accolé au champ (aria-labelledby), vérifie-t-il une de ses conditions ?
Le champ de formulaire possède un attribut title dont le contenu permet de comprendre la nature de la saisie attendue.
Test 11.2.1 : Chaque balise <label> permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?
Test 11.2.2 : Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?
Test 11.2.3 : Chaque étiquette implémentée via l'attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?
Test 11.4.2 : Chaque étiquetteaccolée à un champ (à l'exception des case à cocher, bouton radio ou balise ayant un attribut WAI-ARIA role="checkbox", role="radio" ou role="switch"), vérifie-t-elle ces conditions (hors cas particuliers) ?
Test 11.4.3 : Chaque étiquetteaccolée à un champ de type checkbox ou radio ou à une balise ayant un attribut WAI-ARIA role="checkbox", role="radio" ou role="switch", vérifie-t-elle ces conditions (hors cas particuliers) ?
Les champs de même nature sont regroupés dans une balise possédant un attribut WAI-ARIA role="group".
Les champs de même nature de type radio (<input type="radio"> ou balises possédant un attribut WAI-ARIA role="radio") sont regroupés dans une balise possédant un attribut WAI-ARIA role="radiogroup" ou role="group".
Le champ dispose de l'attribut aria-invalid="true".
Test 11.10.7 : Les champs ayant l'attribut aria-invalid="true" dont la saisie requiert un type de données et/ou de format obligatoire vérifient-ils une de ces conditions ?
Test 11.11.2 : Pour chaque erreur de saisie, des exemples de valeurs attendues sont-ils suggérés, si nécessaire ?
Critère 11.12 [AA] Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?
Test 11.12.1 : Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou un examen, ou dont la validation a des conséquences financières ou juridiques, la saisie des données vérifie-t-elle une de ces conditions ?
L'utilisateur peut vérifier et corriger les données avant la validation d'un formulaire en plusieurs étapes.
Un mécanisme de confirmation explicite, via une case à cocher (balise <input> de type checkbox ou balise ayant un attribut WAI-ARIA role="checkbox") ou une étape supplémentaire, est présent.
Test 11.12.2 : Chaque formulaire dont la validation modifie ou supprime des données à caractère financier, juridique ou personnel vérifie-t-il une de ces conditions ?
Un mécanisme permet de récupérer les données supprimées ou modifiées par l'utilisateur.
Un mécanisme de demande de confirmation explicite de la suppression ou de la modification, via un champ de formulaire ou une étape supplémentaire, est proposé.
Critère 11.13 [AA] La finalité d'un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l'utilisateur ?
Test 11.13.1 : Chaque champ de formulaire dont l'objet se rapporte à une information concernant l'utilisateur vérifie-t-il ces conditions ?
Faciliter la navigation dans un ensemble de pages par au moins deux systèmes de navigation différents (menu de navigation, plan du site ou moteur de recherche), un fil d’Ariane et l’indication de la page active dans le menu de navigation. Identifier les groupes de liens importants et la zone de contenu et donner la possibilité de les éviter par des liens de navigation interne. S’assurer que l’ordre de tabulation est cohérent et que la page ne comporte pas de piège au clavier.
Il est possible d'atteindre l'élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation.
L'utilisateur est informé d'un mécanisme fonctionnel permettant d'atteindre au clavier l'élément suivant ou précédent pouvant recevoir le focus.
Critère 12.10 [A] Dans chaque page web, les raccourcis clavier n'utilisant qu'une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ?
Test 12.10.1 : Dans chaque page web, chaque raccourci clavier n'utilisant qu'une seule touche (lettres minuscule ou majuscule, ponctuation, chiffre ou symbole) vérifie-t-il l'une de ces conditions ?
Un mécanisme est disponible pour configurer la touche de raccourci clavier au moyen des touches de modification (Ctrl, Alt, Maj, etc).
Dans le cas d'un composant d'interface utilisateur, le raccourci clavier qui lui est associé ne peut être activé que si le focus clavier est sur ce composant.
Test 12.11.1 : Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l'activation d'un composant d'interface sont-ils, si nécessaire, atteignables au clavier ?
Vérifier que l’utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques de luminosité, des ouvertures de nouvelles fenêtres et des contenus en mouvement ou clignotants. Indiquer lorsqu’un contenu s’ouvre dans une nouvelle fenêtre et donner des informations relatives à la consultation des fichiers en téléchargement. Ne pas faire dépendre l’accomplissement d’une tâche d’une limite de temps sauf si elle est essentielle et s’assurer que les données saisies sont récupérées après une interruption de session authentifiée. S’assurer que les expressions inhabituelles et le jargon sont explicités. Proposer des versions accessibles ou rendre accessibles les documents en téléchargement.
Mots clés
Principe : Perceptible
Critère 13.1 [A] Pour chaque page web, l'utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?
Test 13.1.1 : Pour chaque page web, chaque procédé de rafraîchissement (balise <object>, balise <embed>, balise <svg>, balise <canvas>, balise <meta>) vérifie-t-il une de ces conditions (hors cas particuliers) ?
L'utilisateur peut arrêter ou relancer le rafraîchissement.
L'utilisateur peut augmenter la limite de temps entre deux rafraîchissements de dix fois, au moins.
L'utilisateur est averti de l'imminence du rafraîchissement et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant le prochain rafraîchissement.
La limite de temps entre deux rafraîchissements est de vingt heures, au moins.
Test 13.1.2 : Pour chaque page web, chaque procédé de redirection effectué via une balise <meta> est-il immédiat (hors cas particuliers) ?
Test 13.1.3 : Pour chaque page web, chaque procédé de redirection effectué via un script vérifie-t-il une de ces conditions (hors cas particuliers) ?
L'utilisateur peut arrêter ou relancer la redirection.
L'utilisateur peut augmenter la limite de temps avant la redirection de dix fois, au moins.
L'utilisateur est averti de l'imminence de la redirection et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant la prochaine redirection.
La limite de temps avant la redirection est de vingt heures, au moins.
Test 13.1.4 : Pour chaque page web, chaque procédé limitant le temps d'une session vérifie-t-il une de ces conditions (hors cas particuliers) ?
L'utilisateur peut supprimer la limite de temps.
L'utilisateur peut augmenter la limite de temps.
La limite de temps avant la fin de la session est de vingt heures au moins.
Critère 13.2 [A] Dans chaque page web, l'ouverture d'une nouvelle fenêtre ne doit pas être déclenchée sans action de l'utilisateur. Cette règle est-elle respectée ?
Test 13.2.1 : Dans chaque page web, l'ouverture d'une nouvelle fenêtre ne doit pas être déclenchée sans action de l'utilisateur. Cette règle est-elle respectée ?
Critère 13.3 [A] Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Test 13.3.1 : Dans chaque page web, chaque fonctionnalité de téléchargement d'un document bureautique vérifie-t-elle une de ces conditions ?
Le document en téléchargement est compatible avec l'accessibilité.
Il existe une version alternative du document en téléchargement compatible avec l'accessibilité.
Il existe une version alternative du document en téléchargement au format HTML.
La version compatible avec l'accessibilité offre la même information.
La version alternative au format HTML est pertinente et offre la même information.
Critère 13.5 [A] Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) a-t-il une alternative ?
Test 13.5.1 : Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) vérifie-t-il une de ces conditions ?
Un attribut title est disponible.
Une définition est donnée par le contexte adjacent.
Critère 13.6 [A] Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?
Test 13.6.1 : Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) vérifie-t-il une de ces conditions ?
Le contenu de l'attribut title est pertinent.
La définition donnée par le contexte adjacent est pertinente.
Test 13.7.1 : Dans chaque page web, chaque image ou élément multimédia (balise <video>, balise <img>, balise <svg>, balise <canvas>, balise <embed> ou balise <object>) qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-elle une de ces conditions ?
La fréquence de l'effet est inférieure à 3 par seconde.
La surface totale cumulée des effets est inférieure ou égale à 21 824 pixels.
La fréquence de l'effet est inférieure à 3 par seconde.
La surface totale cumulée des effets est inférieure ou égale à 21 824 pixels.
Critère 13.8 [A] Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur ?
Test 13.8.1 : Dans chaque page web, chaque contenu en mouvement, déclenché automatiquement, vérifie-t-il une de ces conditions ?
La durée du mouvement est inférieure ou égale à 5 secondes.
L'utilisateur peut arrêter et relancer le mouvement.
L'utilisateur peut afficher et masquer le contenu en mouvement.
L'utilisateur peut afficher la totalité de l'information sans le mouvement.
Test 13.8.2 : Dans chaque page web, chaque contenu clignotant, déclenché automatiquement, vérifie-t-il une de ces conditions ?
La durée du clignotement est inférieure ou égale à 5 secondes.
L'utilisateur peut arrêter et relancer le clignotement.
L'utilisateur peut afficher et masquer le contenu clignotant.
L'utilisateur peut afficher la totalité de l'information sans le clignotement.
Critère 13.9 [AA] Dans chaque page web, le contenu proposé est-il consultable quelle que soit l'orientation de l'écran (portrait ou paysage) (hors cas particuliers) ?
Test 13.9.1 : Dans chaque page web, chaque contenu vérifie-t-il ces conditions (hors cas particuliers) ?
La consultation est possible quel que soit le mode d'orientation de l'écran.
Le contenu proposé reste le même quel que soit le mode d'orientation de l'écran utilisé même si sa présentation et le moyen d'y accéder peut différer.
Critère 13.10 [A] Dans chaque page web, les fonctionnalités utilisables ou disponibles au moyen d'un geste complexe peuvent-elles être également disponibles au moyen d'un geste simple (hors cas particuliers) ?
Test 13.10.1 : Dans chaque page web, chaque fonctionnalité utilisable ou disponible suite à un contact multipoint est-elle également utilisable ou disponible suite à un contact en un point unique de l’écran (hors cas particuliers) ?
Test 13.10.2 : Dans chaque page web, chaque fonctionnalité utilisable ou disponible suite à un geste basé sur le suivi d'une trajectoire sur l'écran est-elle également utilisable ou disponible suite à un contact en un point unique de l'écran (hors cas particuliers) ?
Critère 13.11 [A] Dans chaque page web, les actions déclenchées au moyen d'un dispositif de pointage sur un point unique de l'écran peuvent-elles faire l'objet d'une annulation (hors cas particuliers) ?
Test 13.11.1 : Dans chaque page web, les actions déclenchées au moyen d'un dispositif de pointage sur un point unique de l'écran vérifient-elles l'une de ces conditions (hors cas particuliers) ?
L'action est déclenchée au moment où le dispositif de pointage est relâché ou relevé ;
L'action est déclenchée au moment où le dispositif de pointage est pressé ou posé puis annulée lorsque le dispositif de pointage est relâché ou relevé ;
Un mécanisme est disponible pour abandonner (avant achèvement de l'action) ou annuler (après achèvement) l'exécution de l'action.
Critère 13.12 [A] Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l'appareil ou vers l'appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ?
Test 13.12.1 : Dans chaque page web, les fonctionnalités disponibles en bougeant l'appareil peuvent-elles être accomplies avec des composants d'interface utilisateur (hors cas particuliers) ?
Test 13.12.2 : Dans chaque page web, les fonctionnalités disponibles en faisant un geste en direction de l'appareil peuvent-elles être accomplies avec des composants d'interface utilisateur (hors cas particuliers) ?
Test 13.12.3 : L'utilisateur a-t-il la possibilité de désactiver la détection du mouvement pour éviter un déclenchement accidentel de la fonctionnalité (hors cas particuliers) ?
RGAA