Accessibilité : et si on laissait les utilisateurs personnaliser l’interface ?

Audrey Maniez, Marie Guillaumet

Touraine Tech – 31 janvier 2020

Slides

a42.fr/tnt20

Access42

  • Conseil, audit et formations en accessibilité numérique
  • Scop : Société coopérative et participative
  • Entreprise solidaire d’utilité sociale (ESUS)
  • 10 personnes : 7 expert·es, dont 2 en situation de handicap
  • Télétravail, salaire égalitaire, organisation horizontale

Marie Guillaumet

  • Experte accessibilité numérique, formatrice, front-end designer
  • Articles et conférences sur le design et l’accessibilité.
  • Gérard. Team chat.
  • Twitter : @kreestal

Audrey Maniez

  • Experte accessibilité numérique, formatrice, co-gérante
  • Co-rédactrice du RGAA 3. Membre du groupe de travail ACT du W3C.
  • Fink.Lou. Team chiens.
  • Twitter : @audreyblabla

Pourquoi cette conférence ?

  • À la découverte des handicaps cognitifs et mentaux
  • L’accessibilité comme source d’innovation technologique
  • Envie de proposer un sujet de niche qui nous passionne

Quelques handicaps cognitifs et mentaux

  • Troubles du décodage, et troubles de l’acquisition et la manipulation du langage écrit (dyslexie…)
  • Troubles de la compréhension écrite et orale (paralysie cérébrale, sclérose latérale amyotrophique, maladie de Charcot…)
  • Troubles de l’attention avec ou sans hyperactivité
  • Troubles de la mémoire
  • Troubles de la parole (aphasie…)
  • Déficiences intellectuelles (trisomie 21)
  • Autisme

Besoins sur le web

  • Adaptation des paramètres typographiques
  • Compréhension des textes écrits
  • Compréhension des informations sonores (vidéos…)
  • Compréhension des actions attendues (formulaires, boutons)
  • Réduction des surcharges d’information

Problèmes

  • Complexité intrinsèque du numérique : langage, iconographie, gestes…
  • Prise en compte partielle des handicaps mentaux et cognitifs dans WCAG et RGAA.
  • Certains besoins utilisateurs ne sont pas encore couverts par les standards.

Ce dont on va parler

  1. mécanismes d’adaptation existants et leurs limites : systèmes d’exploitation, CSS, outils open source
  2. nouveaux critères d’accessibilité permettant aux utilisateurs de personnaliser les interfaces

1. Ce qui existe déjà (et qui est déjà bien) (mais pas suffisant)

Côté utilisateurs, deux problèmes :
  1. Interfaces et logiciels complexes
  2. Pas de technologie d’assistance pour pallier le handicap mental

Mécanismes d’adaptation système

Loupe d’écran

Utilisée par les personnes déficientes visuelles qui ont besoin d’agrandir les textes, en permanence ou ponctuellement.

Page web affichée sans loupe d’écran.
Page web affichée avec loupe d’écran réglée sur 200% dans Windows 10. Tweet de Hellgy.

Clavier virtuel / visuel

Clavier virtuel dans Windows 10.

Utilisable par des personnes ne pouvant pas se servir de leurs mains, à l’aide d’eye tracking, d’un contacteur au souffle

Lecteurs d’écran

Utilisés par :

  • les personnes aveugles (avec ou sans plage braille) ;

    Plage braille

  • des personnes très malvoyantes ;
  • certaines personnes ayant des difficultés de lecture (DYS et al.).
Lecteurs d’écran natifs
  • Narrateur – Windows
  • VoiceOver – MacOS et iOS
  • TalkBack – Android
  • Orca – Linux
+ Lecteurs d’écran à installer
  • NVDA, gratuit
  • JAWS, payant
  • Extensions plus ou moins fiables

Mécanismes d’adaptation navigateurs

Les navigateurs proposent différentes options de personnalisation de l’interface :

  • couleurs
  • typographie : taille, police…

Limites : il faut savoir que ces options existent, et savoir les configurer…

Par exemple dans Firefox :

Réglages couleurs dans Firefox
Utilisatrice ayant configuré son navigateur avec un arrière-plan pêche et du texte bleu
Utilisatrice ayant configuré son navigateur avec un arrière-plan pêche et du texte bleu. Source : Accessibility and me: Marian Foley

