Critères de conformité triple AAA

Normes pour l’accessibilité numérique

pour un meilleur référencement et une démarche d’égalité

L’accessibilité numérique vise à garantir que tous les utilisateurs, y compris les personnes en situation de handicap (malvoyants, daltoniens, dyslexiques, personnes âgées), puissent accéder et interagir avec les services web sans obstacles. Aujourd’hui, avoir un site web accessible va au-delà des exigences légales : c’est crucial pour un numérique inclusif. L’accessibilité permet à tous, y compris aux personnes handicapées, d’interagir sans obstacle avec le contenu web via des outils comme la navigation au clavier ou des lecteurs d’écran.

Dans cet exemple, nous aborderons des exemples concrets de sites accessibles, les fonctionnalités essentielles d’accessibilité, et partagerons les meilleures pratiques pour respecter des normes telles que l’ADA et l’EAA. Nous présenterons des designs réussis et analyserons les erreurs courantes pour vous aider à créer un site à la fois conforme et centré sur l’utilisateur.

Atteindre le niveau AAA implique le respect de l’ensemble des critères A et AA. En pratique, certains critères AAA sont difficiles à appliquer à tous les contenus (vidéos en langue des signes, lectures complexes, etc.), c’est pourquoi le niveau AA est souvent recommandé comme objectif réaliste pour les projets web. Pour être conforme AAA, il ne suffit pas d’appliquer quelques critères, c’est l’ensemble de la page (ou de l’application) qui doit répondre aux exigences.

Chiffres et état de la conformité :

Seuls 7% des sites sont totalement conformes, 60% partiellement conformes, et 33% non conformes au 1er septembre 2023.
La législation impose désormais la conformité des sites publics et privés, surtout ceux ayant un chiffre d’affaires élevé en France.
12 millions de personnes en situation de handicap.
85% des handicaps sont invisibles
1 personne sur 4 chez les séniors

Fonctionnalités clés en matière

d’accessibilité web

Normes et standards à respecter

Principales normes : WCAG 2.1 (W3C), EN 301 549 (norme européenne), RGAA (référentiel français avec 106 critères de contrôle).
Principes fondamentaux : rendre le contenu perceptible, utilisable, compréhensible, robuste.
L’utilisation de WAI-ARIA permet d’améliorer la sémantique et l’accessibilité des contenus riches.

Les fonctionnalités d’accessibilité rendent un site utilisable par tous, quelles que soient les capacités. Elles éliminent les barrières numériques et optimisent la navigation pour garantir que les utilisateurs handicapés puissent facilement interagir avec le contenu.

Plusieurs fonctionnalités clés assurent qu’un site réponde aux besoins d’un public varié. En intégrant les éléments suivants, vous créez un environnement numérique plus inclusif et convivial pour tous :

Navigation adaptée au clavier. Assurez-vous que tous les éléments interactifs — tels que les formulaires, boutons et menus — soient entièrement utilisables sans souris, afin de soutenir les utilisateurs naviguant uniquement au clavier.

Optimisation pour les lecteurs d’écran. Utilisez des balises HTML sémantiques et fournissez des étiquettes ARIA descriptives pour aider les lecteurs d’écran à interpréter correctement le contenu et guider les utilisateurs efficacement dans la structure de la page.

Visuels à fort contraste. Maintenez un contraste élevé entre le texte et l’arrière-plan pour améliorer la lisibilité, notamment pour les personnes malvoyantes, daltoniennes ou utilisant des écrans dans des conditions lumineuses difficiles.

Textes alternatifs pour les images. Fournissez des descriptions alternatives significatives pour les images, icônes et autres éléments visuels, afin que les utilisateurs de lecteurs d’écran puissent comprendre le contexte visuel.

Structure claire et cohérente. Organisez le contenu à l’aide de hiérarchies de titres logiques, de listes structurées et de menus intuitifs pour faciliter la navigation pour tous les visiteurs.

Taille de texte ajustable. Permettez aux utilisateurs d’agrandir le texte facilement sans casser la mise en page, pour garantir une bonne lisibilité sur différents appareils et préférences personnelles.

Flexibilité et adaptabilité. Des designs qui s’adaptent parfaitement à divers appareils, orientations et préférences de mise à l’échelle du texte sans perte de fonctionnalité.

Cohérence et prévisibilité. Des schémas de couleurs, modèles de mise en page et structures de navigation uniformes sur toutes les pages.

Clarté et simplicité. Peu d’encombrement, des espaces blancs suffisants et une distinction nette entre les sections de contenu pour améliorer la lisibilité et la compréhension.

Informations perceptibles. Les contenus importants sont transmis de manière claire via plusieurs canaux sensoriels (texte, visuels, son), sans dépendre uniquement des couleurs ou du son.

Source > Elfsight.com

Vidéos parlant de l’accessibilité

Voir la vidéo

Les principaux handicaps

