Sensibilisation
Accessibilité
L’accessibilité,
kézako ?
Déficience et situation de handicap
La situation de handicap est le résultat d’une interaction entre un utilisateur et un contenu (ou une fonctionnalité) qui, du fait d’une déficience, aboutit à l’impossibilité pour l’utilisateur d’y accéder, de le percevoir, de le comprendre ou de l’utiliser.
L’accessibilité consiste donc avant tout à éliminer les obstacles générant des situations de handicap.
Les déficiences
visuelles
La cécité, la malvoyance, le daltonisme, ou encore la sensibilité à la lumière sont les déficiences visuelles les plus courantes.
Les technologies d’assistance
- Lecteur d’écran
- Plage Braille
- Loupes d’écran
- Mode de contrastes élevés
- Mode lecture
Les déficiences
auditives
La surdité, la malentendance, ou la sensibilité accrue au bruit sont les troubles auditifs les plus répandus.
Les technologies d’assistance
- Prothèse auditive
- Implants cochléaires
- Sous-titres — automatiques ou non
- Interprétariat LSF
Les déficiences
motrices
La paralysie, l’hémiplégie, Parkinson ou les TMS ne sont que quelques exemples de troubles moteurs parmi une myriade.
Les technologies d’assistance
- Reconnaissance vocale
- Clavier virtuel
- Dispositifs mécaniques : guide-doigts, head-stick, claviers et souris adaptés…
Les déficiences
cognitives
Les troubles dys, l’anxiété, les TDAH, TSA, les maladies d’Alzheimer et de Parkinson sont quelques exemples de troubles cognitifs.
Les technologies d’assistance
- Aucune : chacun teste diverses choses.
- Imprimer un contenu peut s’avérer plus facile pour certains, par exemple.
Les impacts
utilisateur
C’est la notion primordiale— qui se traduit en niveaux (A, AA, AAA) dans les WCAG .
Chaque défaut d’accessibilité à un impact plus ou moins critique sur l’utilisateur, en fonction du contexte et de la situation.
- Un contraste de 4.49:1 est moins critique qu’un contraste de 1.5:1.
- Une image sans alternative a un impact faible si le contenu manquant est anecdotique, mais bloquant si c’est un bouton d’authentification.
- Un impact critique sur une typologie d’utilisateurs peut ne pas gêner d’autres utilisateurs.
- Une solution pour certains utilisateurs peut avoir un impact négatif sur d’autres utilisateurs.
Limiter les situations de
handicap
Au sein du W3C , la WAI spécifie les WCAG , qui reposent sur quatre principes.
- Perceptible.
- Utilisable.
- Compréhensible.
- Robuste.
Le RGAA est une méthode d’application technique des WCAG.
En France, les obligations ne portent pas uniquement sur la conformité : une démarche doit être mise en œuvre et rendue publique, sous la forme d’un schéma pluriannuel et de plans d’action annuels.
Anatomie d’un critère RGAA
Chaque critère comprend :
- Un intitulé, avec des liens vers le glossaire pour les termes sujets à interprétation ;
- Un ou plusieurs tests techniques, avec une méthodologie détaillée pour chacun ;
- Des références aux WCAG — critère(s) de succès, technique(s) suffisante(s) et / ou échec(s) — et à l’EN 301 549.
Et, pour certains critères :
- Une note technique, pour certaines subtilités échappant au glossaire ou aux méthodologies de test ;
- Des cas particuliers.
Les tests
réflexes
Les comportements de base à adopter pour mesurer sommairement l’accessibilité d’une page, en utilisant uniquement Firefox.
- Vérifier le titre de l’onglet.
- Contrôler les contrastes.
- Tester le zoom, jusqu’à 200%.
- Naviguer Tab pour parcourir la page.
Les tests recommandés
easy checks
Les Easy Checks sont des tests simples à réaliser, couvrant les risques d’accessibilité les plus courants.
- Titres des pages :
<title>doit être présent, et décrire la page. - Alternatives textuelles pour les images : attribut
alt, élément<figcaption>, etc. - Hiérarchie des titres (
<h1>,<h2>,<h3>…) pertinente. - Contraste des couleurs suffisants.
- Taille du texte ajustable.
- Navigation au clavier : utiliser Tab.
- Formulaires : libellés pertinents, indication des champs obligatoires…
- Les contenus animés doivent être contrôlables.
- Alternatives aux multimédia (audio et vidéo) : sous-titres, transcription textuelle, audiodescription…
- Structure de base :
<main>,<header>,<footer>essentiellement.
Certains sont acquis grâce à la structure de nos thèmes. D’autres sont exclusivement du ressort des contributeurs.
Le reste va nous (pré)occuper — sur les thèmes, notamment.
Les tests
automatiques
L’extension Tanaguru est la seule à évaluer vis-à-vis du RGAA — ce qui évite les nœuds au cerveau.
Fonctionnalités appréciables
- Filtrer par thématique (en amont de l’analyse).
- Filtrer par statut.
- Surveiller les modifications du DOM.
- Afficher l’ordre de tabulation.
- Explications, légendes et accompagnements pertinents.
Attention aux
surcouches
Des éditeurs comme FACIL’iti parlent d’accessibilité.
Le(s) problème(s) des surcouches
- Elles ne peuvent pas rendre un site accessible.
- Elles peuvent considérablement dégrader l’accessibilité du site.
- Elles sont sur une couche technique inepte.
- Elles ne peuvent en aucun cas améliorer la conformité, mais la dégradent souvent (et fortement).
Le site Overlay Fact Sheet détaille les problèmes posés par ces outils, témoignages à l’appui.
Réclame : l’extension Orange Confort+ ajoute ce genre de fonctionnalités au navigateur.
Générique de fin
Merci
Crédits
- Typographie de titraille : Luckiest Guy par Astigmatic ;
- Typographie de labeur : Zilla Slab par Mozilla ;
- Typographie monospace : FontWithASyntaxHighlighter par Heikki Lotvonen ;
- Typographie pour les émojis : Twemoji COLR par Mozilla.
- Moteur de présentation inspiré de "CSS scroll-snap slide deck that supports live coding" de Stephanie Eckles sur Smashing Magazine.