Il existe aussi des navigateurs adaptés

Par exemple : WebTrek, WWAAC, EIA, Communicate: Webwide, EdWeb, etc.

Exemples de fonctionnalités :

  • Recherche avec des images
  • Linéarisation des contenus
  • Ajout d’icônes adaptées aux contenus web
  • Lecteur d’écran intégré
  • Personnalisation des boutons (image + intitulé)

Exemple : ajout d’icônes adaptées à une page web

Communicate: Webwide

Exemple : recherche guidée par images configurables

WebTrek
Limites des navigateurs adaptés
  • Peu répandus, difficiles à se procurer
  • Logiciels obsolètes, payants, ou simples prototypes
  • Complexité : l’aide d’un tiers peut être nécessaire à la configuration

Mécanismes d’adaptation web

CSS alternatives (alternate stylesheets)

<link rel="alternate stylesheet" href="contrastes-inverses.css" type="text/css" title="Contrastes inversés" />
Afficher et utiliser les CSS alternatives dans Firefox : menu « Affichage », puis sous-menu « Style de la page ».
Limites des CSS alternatives
  • Styles réinitialisés dès que l’utilisateur change de page
  • Mauvais support : Chrome, Safari et Opera K.O. (non conformes UUAG 1.7)
  • Ce n’est pas intuitif : réservé aux utilisateurs aguerris

CSS utilisateur (user stylesheets)

Dans Safari : menu « Préférences » > onglet « Avancées » > option « Feuilles de style ».
Limites des CSS utilisateur

Media queries (MQ)et paramètres système

Contrastes renforcés (1)

Windows 7+

Contrastes élevés désactivés dans Windows
Contrastes renforcés (2)

Windows 7+

Contrastes élevés activés dans Windows
Contrastes renforcés (3)
@media screen and (-ms-high-contrast: active){
  
  /* All high contrast styling rules */
  .a42-demo-windows{
    color:red;
  }
}

@media screen and (-ms-high-contrast: black-on-white){ 
  /* Rules for users using black-on-white */
}

@media screen and (-ms-high-contrast: white-on-black){ 
  /* Rules for users using white-on-black */
}
Démo du mode contraste élevé de Windows

Si le mode contraste élevé est paramétré par l’utilisateur,
ce texte deviendra rouge.

Si le mode contraste élevé est paramétré par l’utilisateur,
ce texte sera de la couleur définie dans les paramètres.

En savoir plus : How to use -ms-high-contrast

Limites de la MQ -ms-high-contrast
  • MQ propriétaire, non standard
  • Support uniquement dans Windows + Edge/Internet Explorer
  • Standardisation en cours avec la MQ light-level dans Media Queries Level 5
Couleurs inversées
/* Avoid unpleasant effects on pictures and shadows */
img {filter: invert(100%);}
* {text-shadow: none !important; box-shadow: none !important;}

/* Demo styles */
.a42-demo-inverted *{
  color: gray; 
  font-style: italic;
}

@media (inverted-colors: inverted){
 .a42-demo-inverted * {
   background: black;
   color: yellow;
   font-style: none;
  }
}

@media (inverted-colors: none) {
 .a42-demo-inverted * {
   background: #eee; /* gris clair */
   color: #962e3f; /* rouge */
   font-style: none;
 }
}

Démo dans MacOS + Safari

Préférences système > Accessibilité > Affichage > Inverser les couleurs

Si les couleurs inversées sont utilisées, ce texte devrait être bleu sur blanc (l’inverse de jaune sur noir).

Sinon, il devrait être rouge sur gris clair.

Si le texte est gris, cela indique que votre navigateur ne prend pas en charge la caractéristique média inverted-colors.

Exemple tiré de MDN.

Limites de la MQ inverted-colors

Et bien d’autres MQ au support très insuffisant…

  • Réduction des animations : prefers-reduced-motion
  • Réduction de la transparence : prefers-reduced-transparency sur iOS et MacOS
  • Dark mode depuis MacOS Mojave : prefers-color-scheme: dark

En savoir plus : Operating System and Browser Accessibility Display Modes

Puisque rien n’est vraiment satisfaisant… Pourquoi ne pas créer nous-mêmes ces mécanismes d’adaptation ?