Handicaps visuels : Certains utilisateurs ont un handicap visuel qui limite leur capacité à voir clairement ou à percevoir les contrastes de couleur. Une variété de personnes peuvent appartenir à cette catégorie, y compris les utilisateurs aveugles ou ceux atteints de daltonisme. Pour les utilisateurs ayant des handicaps visuels, tu pourrais utiliser des descriptions audio ou des combinaisons de couleurs accessibles (par exemple, éviter d’utiliser du texte foncé sur des couleurs de fond sombres).
Handicaps auditifs : Les utilisateurs avec des handicaps auditifs peuvent inclure des personnes sourdes ou malentendantes (HoH). Les sous-titres pour le contenu audio peuvent offrir à ces utilisateurs une expérience plus accessible.
Handicaps physiques : Certaines personnes ont des handicaps de mobilité qui peuvent affecter leur dextérité et leur capacité à effectuer des mouvements précis, rendant parfois difficile l’utilisation d’une souris. Ceux ayant des handicaps physiques peuvent être des utilisateurs de technologies d’assistance. Assure-toi que ton site est correctement codé pour les dispositifs d’assistance afin de fournir un contenu accessible aux utilisateurs ayant des handicaps physiques.
Handicaps cognitifs : Certains utilisateurs peuvent avoir des déficiences cognitives comme la dyslexie, la démence ou un trouble du traitement auditif. Tu pourrais envisager d’utiliser une police spécifique, comme Dyslexie. Tu devrais également t’assurer que tout contenu audio dispose d’un transcript disponible pour ceux ayant des troubles du traitement auditif.

Mai aussi > Moteur > Parole > Psychique > Cognitif > Intellectuel > Troubles de santé et Polyhandicap

Récapitulatif

Bonnes pratiques recommandées

Organisation claire des titres et sous-titres, navigation accessible, messages explicites, formats de date usuels.
Structure hiérarchisée des contenus, balises alt adaptées selon le type d’images, couleurs visibles pour tous.
Texte simple et accessible, taille de police ajustable, limitation de la longueur des lignes.
Liens explicites et soulignés, boutons distincts des liens, contenu multimédia contrôlable, avec sous-titres et audio-description.

Outils et formation

Outils comme WAVE Evaluation Tool et HeadingsMap recommandés pour vérifier l’accessibilité.
Ressources et extensions (playlist YouTube, Silktide Accessibility Checker) utiles pour se former et tester la conformité.

Fonction	Description
Structures de navigation logiques	Les menus, liens et boutons sont faciles à repérer, présentés de manière cohérente et entièrement accessibles via la navigation clavier.
Boutons d’appel à l’action clairs	Les actions importantes sont mises en valeur par des boutons bien étiquetés, de taille suffisante et faciles à activer sans mouvements précis de la souris.
Formulaires minimalistes et conviviaux	Les formulaires utilisent des étiquettes claires, un ordre logique des tabulations et offrent des messages d’erreur ou des astuces pour aider les utilisateurs de technologies d’assistance.
Indicateurs de focus visibles	Les éléments interactifs affichent une bordure ou un style visible lors de la navigation clavier, permettant aux utilisateurs de localiser leur position sur la page.
Contenus multimédias accessibles	Les vidéos comportent des sous-titres et des transcriptions ; les contenus audio proposent des alternatives textuelles pour les utilisateurs ayant une déficience auditive.

Quelques sites aux normes AAA

En savoir plus

Principes des normes WCAG AAA

Les critères AAA sont répartis selon trois grands principes fondamentaux :

Perceptible : les contenus doivent être présentés de façon à être perçus par tous.
Utilisable : tous les éléments doivent pouvoir être utilisés et manipulés.
Compréhensible : les interfaces et interactions doivent rester faciles à comprendre.

Liste des principaux critères de niveau AAA

Voici les exigences clés (détaillées suivant la version WCAG 2.1/2.2), par principe :

Perceptible

- 1.2.6 Langue des signes (préenregistrée) : proposer une vidéo en langue des signes pour le contenu audio préenregistré.
- 1.2.7 Audio-description (étendue) : fournir une audio-description étendue pour les vidéos préenregistrées.
- 1.2.8 Version alternative pour média temporel : proposer une version texte intégrale du contenu multimédia.
- 1.2.9 Seulement audio (en direct) : fournir une transcription pour les contenus audio diffusés en direct.
- 1.3.6 Identifier la fonction : chaque composant d’interface doit être portant une identification claire de sa fonction.
- 1.4.6 Contraste renforcé : le ratio de contraste texte/fond doit atteindre 7:1 minimum.
- 1.4.7 Arrière-plan sonore faible : garantir que l’arrière-plan sonore ne gêne pas l’écoute du contenu.
- 1.4.8 Présentation visuelle : fournir différentes présentations pour la mise en page du texte.
- 1.4.9 Aucun texte-sous-forme-d’image, sauf impossibilité technique.

Utilisable

