Cette page est actuellement en cours de rédaction. Ainsi les critères du RGAA listés ne sont pas encore tous détaillés.
Depuis 2021, les audits d’accessibilité sont obligatoires et ont une validité de 3 ans pour un coût d'environ 2 500 à 4 500€.
Depuis 2024, un gendarme a été nommé, il s'agit de l'ARCOM, les contrôles ne seront plus un mythe (et tant mieux !).
Nous vous proposons d'effectuer nous-même ces audits, cela correspond à une économie d'environ 165 000 € par an pour nos adhérents (200 sites x 2500€ / 3 ans). Etant donné la charge de travail que représentent ces audits, nous nous limiterons à un audit par site tous les 3 ans.
Cette page détaille les 33 critères (sur 106) que vous maitrisez et sur lesquels vous devez intervenir pour vous mettre en conformité. Les autres critères seront pris en charge par les salariés de l’association et corrigés au plus tôt s'ils ne sont pas conformes.
Il est nécessaire que toutes les pages de vos sites soient corrigées pour assurer une conformité optimale (et éviter de conserver une mauvaise note pendant 3 ans). Dans tous les cas, vous serez contraints de corriger tous les points non conformes pour le prochain audit, autant le faire dès maintenant !
1. Images
1.1 - Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Chaque image porteuse d'information doit avoir une description qui permet de décrire le contenu de l'image pour qu'une personne malvoyante puisse "imaginer" cette ressource (Idem pour chaque zone d'une image découpée en zones réactives).
Après quelques recherches sur des sites dédiés à l'accessibilité, il n'est pas obligatoire (voire pénalisant) de spécifier une légende à chaque image, cela dépend du contexte, du contenu et de la page !!! En effet, si vous ajoutez un texte qui reprend toutes les informations d'une galerie photo, il n'est pas nécessaire de positionner une légende sur chacune de ces images. Le blog "Empreinte digitale" a publié un article qui permet de mieux comprendre la problématique de l'accessibilité des images.
Ex 1 : Vous faites une galerie photo qui présente la salle des fêtes dans une rubrique de location. Si vous ajoutez un texte au dessus de la galerie photo qui détaille le contenu de la salle (cuisine avec tel et tel équipement, présence d'un sas d'entrée, d'une estrade, etc), vous n'avez pas besoin d'intégrer une légende à chaque image. La personne malvoyante n'aura qu'à écouter le texte descriptif pour comprendre toutes les informations des photos.
A contrario, si vous positionnez une légende à chaque image. La personne va devoir “attendre” la lecture de toutes les légendes indépendantes pour comprendre toutes les informations des photos ce qui sera probablement moins efficace que de lire un petit texte.
Ex 2 : Vous faites une page qui présente la salle des fêtes avec une photo de l'entrée de la salle des fêtes en illustration. Il est inutile de spécifier une légende puisque l'image est uniquement décorative et ne présente pas d'information.
Ex 3 : Vous faites une page qui présente la salle des fêtes avec une photo qui représente une statue emblématique située dans l'entrée de la salle des fêtes. Si vous ne parlez pas de cette statue dans le texte, il est pertinent d'expliquer la photo et de présenter la statue en légende de la photo.
Ex 4 : Vous faites une page qui présente un événement avec une affiche de cet événement en décoration. Il est nécessaire de reprendre l'ensemble des informations de l'affiche dans le texte adjacent de l'événement. En effet, positionner ces informations dans la légende ne serait efficace pour aucun visiteur.
Cas particulier des diaporamas (carrousels d'images) : étant donné leur structure actuelle (que nous avons prévu de retravailler prochainement), vos diaporamas doivent être utilisés uniquement à des fins décoratives, et seront présentés comme tel aux outils d'assistance. Si vous devez présenter un ensemble d'images porteuses d'information, utilisez une galerie photo.
1.3 - Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
La description des images doit être pertinente et complète (idéalement sous forme de phrase) sur chacune des images. Spécifier "Brocante 1", "Brocante 2", ... n'a aucune utilité. Une image avec un telle description sera considérée comme non conforme.
2. Cadres
Les cadres correspondent aux iframe que certains rédacteurs peuvent intégrer dans leurs pages. Il s'agit, le plus souvent, d'intégrations de modules développés par des prestataires externes (intégration de vidéos YouTube, prise de rendez-vous, publications des actes, calendrier d'occupation de salle, ...).
2.1 - Chaque cadre a-t-il un titre de cadre ?
Chaque cadre doit être intégré avec un titre qui permet au visiteur de l'identifier précisément.
Pour les contenus de type cartographie : le titre du cadre est celui du contenu, qui devient obligatoire. Merci de le compléter et de vérifier sa pertinence sur toutes les cartes de votre site.
Pour les contenus de type vidéo : un champ “titre” a été ajouté, il est obligatoire. Merci de le renseigner sur toutes les vidéos de votre site.
Pour les vidéos dans les actualités : un champ “titre” a été ajouté et il est obligatoire dès l'instant où un identifiant de vidéo est renseigné, merci de modifier toutes les actualités encore actives comportant des vidéos dans votre site.
Nous pouvons vous donner la liste de toutes les pages et actualités concernées si besoin.
2.2 - Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ?
Le titre de ce cadre doit être pertinent. Il doit permettre de comprendre le sujet de la carte, de la vidéo ou du contenu externe.
3. Couleurs
3.2 - 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) ?
Grâce au module de coloration que nous avons développé, vous pouvez changer les couleurs de votre site. Ces couleurs doivent permettre un contraste suffisant entre la police et la couleur de fond. Vous trouverez, dans le module, des liens vous permettant de vérifier ce contraste. Ces liens utilisent l'outil suivant : https://coolors.co/contrast-checker.Pour rappel, une note de 4.50 minimum est souhaitée. Les couleurs comme le bleu ciel (ex: https://coolors.co/contrast-checker/ffffff-49a4ac) ou le jaune (ex: https://coolors.co/contrast-checker/ffffff-d3c73c) sont donc déconseillées. En cas de volonté d'utiliser certaines couleurs claires qui ne permettent un contraste suffisant, appelez nous, nous pouvons changer la couleur de la police de certains éléments pour améliorer ce contraste.
3.3 - 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) ?
Pour les utilisateurs ayant les droits d'intégrer du HTML ou pour les collectivités qui ont souhaité avoir des modifications sur la feuille de style, il est nécessaire de vérifier que les éléments d'interface (boutons, bandeaux, titres, ...) sont suffisamment contrastés.
4. Multimédia
Le RGAA désigne par “media temporel” un élément audio ou vidéo qui se déroule dans le temps. Un média temporel peut être diffusé en temps réel ou être proposé en lecture de manière asynchrone (média pré-enregistré). Cette documentation n'aborde que les média pré-enregistrés car la version actuelle du RGAA ne comporte aucun critère concernant la diffusion en direct.
Dans nos sites TYPO3, 3 types de contenus sont concernés par ces critères : le lecteur audio, l'intégration de vidéos tierces (YouTube, Dailymotion ou Viméo) et la bannière d'accueil (module “Raccourcis / Recherche”) qui permet de positionner une vidéo de décoration.
En résumé :
Lecteur audio
Vous devez fournir une alternative textuelle, jouxtant le lecteur, de tout ce qui est dit dans la bande son.
Intégration de vidéos tierces
La vidéo doit être conforme aux critères ci-dessous. Si vous ne pouvez pas la mettre en conformité, ne l'intégrez pas et faites un lien qui permet d'aller la consulter directement sur la plateforme tierce. En effet, ces plateformes de diffusion vidéo permettent aux spectateurs d'afficher une transcription textuelle de la vidéo en cours de lecture. Cette transcription n'est cependant consultable que depuis les sites de ces plateformes. Selon la plateforme vidéo, la transcription textuelle peut être autogénérée mais ce n'est pas recommandé car elle n'est pas forcément fiable et ne pourra certainement pas décrire le contexte. Vous devrez plutôt créer votre propre fichier de transcription textuelle que vous associerez à la vidéo depuis l'interface d'administration fournie par la plateforme vidéo concernée.
Voici par exemple le guide officiel de Google pour ajouter une transcription sur la plateforme Youtube.
Vidéos de décoration du module “Raccourcis / Recherche”
Les vidéos de ce module ne doivent être utilisées qu'à des fins de décoration et ne seront pas présentées aux usagers utilisant des outils d'assistance. Si vous insérez des informations dans ces vidéos, vous devrez obligatoirement fournir une alternative pour accéder à ces informations. Par exemple, si vous mettez en avant un évènement d'agenda dans la vidéo, l'événement en question doit être consultable depuis l'agenda du site.
Critères du RGAA concernant les médias temporels
Une transcription textuelle est un contenu textuel associé à un média audio ou video et donne accès à l’utilisateur (de manière indépendante de la consultation du média) à :
- la parole : la totalité de ce qui y est exprimé oralement
- le contexte : toutes les informations descriptives nécessaires à une compréhension équivalente de la scène ou de l’action
Ces informations textuelles doivent être présentées dans l’ordre chronologique de leur apparition dans le média.
La transcription textuelle du contenu audio ou video peut être soit contenue intégralement dans la page du média sous forme de texte et clairement identifiable, soit reprise dans un document PDF adjacent au contenu, et dont le lien de consultation doit être clairement identifiable.
Dans le cas des videos uniquement, l'audiodescription fournit du contenu aux personnes aveugles et aux autres personnes qui ne peuvent pas voir la vidéo convenablement. Elle décrit l’information visuelle nécessaire à la compréhension du contenu et fournit de l’information à propos des actions, des personnages, des changements de scènes, du texte apparaissant à l’écran et d’autres contenus visuels.
Si la vidéo contient des informations visuelles nécessaires pour comprendre le message communiqué par la vidéo, référez-vous aux critères 4.5 et 4.6.
Vérifier que la transcription textuelle présente dans la page contenant le média ou que le document PDF de transcription textuelle correspondent bien au media associé.
Chaque vidéo doit contenir des sous-titres correspondant à tout ce qui est dit oralement ainsi qu'à tout bruit important pour comprendre l’action qui s'y déroule. Cela permet de comprendre la vidéo en l'absence de son.
L'affichage de ces sous-titres doit être synchronisé avec la vidéo.
Vérifiez que les sous-titres de la video correspondent à tout ce qui est dit oralement ainsi qu'à tout bruit important pour comprendre l’action qui s'y déroule ou la scène.
L'audiodescription d'une video est une narration sonore ajoutée à la video pour décrire les détails visuels importants qui ne peuvent être compris à partir de la piste audio principale seulement. L'audiodescription :
- fournit de l’information à propos des actions, des personnages, des changements de scènes, du texte apparaissant à l’écran et d’autres contenus visuels,
- doit être synchronisée avec la video,
- ajoute la narration durant les pauses qui existent dans le dialogue
Note : lorsque toute l’information de la vidéo est déjà donnée dans la piste audio principale, aucune audiodescription supplémentaire n’est requise.
Vérifiez que l'audiodescription de chaque vidéo fournit bien l’information à propos des actions, des personnages, des changements de scènes, du texte apparaissant à l’écran et d’autres contenus visuels.
4.7 - Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
Vérifiez qu'un passage de texte (un titre ou un paragraphe, par exemple) précède ou suit immédiatement le média audio et video et permet de l’identifier.
5. Tableaux (de données)
Qu’est-ce qu’un tableau de données ?
Un tableau de données contient des informations organisées en deux dimensions (colonnes et lignes). Il doit être équipé d’en-têtes de colonne et/ou d’en-têtes de ligne.
| Jours | Horaires habituels | Vacances scolaires |
|---|---|---|
| Lundi | 12 h – 19 h | Fermé |
| Mardi | 12 h – 19 h | 12 h – 18 h |
| Mercredi | 12 h – 19 h | 12 h – 18 h |
Qu'est-ce qu'un tableau de données “complexe” ?
Un tableau de données est considéré comme complexe si :
- il contient des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne
- il possède des cellules fusionnées
| Hôtels - avril-septembre 2022 | Camping - avril-septembre 2022 | Autres hébergements collectifs de tourisme - avril-septembre 2022 | ||||
|---|---|---|---|---|---|---|
| Nuitées totales (en milliers) | Évolution des nuitées 2022/2019 (en %) | Nuitées totales (en milliers) | Évolution des nuitées 2022/2019 (en %) | Nuitées totales (en milliers) | Évolution des nuitées 2022/2019 (en %) | |
| Bretagne | 5 173 | -0,4 | 13 641 | 12,1 | 3 040 | 1,0 |
| Côtes-d’Armor | 828 | 4,4 | 2 332 | 14,1 | 388 | -8,5 |
| Finistère | 1 225 | -4,7 | 4 892 | 10,4 | 1 108 | 2,8 |
| Ille-et-Vilaine | 1 857 | -0,3 | 1 367 | 12,5 | 677 | 5,9 |
| Morbihan | 1 263 | 0,8 | 5 050 | 12,7 | 868 | -0,4 |
| France métropolitaine | 125 721 | -0,9 | 135 708 | 7,5 | 58 530 | -1,7 |
Inconvénients des tableaux
Les tableaux peuvent représenter une façon d'intégrer des données mais ils ont des inconvénients majeurs en termes d'accessibilité :
- Les tableaux présentent les données de façon non optimisée pour les malvoyants, en effet, le synthétiseur vocal va lire ligne par ligne le contenu. Ce sens de lecture ne va pas permettre à une personne malvoyante de rechercher des cases facilement.
- Les tableaux ont un comportement responsive désastreux : En effet, si vous intégrez trop de colonnes ou trop de données, le tableau ne va pas "rentrer" dans la largeur disponible sur téléphone par exemple, ce qui va "casser" l'affichage du site. Si vous intégrez un tableau, vérifiez donc son affichage sur un téléphone.
Evitez les tableaux (si possible)
De manière générale, évitez d'utiliser des tableaux autant que possible.
Si vous devez intégrer un tableau simple, il est fréquemment possible de transformer ces données en une liste à puce ou une phrase.
Si vous devez intégrer un tableau complexe, essayez de découper ce tableau en plusieurs tableaux simples (ou listes à puce ou textes).
Attention, dans un passé fort fort lointain, les tableaux pouvaient être utilisés pour créer une présentation en colonnes. Ce n'est plus valable depuis les années 2000 ! N'utilisez jamais un tableau pour changer la présentation des contenus ! Pour ce cas de figure, nous avons créé un contenu qui permet de séparer l'espace des contenus en plusieurs colonnes responsives.
Critères du RGAA concernant les tableaux
5.1 - Chaque tableau de données complexe a-t-il un résumé ?
L'éditeur de texte de TYPO3 permet d'ajouter un résumé à un tableau, grâce à la fonctionnalité “Activer la légende”. Vous devez utiliser cette fonctionnalité dès lors que votre tableau est complexe.
Nous vous recommandons d'ajouter un résumé à chaque tableau, qu'il soit complexe ou simple, car celui-ci fait également office de titre (cf. critère 5.4) et permet donc de présenter les données que contient le tableau, et d'en expliquer sa structure, c’est-à-dire la manière dont sont répartis les en-têtes ou les données.
5.2 - Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ?
Vérifiez que le résumé donne le titre du tableau et explique sa structure, c’est-à-dire la manière dont sont répartis les en-têtes ou les données.
Dans le cas des tableaux insérés avec l'éditeur de texte de TYPO3, le résumé du tableau fait office de titre.
5.5 - Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?
Dans le cas des tableaux insérés avec l'éditeur de texte de TYPO3, le résumé du tableau fait office de titre, vérifiez donc que les critères 5.1 et 5.2 sont bien respectés avec un résumé de tableau pertinent.
L'éditeur de texte de TYPO3 permet d'indiquer qu'une colonne ou un ligne contient uniquement des en-têtes. Vous devez obligatoirement utiliser cette fonctionnalité pour identifier les en-têtes de votre tableau.
6. Liens
6.1 - Chaque lien est-il explicite (hors cas particuliers) ?
La fonction et la destination d'un lien (une page précise de votre site, un document PDF à télécharger, une page précise d'un autre site Internet) doivent être claires et évidentes pour vos usagers.
Le lien est fortement mis en évidence dans nos sites (couleur du texte, icone, soulignage du texte), il a donc une forte affordance et il est probable qu'un utilisateur pressé (la grande majorité à notre avis) lise le texte du lien avant la phrase qui le contient.
Il est impératif que le lien seul permette de comprendre l'action effectuée en cliquant sur ce lien.
Nous vous conseillons également d'inclure un verbe dans le texte du lien pour mieux préciser l'action.
Un lien long sera également plus facile à cliquer pour les personnes souffrant d'un handicap rendant difficile le pointage à la souris par exemple.
Exemple de mauvaises pratiques (intitulés de liens peu explicites et non pertinents) :
- Vous pouvez adhérer à l'association RVVN. En savoir plus
- Pour télécharger nos statuts établis en 2023, cliquez ici
- Consultez notre page LinkedIn pour découvrir les derniers sites Internet mis en ligne
Exemple de bonnes pratiques (intitulés de liens explicites et pertinents) :
6.2 - Dans chaque page web, chaque lien a-t-il un intitulé ?
Un lien peut être positionné sur différents éléments, du texte et des images par exemple.
Dans le cas des liens sur du texte, celui-ci doit être intelligible (pas de symboles ou d'expressions imprécises).
Dans le cas de la création de liens dans un module HTML, les liens sur les images doivent posséder un attribut "title" contenant une description précise de l'action du lien.
8. Éléments obligatoires
8.6 - Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Le titre de chaque page doit être clair, précis et concis. Il doit permettre de comprendre ce que l'on va trouver dans la page sans ambiguïté.
De plus, pour des raisons de compréhension et de référencement, il doit être unique pour permettre de distinguer la page de toutes les autres pages du site.
Comme évoqué en formation, une page d'un site doit permettre de créer un squelette sémantique efficace.
Chaque titre de contenu sera repris dans le sommaire de page qui permettra de naviguer plus facilement dans cette page (voir le critère 9.1).
- Vérifiez que vos pages ne contiennent pas de paragraphes vides. Ils sont parfois utilisés à mauvais escient dans le but d'aérer vos contenus par exemple. L'éditeur de texte de TYPO3 dispose d'une fonctionnalité “Afficher les blocs” qui permet de repérer ces paragraphes vides.
- Vérifiez également que vos textes ne contiennent pas d'espaces consécutifs utilisés pour créer des effets de marge ou d'alignement
- Vérifiez que vous n'utilisez pas des sauts de ligne inutiles pour espacer les contenus (ou par mégarde en fin de contenu)
- N'utilisez pas les titres des contenus à des fins typographiques, par exemple parce que la police de texte est plus grande que celle des paragraphes.
- N'utilisez pas de citation dans le but de décaler un texte sur la droite.
Pour les utilisateurs ayant les droits d'intégrer du HTML, veillez à respecter la sémantique de ce langage. Par exemple, n'utilisez pas de balise "div" pour des paragraphes mais bien la balise "p".
9. Structuration de l’information
9.1 - Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
[En cours de rédaction]
Une page Web est un document présentant divers contenus. L'utilisation appropriée de titres permet d'en comprendre la structure et l'organisation de ces contenus. Les titres permettent également aux personnes utilisant un lecteur d’écran ou d’autres technologies d’assistance :
- d'obtenir un sommaire ou une table des matières des différents contenus de la page
- de naviguer aisément parmi ces contenus
Il existe plusieurs niveaux de titres permettant ainsi de créer une hiérarchie entre les contenus. TYPO3 vous permet d'utiliser les niveaux de titres 2 à 4 (le niveau 1 étant obligatoirement réservé au titre de la page elle-même).
Voici les règles principales à respecter :
- Rédiger des titres descriptifs : un titre doit décrire de manière claire et précise la section de contenu qu’il présente
- Ordonner logiquement les titres : un contenu constituant une sous-section d'un contenu précédent ne peut pas voir un niveau de titre supérieur
- Eviter les “sauts” de titres : si un contenu possède un titre de niveau 2, le contenu suivant ne peut avoir un titre de niveau 4
Enfin, utilisez uniquement les outils fournis par TYPO3 pour gérer les titres de vos contenus (le champ “Titre” du contenu ou la fonction adéquate de l'éditeur de texte). N'essayez pas de changer l'apparence d'un texte pour le faire ressembler à un titre (par exemple en l'écrivant tout en lettres capitales et en gras), ce sera sémantiquement toujours un paragraphe et il ne participera pas à la structure de la page.
9.2 - Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
[En cours de rédaction / Ce point semble uniquement réservé à la partie technique / Nécessité de garder ce critère ?]
9.3 - Dans chaque page web, chaque liste est-elle correctement structurée ?
L'éditeur de texte de TYPO3 permet d'insérer 2 types de listes :
- liste à puces : un ensemble de pièces à fournir (l'ordre n'a pas d'importance)
- liste ordonnée : un ensemble d'étapes à réaliser dans un ordre particulier
Vous devez obligatoirement utiliser cette fonctionnalité dès lors que votre texte présente une liste d'éléments à l'usager, afin d'identifier clairement celle-ci (visuellement et dans la structure interne de la page utilisée par les outils d'assistance).
Ne listez pas vos éléments en les précédant d'un caractère particulier comme un tiret “-” ou une astérisque “*” par exemple. Cela sera présenté comme un simple paragraphe par les outils d'assistance.
9.4 - Dans chaque page web, chaque citation est-elle correctement indiquée ?
L'éditeur de texte de TYPO3 permet d'insérer des citations. Vous devez obligatoirement utiliser cette fonctionnalité dès lors que votre texte comporte une citation afin d'identifier clairement celle-ci (à la fois visuellement et dans la structure interne de la page, sur laquelle s'appuient les outils d'assistance).
13. Consultation
[En cours de rédaction]
[En cours de rédaction]
[En cours de rédaction]
[En cours de rédaction]
[En cours de rédaction]
[En cours de rédaction]