Sélecteurs de styles

AccessConfig

Un sélecteur de styles léger et open source qui permet aux personnes en situation de handicap d’adapter votre site à leurs besoins.

accessconfig.a11y.fr

AccessConfig
  • Gains utilisateurs importants à faible coût
  • Créé avec des technos standards : interopérabilité ++
  • 100% personnalisable : options, intitulés, styles
  • Cookie : persistance des préférences de l’utilisateur
  • Open source : on peut contribuer

À noter

  • Ne se substitue pas aux réglages d’accessibilité du navigateur ou du système d’exploitation, mais les complète ou les remplace s’ils s’avèrent inefficaces
  • Peut permettre d’être conforme au critère 1.4.3 Contrast (Minimum) de WCAG (technique G174)
Limites des sélecteurs de styles
  • Dépendent du bon vouloir des éditeurs de sites
  • Mises à jour sporadiques
Côté utilisateurs, deux problèmes :
  1. Prévisibilité du dispositif d’adaptation : quelle icône ? quel intitulé ?
  2. Métacognition : connaissance personnelle d'un individu sur ses capacités et ses fonctionnements cognitifs

    Source : Larousse

AccessConfig

Oui.SNCF

Handicap Tourisme PACA

CCAH

Accor Hotel Group

Royal Borough of Greeenwich

2. Ce vers quoi on va

Prise en compte progressive des handicaps cognitifs dans les standards

Dans le RGAA

Troubles de l’attention : donner le contrôle à l’utilisateur sur les contenus en mouvement ou clignotants

Critère 13.8 [A] – RGAA 4

Carousel de la page d'accueil scnf.com avec un bouton pause
Autre solution : permettre à l’utilisateur de masquer et réafficher le contenu en mouvement ou clignotant

Critère 13.8 [A] – RGAA 4

Bouton collapse de Slack
Prévoir une alternative aux textes nécessitant un niveau de lecture plus avancé que le niveau collège

Critère 13.14 [AAA] – RGAA 3

Expliciter les expressions inhabituelles ou le jargon

Critère 13.9 [AAA] – RGAA 3

Handicaps concernés :

  • retard mental
  • troubles du langage
  • handicaps cognitifs (dyslexie…)
  • personnes sourdes signantes
Prévoir une alternative aux textes nécessitant un niveau de lecture plus avancé que le niveau collège

Critère 13.14 [AAA] – RGAA 3

Solutions

  • Version en Langue des signes (LSF)
  • Version vocalisée
  • Présence d’illustrations ou de symboles
  • Un résumé adapté (FALC)
Expliciter les expressions inhabituelles ou le jargon

Critère 13.9 [AAA] – RGAA 3

Solutions

Donner une définition du terme inhabituel :

  • Dans la page
  • Glossaire
  • Liste de définitions

Dans WCAG 2.1

Publication en juin 2018

w3c

17 nouveaux critères dont 2 dédiés aux handicaps cognitifs :

  • Des finalités identiques : identifier « programmatiquement » la fonction des composants d’interface (propriétés, valeurs).
  • Mais des portées différentes.
Contrôles de formulaires

Indiquer dans le code la nature de la saisie attendue quand le champ attend une donnée personnelle de l’utilisateur

Success criterion 1.3.5 Input purpose [AA]

Composants d’interfaces, icônes et éléments de structure

Décrire dans le code les composants d’interface (lien, bouton…), les icônes et les régions

Success criterion 1.3.6 Identify purpose [AAA]

COGA

Cognitive and Learning Disabilities Accessibility

Task force du groupe de travail WCAG du W3C

w3c

Pourquoi et comment identifier les composants d’interface ?

Objectif nº1 : adapter les interfaces aux capacités langagières de chacun (2)

Troubles du langage :

problèmes liés au décodage et/ou à la compréhension des messages écrits ou oraux.

Objectif nº1 : adapter les interfaces aux capacités langagières de chacun (2)

Impacts sur le web :

  • Consultation : compréhension des textes et du concept de certaines icônes
  • Navigation : compréhension des intitulés de liens
  • Participation : compréhension des consignes de formulaire
Les systèmes de communication alternatifs : Communication Alternative Améliorée (CAA)

