De WCAG 2.1 à WCAG 2.2

Le World Wide Web Consortium a approuvé une nouvelle version des Web Content Accessibility Guidelines. La version 2.2 ajoute 9 critères de succès, dont 3 au niveau AAA, et 1 critère de succès est supprimé.

Changement dans les critères existants

4.1.1 Analyse syntaxique

Ce critère de succès est obsolète et a été supprimé des WCAG 2.2.

Les problèmes d'accessibilité relevés par l'analyse syntaxique mettront aussi en échec d'autres critères de succès, ce qui rend l'analyse syntaxique redondante.

Nouveaux critères de niveau A et AA

2.4.11 Focus non masqué - minimum (AA)

Le composant sur lequel se trouve le focus ne doit pas être entièrement caché par un autre composant.

Les problèmes sont souvent causés par des bannières de cookies, éléments "sticky" ou boîtes de dialogue non modales.

Citation d'un utilisateur

“Lorsque je navigue avec la touche TAB dans le contenu de la page web, je ne vois pas sur quel lien je me trouve car il est masqué par la bannière des cookies. ”

2.5.7 Gestes de type glisser-déposer (AA)

Toute interface qui utilise un geste de type glisser-déposer offre également la possibilité d'effectuer la même opération par de simples clics.

Ce critère de succès concerne les interfaces qui nécessitent d'utiliser le geste de glisser-déposer du pointeur, par exemple glisser-déposer des fichiers à uploader ou glisser-déposer les lignes d'un tableau pour changer l'ordre des lignes.

Il ne suffit pas d'être accessible au clavier pour satisfaire à ce critère. Il faut vraiment qu'il y ait une alternative basée sur des clics.

Citation d'un utilisateur

“À cause de mes tremblements, je ne peux pas maintenir le bouton de ma souris enfoncé suffisamment longtemps pour faire glisser une pièce jointe vers mon application mail . Heureusement, je peux faire la même chose avec de simples clics de souris.”

2.5.8 Taille de la cible - minimum (AA)

La taille de la cible de tous les éléments interactifs a au moins une surface de 24 px par 24 px, sauf dans les cas suivants :

• il n'y a pas de chevauchement avec une autre zone cible et il existe un décalage d'au moins 24 pixels CSS entre les deux zones cibles
• un autre élément de la page qui a une taille suffisante a la même fonction
• la zone cible se trouve dans une phrase (un lien ne fait généralement pas 24 px de haut), ou la taille est limitée par la hauteur de la ligne
• la taille de la cible est déterminée par le navigateur et ne peut être ajustée
• une présentation spécifique de la cible est essentielle ou requise légalement pour transmettre l’information.

L'objectif de ce critère de succès est de garantir que l'on puisse facilement activer un élément interactif sans activer accidentellement un autre élément parce que, par exemple, le bouton est trop petit ou le lien est trop proche d'un autre lien.

Citation d'un utilisateur

“Le bouton de fermeture de cette bannière de cookies est très petit, ce qui fait qu'il est difficile de cliquer dessus sans cliquer accidentellement sur le bouton qui se trouve à côté.”

3.2.6 Fonction d'aide cohérente (A)

Lorsqu'une fonction d'aide est présente sur différentes pages d'un même site web, elle doit toujours se trouver approximativement au même endroit.

Des exemples de fonctions d'aide sont : des infos de contact, comme un numéro de téléphone ou des heures d'ouverture, un lien vers un formulaire de contact ou une page FAQ, un chatbot.

Citation d'un utilisateur

“Je ne retrouve pas les heures d'ouverture du magasin sur cette page, pourtant je suis sûre de les avoir vues en bas de plusieurs autres pages du site. ”

3.3.7 Saisie redondante (A)

Lorsque l'utilisateur a saisi des informations et qu'il doit à nouveau saisir les mêmes informations dans le cadre du même processus, ces informations doivent :

• soit être ajoutées automatiquement (autocomplete),
• soit pouvoir être sélectionnées par l'utilisateur,

Excepté lorsque :

• la réintroduction de l'information est essentielle
• l'information est importante pour des raisons de sécurité
• les informations précédemment saisies ne sont plus pertinentes.

L'objectif de ce critère de réussite est d'aider les utilisateurs à mener à bien un processus en plusieurs étapes en réduisant la charge cognitive.

Citation d'un utilisateur

“J'ai déjà saisi mon numéro de téléphone et je dois maintenant le faire à nouveau. Je ne comprends pas vraiment pourquoi. Cela me demande un grand effort de ne pas faire d'erreur de frappe. ”

