Historique

WCAG 2.1

évolution des WCAG

• WCAG 1.0, 5 mai 1999
• WCAG 2.0, 11 décembre 2008
• WCAG 2.1, 5 juin 2018

• AG (Accessibility Guidelines, WCAG 3.0), en cours (Silver Task Force) mais encore qqs années

WCAG 2.1 et WCAG 2.0

• 1 an et demi pour sortir WCAG 2.1
• WCAG 2.1 est une mise à jour vers la version 2.0
• WCAG 2.1 s'appuie sur et étend WCAG 2.0, mais ne remplace ni ne prend la place des WCAG 2.0
• pas de changement dans l'existant (critères de succès)
• 17 nouveaux "critères" ajoutés
• total de 78, dont 51 niveau A ou AA
  • 5 level A
  • 7 level AA
  • 5 level AAA
• déficience cognitive, basse vision et mobile

1.3 Adaptable

1.3.4 – Orientation

1.3.4 – Orientation AA

Critère de succès

Le contenu ne limite pas sa visualisation et son fonctionnement à une seule orientation d'affichage (portrait/paysage)

Exception

L'orientation particulière est essentielle (piano, chèque, projection, vidéo...)

Bénéfices

Déficiences motrices, basse vision et tous !

Essentiel

En cas de suppression, cela modifierait fondamentalement les informations ou les fonctionnalités du contenu, et ces informations et fonctionnalités ne peuvent pas être obtenues d'une autre manière conforme

1.3.4 – Orientation AA

Type de test

Manuel

Procédure

1. Pour toute page dont l'orientation n'est pas essentielle,
2. Vérifier que lorsque l'on change d'orientation, le contenu est identique, s'adapte et reste fonctionnel

Outils

• WebDev toolbar

1.3.4 – Orientation AA

Exemples

1.3 Adaptable

1.3.5 – Identify Input Purpose

1.3.5 – Identifier le but de la saisie AA

Critère de succès

Le but de chaque champ collectant des infos sur l'utilisateur doit pouvoir être programmatiquement déterminé quand :

• Le champ répond à une finalité identifiée dans "Objectifs d'entrée des composants d'interface utilisateur" ; et
• Le contenu est implémenté à l'aide de technologies prenant en charge l'identification de la signification attendue pour les données d'entrée de formulaire.

Bénéfices

Les personnes avec des difficultés à remplir des formulaires : déficiences cognitives (dyslexie...) ou mobilité réduite. Pour tous, gain de temps, réduction des fautes de frappe ou d'orthographe.

déterminé par programme

déterminé par un logiciel à partir des données fournies par l'auteur, de manière à ce que différents agents utilisateurs, y compris les technologies d'assistance, puissent extraire et présenter ces informations aux utilisateurs selon différentes modalités
    Remarque
Déterminé dans un langage de balisage à partir d'éléments et d'attributs accessibles directement par la technologie d'assistance couramment disponible.
     Remarque
Déterminé à partir de structures de données spécifiques à une technologie dans un langage autre que le balisage et exposé à la technologie d'assistance via une API d'accessibilité prise en charge par la technologie d'assistance couramment disponible.

Section 7: Objectifs de saisie pour les composants d'interface utilisateurs

  <div>
    <label for="lname">Last Name Name</label>
  <input id="lname" type="text" autocomplete="family-name" ... >
    <label for="cc-num">Credit card number:</label>
    <input type="text" id="cc-num" autocomplete="cc-number">
  </div>

Type de test

Semi auto (pré-qualifié)

Procédure

1. Pour chaque champ de formulaire qui collecte des informations sur l'utilisateur et qui est listé comme un champ de saisie semi-automatique décrit dans WCAG 2.1 "Section 7: Objectifs de saisie pour les composants d'interface utilisateurs", vérifiez les éléments suivants:
2. les champs de formulaire ont une paire, attribut et valeurs de saisie semi-automatique, valide et bien formée.
3. Le but de chaque champ de formulaire indiqué par l'étiquette correspond au jeton de saisie semi-automatique.

