01
La norme WCAG 2.2 - le principe
Connues sous le nom de WCAG 2.2 (Web Content Accessibility Guidelines), les recommandations pour rendre les sites internet accessibles ont été édictées par le World Wide Web Consortium (W3C) par l’entremise de l’Initiative pour l’Accessibilité numérique (le WAI).
Considérées comme la norme mondiale, les WCAG 2.2 se déclinent en trois niveaux d’accessibilité :
Le niveau A (ou simple A)
Niveau fondamental satisfaisant tous les critères d’accessibilité de priorité 1. Le site offre un accès global aux informations contenues dans les documents Web, pour un niveau d’accessibilité correct.
Le niveau AA (ou double A)
Niveau satisfaisant tous les critères d’accessibilité de priorité 1 et 2. Le niveau d’accessibilité du site est amélioré, optimisé, et l’accès aux informations qu’il contient est grandement facilité.
Le niveau AAA (ou triple A)
Niveau satisfaisant tous les critères d’accessibilité de priorité 1, 2 et 3. Le niveau d’accessibilité est excellent, et le confort de navigation est optimal pour tous les utilisateurs du site.
02
Juin 2018
Les évolutions entre la norme WCAG 2.0 et 2.1
Les règles du WCAG dans la version 2.1 sont une continuité de la version 2.0, cela veut dire que si votre site est conforme WCAG 2.1 il sera également conforme WCAG 2.0.
Cette nouvelle version est en vigueur depuis juin 2018, les audits d’accessibilité sont donc tenus de respecter cette nouvelle version.
Les 17 nouveaux critères de cette version couvrent les 3 niveaux (A, AA et AAA). Elles concernent essentiellement les interfaces mobiles, certains outils vocaux, les troubles de la vision ainsi que certains handicaps cognitifs.
Les critères de niveau A
| Critères | Recommandations d’accessibilité |
|---|---|
| Raccourcis clavier alphanumériques L’utilisation de raccourcis clavier constitués d’une seule touche de caractère peut être source de confusion pour les utilisateurs de navigation vocale, qui peuvent déclencher accidentellement une action, ou une série d’actions, en dictant une phrase ou en utilisant des commandes spécifiques. Cela peut également affecter certains handicapés moteurs qui peuvent déclencher une action en appuyant par erreur sur une touche. | --> Mettre en place un mécanisme de désactivation du raccourci ; --> Mettre en place un mécanisme de re-programmation de ce raccourci ; --> le raccourci n'est actif que lorsque celui-ci reçoit le focus. |
| Labels ou étiquettes | Il s’agit de s’assurer que le label donné à un composant correspond bien au label accessible (aria-label par exemple) afin de rendre l’activation de cet élément via la commande vocale cohérente. |
| Annulation d’une action Ce critère a pour objectif de s’assurer que les actions ne peuvent pas se déclencher accidentellement du fait d’une mauvaise gestion de l’événement déclencheur. | Un exemple d’application de ce critère serait de mettre à disposition de l’utilisateur un mécanisme d’annulation d’une action. |
| Les fonctionnalités à gestes complexes Les utilisateurs porteurs de handicap moteur peuvent être gênés lorsqu’une fonctionnalité requiert l’utilisation d’un geste complexe (plusieurs doigts par exemple). | Fournir une alternative simple d’utilisation tel que les liens et les boutons. |
| Activation par mouvement Sur mobile, certaines fonctionnalités peuvent être activées par le mouvement. | Il s’agit de s’assurer que : --> Il existe une alternative accessible pour activer la fonctionnalité ; --> Il existe un mécanisme pour désactiver l'activation par mouvement. |
Les critères de niveau AA
| Critères | Recommandations d’accessibilité |
|---|---|
| Orientation La consultation du contenu doit être indépendante de l’orientation du terminal. | Il s’agit de ne pas verrouiller l’orientation du mobile ou de la tablette, l’utilisateur doit pouvoir basculer du mode portrait au mode paysage et inversement. |
| Contenu à saisir facilement déductible La saisie des contenus d'un formulaire ne doit pas demander un effort de mémorisation soutenue. | Il s’agit de s’assurer qu’un processus d’authentification ne dépend pas uniquement de la capacité de l’utilisateur à mémoriser son mot de passe, par exemple en fournissant un moyen alternatif pour retrouver son mot de passe ou pour s’authentifier autrement. |
| Recomposition de contenu | --> Sur desktop, s'assurer que le contenu reste visible et cohérent à plus de 200% de zoom. --> Sur mobile s'assurer que le contenu reste visible et cohérent sur les plus petits écrans (w 320px;h:256px). |
| Contraste des éléments graphiques Il s’agit de s'assurer que le contraste est suffisant sur les éléments graphiques. | Deux niveaux de contrastes sont requis : 4.5 en général et 3 pour les éléments dont les dimensions sont au moins égales à 3 pixels. |
| Contraste des composants de l'interface utilisateur Il s’agit de s'assurer que le contraste est suffisant sur les composants interactifs: liens, boutons, icônes, images, etc. | Deux niveaux de contrastes sont requis : 4.5 en général et 3 pour les éléments dont les dimensions sont au moins égales à 3 pixels. |
| Adaptation du texte | Il s’agit de vérifier qu’il n’y a pas de perte de contenu lorsque l’utilisateur personnalise certaines caractéristiques du texte. |
| Contenu affiché au passage de la souris | Le contenu affiché lorsqu'un élément reçoit le curseur de la souris ou le focus, doit être : --> Ignorable : un mécanisme est prévu pour ignorer l'affichage de ce contenu ; --> Sélectionnable : il est possible de sélectionner ce contenu ; --> Persistant : le contenu reste affiché lorsqu'il reçoit le focus ou le curseur de la souris et disparaît lorsqu'il ne les reçoit pas (cas des title custom par exemple). |
Les critères de niveau AAA
| Critères | Recommandations d’accessibilité |
|---|---|
| Temps d’expiration d’une action utilisateur | Lorsqu’une action a une durée de vie limitée, s’assurer qu’il existe un mécanisme pour en avertir l’utilisateur. |
| Les animations interactives | Les animations interactives doivent pouvoir être désactivées sauf si celles-ci sont porteuses d'informations. |
| Taille du curseur | La taille du curseur ou du pointeur doit être au minimum de 44px sauf lorsqu'un mécanisme alternatif est proposé, comme un lien ou un bouton. |
| Mécanismes concurrents | Il s’agit de s’assurer que l’activation d’une fonctionnalité n’est pas dépendante d’une seule manipulation, que l’utilisateur dispose d’un moyen alternatif d’activation. Ce critère couvre aussi bien l’activation par commande vocale que par le clavier et la souris. |
| Le statut des messages Cela concerne les messages qui rendent compte d’une mise à jour de statut à la fin d’une action par exemple. | Il s’agit de s’assurer que le message est bien énoncé par les technologies d'assistance sans avoir besoin de recevoir le focus. |
03
Août 2023
Les évolutions entre la norme WCAG 2.1 et 2.2
Les règles du WCAG dans la version 2.2 sont une continuité de la version 2.0 et 2.1, cela veut dire que si votre site est conforme WCAG 2.2 il sera également conforme WCAG 2.1.
Cette nouvelle version est une ébauche des normes à venir car la version actuelle n’est pas encore définitive.
Les 9 nouveaux critères de cette version couvrent les 3 niveaux (A, AA et AAA).
Les critères de niveau A
| Critères | Recommandations d’accessibilité |
|---|---|
| Aide cohérente | Si certaines options d'aide sont fournies sur un écran (exemple : données de contact humain), ce même format doit être le même sur tous les autres écrans où l'aide est fournie. |
| Entrée redondante | Lors du remplissage d'un formulaire par étape, les données saisies ne doivent être demandées qu'une seule fois au cours du processus, sauf si cela est indispensable (exemple : ressaisir le mot de passe pour confirmation). |
Les critères de niveau AA
| Critères | Recommandations d’accessibilité |
|---|---|
| Mise au point non masquée (minimum) | Lorsque le focus visible est affiché sur un élément de l'interface, il ne peut pas être complètement masqué en raison d'autres composants de l'interface (exemple : un pied de page fixe recouvre partiellement cet élément). |
| Faire glisser les mouvements | Toutes les fonctionnalités qui dépendent d'un mouvement de glisser-déposer doivent également recevoir une méthode d'utilisation alternative afin que l'opération puisse également être effectuée par l'activation via un clic ou une touche. |
| Taille de la cible (minimum) | La taille des zones cliquables ou tactiles doit être d'au moins 24x24 pixels. La zone peut être plus petite dans certains cas, par exemple lorsqu'il existe un espacement d'au moins 24 pixels pour les zones exploitables adjacentes. |
Les critères de niveau AAA
| Critères | Recommandations d’accessibilité |
|---|---|
| Mise au point non masquée (amélioré) | Lorsque le focus visible est affiché sur un élément de l'interface, il ne peut pas être masqué du fait des autres composants de l'interface (exemple : un footer fixe recouvre entièrement cet élément). |
| Apparence du focus | Lorsque le focus visible est affiché, il doit avoir 2 pixels de largeur, il doit y avoir un espacement minimum au contenu, et le rapport de contraste avec les zones adjacentes doit être suffisant (voir les critères complets). |
| Authentification accessible (améliorée) | Le critère 3.3.8 autorise certaines exceptions. Dans ce cas, il n'y a pas d'exceptions. |
Le manquement aux obligations peut entraîner une sanction financière prononcée par le ministre chargé des personnes handicapées d’un montant de 20 000 euros par service en ligne.
Une analyse rapide et gratuite vous permettra de détecter les infractions susceptibles de vous exposer à des poursuites judiciaires.