Vincent Aniort
A11y expert @orange telco compagny
2018
Vincent Aniort @sanvin
WCAG 2.1
AG (Accessibility Guidelines, WCAG 3.0), en cours (Silver Task Force) mais encore qqs années
Le contenu ne limite pas sa visualisation et son fonctionnement à une seule orientation d'affichage (portrait/paysage)
L'orientation particulière est essentielle (piano, chèque, projection, vidéo...)
Déficiences motrices, basse vision et tous !
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
Manuel
Le but de chaque champ collectant des infos sur l'utilisateur doit pouvoir être programmatiquement déterminé quand :
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 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.
<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>
Semi auto (pré-qualifié)
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 :
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...)
Basse vision, déficiences motrices et lecture plus facile pour tous.
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%.
Manuel (quoi que !)
Pour toutes les pages, sauf exceptions, basculer le viewport en 320px CSS, vérifier que :
le contenu est fonctionnel, compréhensible et lisible
Note : on peut faire le contraire, viewport à 1280px CSS et on zoome global à 400% (peut être plus facile !)
La présentation visuelle des éléments suivants présente un contraste d'au moins 3: 1 par rapport aux couleurs adjacentes :
Informations visuelles pour identifier les composants et les états de l'interface
Parties graphiques nécessaires pour comprendre le contenu
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.
Basse vision et mauvaise vision des couleurs (daltoniens...).
Manuel (auto partiel)
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 :
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 :
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 :
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).
Les personnes malvoyantes, les personnes dyslexiques et les personnes avec des problèmes de lecture.
Manuel
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.
Favlet S. Faulkner Text spacing
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
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.
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.
Manuel
Identifier tout composant faisant apparaître un contenu au survol ou au focus et qui disparaît à la sortie du survol et du focus
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
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.
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).
Les utilisateurs de commande vocales, les utilisateurs de clavier uniquement ayant des problèmes de dextérité.
Manuel
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.
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
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.
Manuel
Identifier tous les gestes multipoint et basé sur un chemin d'accès, hors exception
Vérifier qu'il existe une alternative mono-point ou non gestuelle
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
ne s'applique pas aux actions requises pour faire fonctionner l'agent utilisateur ou la technologie d'assistance.
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.
Manuel
Identifier tout les éléments activables par mono-point,
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.
Les utilisateurs de saisie vocale et les utilisateurs de synthèse vocale.
Manuel
Identifier les composants d'interface utilisateur dont les étiquettes incluent du texte ou des images-texte
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.
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é.
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é.
Manuel
Identifier les fonctionnalités pouvant être actionnée par le mouvement de l'appareil ou de l'utilisateur, hors exceptions
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.
<div role="alert">
</div>
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.
Tous les utilisateurs de technologies d'assistance.
Deux critères principaux déterminent si un élément correspond à la définition d'un message d'état :
Semi-manuel
Identifier tout les messages de status,
<!-- 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>
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.
images : © & ™ Lucasfilm Ltd. All Rights Reserved
By Vincent Aniort