1.3.5 – Identifier le but de la saisie AA

1.4 Distinguishable

1.4.10 – Reflow

1.4.10 – Réarrengement AA

Critère de succès

Le contenu peut être présenté sans perte d'informations ou de fonctionnalités et sans nécessiter de défilement en deux dimensions pour :

• Contenu de défilement vertical d'une largeur équivalente à 320 pixels CSS;
• Contenu de défilement horizontal d'une hauteur équivalente à 256 pixels CSS.

Exception

Les parties du contenu nécessitant une disposition 2D pour l'usage ou la signification (images, cartes, diagrammes, vidéos, jeux, présentations, tableaux de données et barre de nav...)

Bénéfices

Basse vision, déficiences motrices et lecture plus facile pour tous.

Note

320 pixels CSS équivalent à une largeur de fenêtre de départ de 1280 pixels CSS à un zoom de 400%.

Pour le contenu Web conçu pour défiler horizontalement (par exemple avec du texte vertical), les 256 pixels CSS équivalent à une hauteur de fenêtre de départ de 1024 pixels à un zoom de 400%.

Type de test

Manuel (quoi que !)

Procédure

Pour toutes les pages,  sauf exceptions, basculer le viewport en 320px CSS, vérifier que :

1. le contenu est fonctionnel, compréhensible et lisible

2. il n'y a pas barre de défilement horizontal

Note : on peut faire le contraire, viewport à 1280px CSS et on zoome global à 400% (peut être plus facile !)

Outils

• WebDev toolbar, dev tools Chrome
• navigateur headless

1.4.10 – Réarrengement AA

1.4 Distinguishable

1.4.11 – Non-text Contrast

Critère de succès

La présentation visuelle des éléments suivants présente un contraste d'au moins 3: 1 par rapport aux couleurs adjacentes :

• Composants d'interface utilisateur

Informations visuelles pour identifier les composants et les états de l'interface

• Objets graphiques

Parties graphiques nécessaires pour comprendre le contenu

Exception

Les composants inactifs ou lorsque l'apparence du composant est déterminée par l'agent utilisateur et non modifiée et lorsqu'une présentation particulière de graphiques est essentielle à la transmission des informations.

Bénéfices

Basse vision et mauvaise vision des couleurs (daltoniens...).

1.4.11 – Contraste non textuel AA

Type de test

Manuel (auto partiel)

Procédure

Identifiez chaque composant d'interface utilisateur (lien, bouton, contrôle de formulaire) et chaque graphique sur la page qui comprend les informations nécessaires à la compréhension du contenu (à savoir, exclure les graphiques dont le texte est visible pour la même information ou qui sont décoratifs) et :

1. Identifiez les indicateurs visuels (non textuels et leurs différents états : focus, survol, actif, etc.) des composants personnalisés dans l'état par défaut
2. Vérifiez le contraste de l'objet graphique par rapport aux couleurs adjacentes

Outils

• Color contrast analyser

1.4.11 – Contraste non textuel AA

Image avec dégradé

S'il y a plusieurs couleurs et / ou un dégradé, choisissez la zone la moins contrastée à tester
         et
Si la zone la moins contrastée est inférieure à 3: 1, alors

Supposons que cette zone est invisible, l'objet graphique est-il toujours compréhensible?

Logotypes et drapeaux, les photo réelles, les images que l'on ne peut représenter d'autre manière

Exemples :

• Captures d'écran montrant comment un site Web est apparu.
• Diagrammes d'informations médicales utilisant les couleurs de la biologie
• Dégradés  représentant une mesure (cartes de chaleur)

Détails des exceptions

1.4.11 – Contraste non textuel AA

Exemples

1.4 Distinguishable

1.4.12 – Text Spacing