Communication non verbale qui soutient la production et la compréhension du langage.

  • Sans assistance : langue des signes, expressions, vocalisations, gestes…
  • Avec assistance : supporté par un matériel
La langue idéographique BLISS
Langue idéographique BLISS
Librairies de symboles
Carte de communication
Carte de communication
Objectif pour les utilisateurs : pouvoir utiliser la langue de la vie quotidienne sur le web

Recevoir l’information dans les modalités adaptées à ses besoins et ses préférences : vocalisé, texte, graphique, symbolique…

Symbol World, encyclopédie adaptée
Impacts sur le dev : ajouter de la sémantique

Identifier les composants d’interface dans le code va permettre à des logiciels adaptés de remplacer/compléter :

  • un texte par une icône ;
  • une icône par une autre plus compréhensible par l’utilisateur.

Décrire les actions des boutons

<input type="submit" value="Envoyer le message" data-purpose="send" />

Associer un symbole/une image

Décrire des destinations pour des liens

<a href="index.html" data-destination="home"> Accueil</a>

Associer un symbole ou une image, un raccourci clavier

Décrire les concepts

<span data-symbol="13621 12324 17511">Tasse de thé</span>

Codes BLISS

Associer un symbole ou une image aux textes complexes ou aux iconographies

Objectif nº2 : aider à la concentration et à la prise de décision

Troubles de l'attention :

  • difficulté/impossibilité à terminer une tâche
  • hypersensibilité à la distraction
  • impulsivité

Objectif nº2 : aider à la concentration et à la prise de décision

Impacts sur le web :

  • Consultation : se concentrer sur un contenu entourés d'éléments distrayants
  • Prise de décision : faire un choix parmi une liste de nombreux liens (résultats de recherche)
  • Participation : remplir correctement un long formulaire
Objectif pour les utilisateurs : réduire la charge cognitive

Pouvoir choisir d’afficher seulement les contenus identifiés comme essentiels par l’auteur du site pour :

  • favoriser l’aboutissement d'une tâche : par exemple lire jusqu'au bout ;
  • faciliter la prise de décision : par exemple réduire les choix dans une liste de liens.
Impacts sur le dev : décrire l’importance des composants d’interface

Objectif : permettre à l’utilisateur de masquer les contenus peu importants ou distrayants grâce à un logiciel.

Décrire le niveau d’importance d’un composant

<input value="Envoyer le message" type="submit" data-simplification="critical"/>

Rendre invisible les éléments les moins importants

Décrire les composants distrayants

<iframe src="lapub.html" title="De la publicité" data-distraction="sensory offer">

Rendre invisibles les publicités, les éléments en mouvement

Réduire la charge cognitive grâce au « reader mode »

FF1
FF2

Objectif nº3 : accompagner la saisie et réduire les erreurs de saisie

Utilisateurs concernés :

  • Troubles de l'attention (impulsivité)
  • Troubles de la mémoire
  • Difficultés d’écriture

Impacts sur le web :

  • Saisir les données correctement
  • Se souvenir d'informations personnelles
  • Tâche longue, échouée (mauvaises données) voire abandonnée
Impacts sur le dev : identifier les données attendues

Objectif : permettre à l’utilisateur de remplir automatiquement ses données personnelles dans un formulaire grâce à un logiciel ou à un programme.

Décrire la nature des saisies attendues des champs de formulaire

<label for="youremail">Adresse email</label>
<input type="email" id="youremail" autocomplete="email" data-purpose="email" />

Associer un symbole/une image, permettre l’autocomplétion

Démonstration : formulaire

Avec Chrome ou Firefox + extension Aufofill Forms

Quelle transposition dans le RGAA 4 ?

Seul le critère WCAG 2.1 Input purpose a été transposé :

« La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ? »

Critère 11.13 [AA] – RGAA 4

Mais pas de transposition du critère AAA sur l’identification de tous les composants d’interface, car tous les critères AAA ont été supprimés du référentiel…

Conclusion

Concevoir et développer des interfaces flexibles

Les normes impulsent les technologies du futur

Le futur est accessible

Merci de votre attention !

Tête de Gérard Tête de Fink Tête de Lou

Slides : a42.fr/tnt20

  • Script de support de présentation AccesSlide développé par Access42 sous licence GPL.
  • Icônes par Arthur Shlain, Made by Made pour the Noun Project.