3.3.8 Inscription accessible - minimum (AA)

Il doit être possible de s'authentifier sans passer de "test de fonctions cognitives" à aucune étape du processus.

Voici quelques exemples de tests de fonctions cognitives

• se souvenir d'un mot de passe
• recopier des caractères
• résoudre une énigme
• répondre à une question où l'orthographe est importante.

S'il y a un test de fonctions cognitives dans le processus d'authentification, on peut quand même satisfaire ce critère de succès si une des conditions suivantes est remplie :

• une autre façon de se connecter qui n'inclut pas de test des fonctions cognitives est aussi prévue (par exemple cliquer sur un lien envoyé par e-mail)
• un mécanisme qui aide les utilisateurs à effectuer le test cognitif est autorisé (par exemple remplissage du mot de passe par le navigateur, ou permettre le copier-coller)
• le test des fonctions cognitives consiste à reconnaitre un objet
• le test des fonctions cognitives consiste à reconnaitre un élément non textuel que l'utilisateur a lui-même ajouté au site.

Citation d'un utilisateur

“Je ne peux pas me souvenir des mots de passe, ni résoudre des problèmes mathématiques ou des énigmes. Laissez-moi me connecter avec ce que je sais ou laissez mon gestionnaire de mots de passe faire le travail.”

Nouveaux critères de niveau AAA

2.4.12 Focus non caché : amélioré (AAA)

Le composant qui a le focus ne doit pas être caché par un autre composant.

La différence avec le critère similaire de niveau AA est qu'ici le composant ne peut pas être caché du tout, alors que dans le critère de niveau AA on accepte qu'il soit caché partiellement.

Citation d'un utilisateur

“La bannière de cookies est positionnée de telle sorte que je ne peux pas voir quel élément du menu de navigation a le focus.”

2.4.13 Aspect de l'indicateur du focus(AAA)

L'objectif de ce critère de succès est de faire en sorte que l'indicateur de focus soit clairement visible et observable dans le plus grand nombre de circonstances possible.

Ce critère de réussite est ok s'il y a au moins une partie de l'indicateur de focus qui remplit les conditions suivantes:

• sa surface est aussi grande que la surface d'un périmètre de 2 pixels CSS autour du composant
• et, le rapport de contraste entre les mêmes pixels de l'indicateur de focus et des mêmes pixels sans focus est de 3,0:1 au moins.

Le périmètre est une ligne continue suivant la forme du composant, ou le plus petit rectangle entourant le composant. Le plus petit périmètre possible de 2 pixels CSS est une ligne solide de 2 pixels directement contre le bord du composant.

L'indicateur de focus ne doit pas absolument être un rectangle avec une largeur de 2 pixels CSS, tant qu'il couvre une surface suffisante (au moins le même nombre de pixels que ce cadre de 2 pixels). Cependant, un cadre de 2CSS pixels solides est la manière la plus simple de satisfaire à ce critère de succès.

Vous trouverez des exemples visuels et la méthode de calcul dans le document Comprendre Focus non caché (amélioré) (en anglais)

Citation d'un utilisateur

“J'ai un handicap moteur, ce qui signifie que je ne peux utiliser que le clavier. Cependant, avec l'âge, ma vision se détériore et je ne peux pas toujours voir le focus correctement. Il est donc important que l'indicateur de focus soit bien épais et contrasté.”

3.3.9 Connexion accessible - amélioré (AAA)

Il doit être possible d'introduire une demande sans effectuer de "test des fonctions cognitives".

Voici quelques exemples de tests de fonctions cognitives

• se souvenir d'un mot de passe
• recopier des caractères
• résoudre une énigme
• répondre à une question où l'orthographe est importante.

S'il y a un test de fonctions cognitives dans le processus d'authentification, on peut quand même satisfaire ce critère de succès si une des conditions suivantes est remplie :

• une autre façon de se connecter qui n'inclut pas de test des fonctions cognitives est aussi prévue (par exemple cliquer sur un lien envoyé par e-mail)
• un mécanisme qui aide les utilisateurs à effectuer le test cognitif est autorisé (par exemple remplissage du mot de passe par le navigateur, ou permettre le copier-coller)

La différence avec le point similaire de niveau AA est qu'ici la reconnaissance d'images ou objets non textuels n'est pas considéré comme une alternative valable.

Citation d'un utilisateur

“Je ne peux pas me souvenir des mots de passe, ni résoudre des problèmes mathématiques ou des énigmes. Laissez-moi me connecter avec ce que je sais ou laissez mon gestionnaire de mots de passe faire le travail.”