1.4.12 – Espacement du texte AA

Critère de succès

Dans le contenu implémenté à l'aide des langages de balisage qui prennent en charge les propriétés de style de texte suivantes, aucune perte de contenu ou de fonctionnalité ne se produit en définissant toutes les options suivantes et en ne modifiant aucune autre propriété de style :

•      Hauteur de ligne (interligne) à au moins 1,5 fois la taille de la police;
•      Espacement des paragraphes suivants à au moins 2 fois la taille de la police;
•      Espacement des lettres (interlettrage) à au moins 0,12 fois la taille de la police;
•      Espacement des mots au moins égal à 0,16 fois la taille de la police.

Exception

Les langages humains et les écritures qui n'utilisent pas une ou plusieurs de ces propriétés de style de texte mais aussi les PDF, canvas, sous-titre vidéo, image-texte, logo (pas langage de balisage).

Bénéfices

Les personnes malvoyantes, les personnes dyslexiques et les personnes avec des problèmes de lecture.

Type de test

Manuel

Procédure

1. Appliquer à tout contenu textuel les propriétés CSS : hauteur / espacement de la ligne de texte à 1,5 fois la taille de la police, espacement des paragraphes à 2 fois la taille de la police, espacement des mots à 0,16 fois la taille de la police et espacement des lettres à 0,12 fois la taille de la police.

2. Le contenu est fonctionnel et lisible, sans chevauchement, ni texte coupé

Outils

Favlet S. Faulkner Text spacing

1.4.12 – Espacement du texte AA

1.4 Distinguishable

1.4.13 – Content on hover or focus

Critère de succès

Lors du survol du pointeur ou de la prise de focus clavier déclenchant l'affichage puis la disparition d'un contenu supplémentaire , les conditions suivantes sont remplies :

Faire disparaître, Survolable, Persistant

Exception

La présentation visuelle du contenu supplémentaire est contrôlée par l'agent utilisateur et n'est pas modifiée par l'auteur.

Bénéfices

Les utilisateurs malvoyants, les utilisateurs qui augmentent la taille des curseurs de souris, une déficience cognitive, les utilisateurs avec une précision de pointeur faible.

1.4.13 – Contenu au survol ou au focus AA

Type de test

Manuel

Procédure

1. Identifier tout composant faisant apparaître un contenu au survol ou au focus et qui disparaît à la sortie du survol et du focus

2. Vérifier que le contenu apparu , à la fois :

• peut disparaître : un mécanisme est disponible pour supprimer le contenu supplémentaire sans déplacer le curseur ou le focus du clavier, à moins que le contenu supplémentaire ne communique une erreur de saisie, ne masque ou ne remplace aucun autre contenu,

• peut être survolé : Si le survol du pointeur peut déclencher le contenu supplémentaire, le pointeur peut être déplacé sur le contenu supplémentaire sans que le contenu supplémentaire ne disparaisse,

• est persistant : le contenu supplémentaire reste visible jusqu'à suppression du survol ou du focus sur le déclencheur, que l'utilisateur le fasse disparaître ou les informations ne sont plus valides

1.4.13 – Contenu au survol ou au focus AA

1.4.13 – Contenu au survol ou au focus AA

Exemples

2.1 Keyboard Accessible

2.1.4 – Character Key Shortcuts

Critère de succès

Si un raccourci clavier utilise des touches de caractères, lettre (y compris les lettres majuscules et minuscules), ponctuation, nombre ou symbole, l'utilisateur doit pouvoir désactiver le raccourci clavier ou changer la touche définie en une touche non imprimable (Ctrl, Alt, etc.) ou activer uniquement le raccourci lorsqu'un composant d'interface associé ou le bouton a le focus.

Exception

