Marie Guillaumet
- Experte accessibilité numérique, formatrice, front-end designer
- Articles et conférences sur le design et l’accessibilité.
Team chat.
Audrey Maniez
- Experte accessibilité numérique, formatrice, co-gérante
- Co-rédactrice du RGAA 3. Membre du groupe de travail ACT du W3C.
Team chiens.
Loupe d’écran
Utilisée par les personnes déficientes visuelles qui ont besoin d’agrandir les textes, en permanence ou ponctuellement.
Clavier virtuel / visuel
Utilisable par des personnes ne pouvant pas se servir de leurs mains, à l’aide d’eye tracking, d’un contacteur (souffle, joystick, etc.)
Lecteurs d’écran
Utilisés par :
- les personnes aveugles (avec ou sans 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
Par exemple dans Firefox :
Exemple : ajout d’icônes adaptées à une page web
Exemple : recherche guidée par images configurables
CSS alternatives (alternate stylesheets)
<link rel="alternate stylesheet" href="contrastes-inverses.css" type="text/css" title="Contrastes inversés" />
CSS utilisateur (user stylesheets)
Contrastes renforcés (1)
Windows 7+
Contrastes renforcés (2)
Windows 7+
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
Un sélecteur de styles léger et open source qui permet aux personnes en situation de handicap d’adapter votre site à leurs besoins.
- Gains utilisateurs importants à faible coût
- Créé avec des technos standards : interopérabilité ++
- Conforme RGAA 4/WCAG 2.1
- 100% personnalisable : options, intitulés, styles
- Cookie : persistance des préférences de l’utilisateur
- Open source : on peut contribuer
Côté utilisateurs, deux problèmes :
- Prévisibilité du dispositif d’adaptation : quelle icône ? quel intitulé ?
- Métacognition :
connaissance personnelle d'un individu sur ses capacités et ses fonctionnements cognitifs
Source : Larousse
Dans le RGAA
Troubles de l’attention : donner le contrôle à l’utilisateur sur les contenus en mouvement ou clignotants
Autre solution : permettre à l’utilisateur de masquer et réafficher le contenu en mouvement ou clignotant
La langue idéographique BLISS
Planche présentant quelques symboles issus de la langue idéographique BLISS. La planche montre comment plusieurs symboles combinés peuvent former des concepts plus complexes. Par exemple, pour désigner un « écrivain » on associe le symoble de « crayon » à celui de « homme ».
Librairies de symboles
Réduire la charge cognitive grâce au « reader mode »
Merci de votre attention !
- Suivez-nous sur LinkedIn : Access42
Slides : a42.fr/devfestbrest
- 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.