2.1.3 Clavier, sans exception : toutes les fonctions sont utilisables au clavier uniquement, sans exception.
2.2.3 Pas de temps limite imposé aux utilisateurs.
2.2.4 Pas d’interruptions : l’utilisateur contrôle les interruptions.
2.2.5 Authentification renouvelée : éviter de redemander une authentification, ou permettre sa reprise aisée.
2.2.6 Délais d’expiration entièrement personnalisables.
2.3.2 Aucun flash supérieur à trois par seconde.
2.3.3 Animation contrôlable : toute animation issue d’une interaction utilisateur doit être désactivable.
2.4.8 Indication de localisation : fournir une information claire sur la position de la page dans le site.
2.4.9 Fonction précise des liens : un lien textuel doit indiquer précisément sa fonction.
2.4.10 Titres de section : chaque section a un titre.
2.5.5 Taille des cibles interactives suffisante.
2.5.6 Modalités d’entrée alternatives pour tous les contrôles.

Compréhensible

3.1.3 Explication des mots rares fournie.
3.1.4 Explication systématique des abréviations utilisées.
3.1.5 Niveau de lecture : le texte peut être compris par des personnes ayant un niveau d’études primaires.
3.1.6 Indication de prononciation si utile à la compréhension.
3.2.5 Aucune modification automatique sur une action utilisateur (sauf demande).
3.3.5 Fournir une aide active à l’utilisateur dans les formulaires.
3.3.6 Prévention maximale des erreurs de saisie, y compris conseil avant la validation.

Nouveautés WCAG 2.2 (critères AAA)

2.4.12 Focus non masqué (amélioré) : l’indicateur de focus doit être toujours visible même sur défilement.
2.4.13 Apparence du focus renforcée.
3.3.9 Authentification accessible (améliorée) : procédure d’identification utile même aux personnes ayant handicap moteur ou cognitif.

Par exemple, pour un niveau A, tous les contenus audio sont sous-titrés. Le niveau AA suppose que toutes les vidéos ont une audiodescription et le niveau AAA demande que tous les contenus soient accompagnés d’une version en langue des signes françaises.

Méthodes concrètes pour chaque axe

Voici les techniques pratiques permettant d’atteindre la conformité AAA pour un site ou une application web. Ce niveau est le plus haut des normes WCAG et requiert des méthodes spécifiques et une rigueur technique sur l’ensemble du contenu.

Audit d’accessibilité initial

Réaliser un audit complet, mêlant outils automatiques (type Pa11y, Axe, WAVE) et tests manuels, afin d’identifier tous les points à corriger.
Prioriser les ajustements selon l’impact sur l’expérience utilisateur (navigation, contrastes, alternatives textuelles).

Structure et sémantique du code

Utiliser une structure HTML sémantique stricte : titres, listes, tableaux correctement balisés.
Vérifier que chaque élément d’interface est accessible au clavier, avec une gestion du focus visible et logique.
Fournir une hiérarchie visuelle et logique claire, y compris des titres de section explicites.

Présentation et contrastes renforcés

Garantir un contraste des couleurs supérieur à 7:1 pour tous les textes et éléments interactifs.
Proposer des présentations alternatives pour le texte (mode lecture, choix de tailles ou polices), et éviter tout texte sous forme d’image sauf impératif technique AAA.
S’assurer que tous les éléments visuels porteurs d’information ont des alternatives non visuelles (texte, formes distinctes, etc.).

Alternatives multimedia avancées

Fournir une audio-description étendue pour toutes les vidéos préenregistrées.
Proposer systématiquement une transcription complète pour tous les contenus audio, y compris les directs, et une version vidéo en langue des signes.
Gérer les bruits de fond et permettre leur désactivation.

Accessibilité des contenus interactifs

Proposer une taille de cible suffisante pour tous les éléments cliquables ou interactifs.
Rendre toutes les fonctionnalités contrôlables au clavier sans exception, et offrir une gestion personnalisable des délais ou interruptions.
Fournir une explication contextuelle pour chaque fonction et chaque lien.

Contenus textuels et assistance

Expliquer les mots rares et abréviations dès leur première apparition.
Rédiger un contenu accessible à un niveau élémentaire de lecture (niveau primaire).
Préciser la prononciation des mots où nécessaire.

Formulaires et erreurs

Proposer une aide active et détaillée sur tous les champs de formulaire.
Prévoir la prévention et la gestion explicite des erreurs : conseils avant validation et recommandations en cas de saisie incorrecte.

Ressources recommandées

Se baser sur des guides concrets comme le RGAA (en France), qui propose des fiches méthodes par technologie et par fonctionnalité.
Consulter la liste officielle des techniques WCAG proposées par le W3C, avec explications et exemples d’implémentation.

Chaque technique doit être testée et documentée dans la déclaration d’accessibilité du site, avec preuve d’audit et d’application réelle.

Pour la liste complète et à jour des critères de succès AAA pour chaque version, il est recommandé
de consulter la traduction officielle W3C ou les tableaux RGAA dédiés.

Critères de conformité triple AAA