Les raccourcis utilisant avec une combinaison de touches incluant les touches de modification et les "accesskey" ne sont pas affectées (elles incluent l'utilisation des touches de modification).

Bénéfices

Les utilisateurs de commande vocales, les utilisateurs de clavier uniquement ayant des problèmes de dextérité.

2.1.4 – Caractère de raccourci clavier A

Type de test

Manuel

Procédure

1. Identifier les raccourcis clavier utilisant un caractère imprimable
2. Vérifier que l'on peut, au choix :

• Arrêter : un mécanisme est disponible pour désactiver le raccourci
• Remappe : un mécanisme est disponible pour remapper le raccourci afin d'utiliser un ou plusieurs caractères de clavier non imprimables (par exemple, Ctrl, Alt, etc.)
• Actif uniquement au focus : le raccourci clavier pour un composant d'interface utilisateur n'est actif que lorsque ce composant a le focus.

2.1.4 – Caractère de raccourci clavier A

2.1 Keyboard Accessible

2.5.1 – Pointer gestures

Critère de succès

Toutes les fonctionnalités qui utilisent des gestes multipoints ou basés sur le chemin d'accès (swipe, drag,  pinch...) peuvent être utilisées avec un seul point d'activation sans geste basé sur un chemin.

Exception

Le geste multipoint ou basé sur un chemin est essentiel (ex. signature) et
ne s'applique pas aux actions requises pour faire fonctionner l'agent utilisateur ou la technologie d'assistance

Bénéfices

Les utilisateurs qui ne peuvent pas (avec précision) effectuer des gestes complexes avec un pointeur.
Les utilisateurs, novices, par exemple, qui ignorent souvent la prise en charge de gestes de pointeur complexes. Utile donc aux utilisateurs ayant des troubles cognitifs ou d'apprentissage.

2.5.1 – Gestes du pointeur A

Type de test

Manuel

Procédure

1. Identifier tous les gestes multipoint et basé sur un chemin d'accès, hors exception

2. Vérifier qu'il existe une alternative mono-point ou non gestuelle

2.5.1 – Gestes du pointeur A

2.1 Keyboard Accessible

2.5.2 – Pointer Cancellation

Critère de succès

Pour les fonctionnalités pouvant être exploitées à l'aide d'un seul point, l'une des conditions suivantes est vraie :
Pas de Down-Event, Abandonner ou Annuler, Réversion sur Up, Essentiel

Exception

ne s'applique pas aux actions requises pour faire fonctionner l'agent utilisateur ou la technologie d'assistance.

Bénéfices

Facilite l'annulation pour tous les utilisateurs en cas d'erreur sur la cible.
Aide les personnes ayant des déficiences visuelles, des limitations cognitives et des déficiences motrices.
Les personnes incapables de détecter les changements de contexte sont moins susceptibles d'être désorientées lors de la navigation sur un site.

2.5.2 – Annulation du pointer A

Type de test

Manuel

Procédure

1. Identifier tout les éléments activables par mono-point,

2. Vérifier qu'au moins une condition est vraie :

• Pas de Down-Event
  L'événement descendant du pointeur n'est utilisé pour exécuter aucune partie de la fonction
• Abandonner ou Annuler
  L'achèvement de la fonction est sur le Up, et un mécanisme est disponible pour abandonner la fonction avant la fin ou pour annuler la fonction une fois terminée
• Inversement sur Up
  L'événement Up inverse tout résultat de l'événement Down précédent
• Essentiel
  Terminer la fonction sur l'événement Down est essentiel.
  Les fonctions qui émulent un appui clavier ou un pavé numérique sont considérées comme essentielles.

2.5.2 – Annulation du pointer A

2.1 Keyboard Accessible

2.5.3 – Label in Name

Critère de succès

Pour les composants d'interface utilisateur dont les étiquettes incluent du texte ou des images-texte, le nom contient le texte présenté visuellement.
Une bonne pratique consiste à avoir le texte de l'étiquette au début du nom.

Bénéfices

Les utilisateurs de saisie vocale et les utilisateurs de synthèse vocale.

2.5.3 – Étiquette dans le nom A

Type de test

Manuel

Procédure

1. Identifier les composants d'interface utilisateur dont les étiquettes incluent du texte ou des images-texte

2. Vérifier que le nom accessible contient le texte de l'étiquette ou de l'image étiquette (en premier si possible)

2.5.3 – Étiquette dans le nom Accessible

2.1 Keyboard Accessible

2.5.4 – Motion Actuation

2.5.4 – Actionnement par mouvement A

Critère de succès

La fonctionnalité pouvant être actionnée par le mouvement de l'appareil ou le mouvement de l'utilisateur peut également être activée par des composants de l'interface utilisateur et la réponse au mouvement peut être désactivée pour empêcher toute activation accidentelle.

Exception

Interface prise en charge : le mouvement est utilisé pour actionner la fonctionnalité via une interface compatible avec l'accessibilité.
Essentiel : le mouvement est essentiel pour la fonction et cela invaliderait l'activité.

Bénéfices

Les personnes incapables d'effectuer des mouvements particuliers (tels que l'inclinaison, le tremblement ou les gestes) ou les utilisateurs physiquement incapables d'effectuer les mouvements nécessaires. Tous les utilisateurs peuvent en bénéficier dans des situations où ils ne peuvent pas tenir et déplacer l'appareil car leurs mains sont occupées par une autre activité.

Type de test

Manuel

Procédure

1. Identifier les fonctionnalités pouvant être actionnée par le mouvement de l'appareil ou de l'utilisateur, hors exceptions

2. Vérifier qu'elles peuvent également être activées par des composants de l'interface utilisateur et la réponse au mouvement peut être désactivée pour empêcher toute activation accidentelle.

2.5.4 – Actionnement par mouvement A

4.1 Compatible

4.1.3 – Status Messages

<div role="alert">

</div>

4.1.3 – Message de statut  AA

Critère de succès

Dans le contenu implémenté à l'aide de langages de balisage, les messages d'état peuvent être déterminés par programme via des rôles ou des propriétés, de sorte qu'ils puissent être présentés à l'utilisateur par des technologies d'assistance sans recevoir le focus.

Bénéfices

Tous les utilisateurs de technologies d'assistance.

Note

Deux critères principaux déterminent si un élément correspond à la définition d'un message d'état :

•  le message "fournit à l'utilisateur des informations sur le succès ou les résultats d'une action, sur l'état d'attente d'une application, sur le déroulement d'un processus ou sur l'existence d'erreurs"
• le message n'est pas remis via un changement de contexte.

Type de test

Semi-manuel

Procédure

1. Identifier tout les messages de status,

2. Vérifier qu'ils sont accessibles aux technologies d'assistance sans recevoir le focus (via ARIA, généralement : alert, status, donc live region)

4.1.3 – Message de statut  AA

4.1.3 – Message de statut  AA

Exemples

<!-- A success message or a statement on the results of an action: -->
<span role="status/log">
    Your data was saved successfully!
</span>

<!-- An error message, warning, or suggestion: -->
<span role="alert">
    Your password must contain at least three numbers!
</span>

<!-- An indication that something is currently in progress: -->
<span role="progressbar">
    Your results are being loaded...
</span>

Conclusion

Conformité

La conformité (et le niveau de conformité) concerne uniquement les pages Web complètes. Elle ne peut pas être atteinte si une partie de la page Web est exclue.

Ajout aux composants facultatifs d'une déclaration de conformité pour inclure des métadonnées sur les fonctionnalités d'accessibilité et le niveau d'accessibilité du document. Cela aidera les utilisateurs handicapés à identifier les livres ePub accessibles en ligne et fournira aux moteurs de recherche des outils pour trouver du contenu accessible.

...et toujours

• commencer tôt
• former tous les acteurs
• donner des outils
• automatiser un max (tests U, NR, fonctionnels...)

Title Text

Subtitle