Rendre vos documents de cours accessibles et votre cours Moodle
Christian Cousquer
Formation Accessibilité : Module n°1
Lundi 4 Octobre 2021
Christian Cousquer
- Depuis plus de 16 ans dans le domaine de l'accessibilité numérique
- Direction nationale des usages du numérique (Le Cnam - DN1).
- Expert en technologies de l'information pour la communication (TIC),
- Expert en Réalité Virtuelle, Ingénieur pédagogique.
- Email : christian.cousquer@lecnam.net
- Twitter : @prairycat
Plan du Module 1 de la formation
-
Préambule :
- Législation
- Les personnes handicapées et le numérique
- TP 1 : installation NVDA
- Les normes et les références pour le handicap
- Exemples d'erreurs d'accessibilité courantes
- Les règles d'accessibilité
- Les outils de visioconférence
En préambule
Une définition fondatrice du handicap
« Par personnes handicapées, on entend des personnes qui présentent des incapacités physiques, mentales, intellectuelles ou sensorielles durables dont l’interaction avec diverses barrières peut faire obstacle à leur pleine et effective participation à la société sur la base de l’égalité avec les autres. »
Article premier, Convention relative aux droits des personnes handicapées
L’accessibilité, c’est permettre aux personnes handicapées de jouir pleinement de leurs droits et de leurs libertés fondamentales en levant les barrières qu'elles peuvent rencontrer.
L’accessibilité numérique s’inscrit dans cette démarche d’égalité et constitue un enjeu politique et social essentiel afin de garantir à tous, sans discrimination, le même accès à l’information et aux services en ligne.
Handicap : la définition légale française
« Constitue un handicap, au sens de la présente loi, toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant. »
Article L114 – loi n°2005-102
Lire aussi :
« L’accessibilité c’est avant tout pour les personnes handicapées » — a42.fr/pour-ph
Législation en France
Loi de 2005 « sur l’égalité des chances, la participation et la citoyenneté des personnes handicapées » (mise à jour en 2016 et en 2018).
Sur le volet numérique :
- obligation d'accessibilité pour les sites et applications, uniquement pour le secteur public initialement et désormais étendue aux délégataires de service public et à partie des sociétés privées ;
- depuis 2016 :
- sanctions financières (jusqu'à 25 000€) en cas de défaut d'affichage du niveau d'accessibilité ;
- publication de plans de mise en accessibilité sur 3 ans maximum ;
- mise en place d'un moyen de signalement à destination des utilisateurs.
En savoir plus sur a42.fr/loi.
Handicap en France 12 millions de personnes concernées
= 1 personne sur 5.
L'accessibilité au Cnam
« Enseigner à tous partout »
On va insister sur ces deux termes « à tous » et « partout »...
Une diversité de handicaps
- Handicaps physiques et sensoriels :
- visuels,
- auditifs,
- moteurs.
- Handicaps mentaux :
- handicaps intellectuels,
- handicaps cognitifs (troubles DYS),
- handicaps psychiques.
- Polyhandicap : un handicap moteur ou sensoriel + mental ;
- Troubles de santé invalidants : cancer, douleurs chroniques, allergies…
Chaque personne est différente.
L'accessibilité numérique, ce n'est pas uniquement pour les personnes aveugles
Handicaps visuels
Les déficiences visuelles sont très diverses, et liées à de nombreuses pathologies de la vision.
- Difficulté de perception des couleurs
- Difficulté de perception des contrastes
- Acuité visuelle réduite
- Perte de la vision périphérique
- Perte de la vision centrale
- Etc.
Troubles DYS
Troubles neurologiques durables qui affectent certaines fonctions cognitives.
- Dyslexie et dysorthographie
- Troubles déficitaires d’attention avec ou sans hyperactivité
- Dyspraxie de type dyspraxie visuo-spatiale
- Dysphasie dans le cadre de troubles associés
- Dyscalculie
- Troubles mnésiques (mémoire)
En savoir plus : a42.fr/flupa2018
Technologies d’assistance
- Plage braille
- Clavier monomanuel
- Head-stick
- Eye tracker
- Lecteur d’écran
- Clavier visuel
- Contacteur au souffle
- Trackball
- Contrôle par la pensée
- etc.
Les personnes handicapées
et le numérique
Utilisation du numérique en France
- Plus de 88% des Français utilisent Internet.
- 77% se servent d’un smartphone, plus utilisé pour surfer sur Internet qu’un ordinateur, notamment par les jeunes.
- 62% des personnes interrogées ont fait un achat sur Internet au cours de l’année.
- 60% sont inscrites sur les réseaux sociaux.
- 68% pensent qu’avoir accès à Internet est une condition nécessaire pour se sentir intégré dans la société.
- Le numérique simplifie les démarches avec l’administration mais la complexité des démarches est un frein à l’utilisation de l’e-administration.
Source : Baromètre du numérique 2019
Le numérique : une promesse d'émancipation et d'autonomie
Indépendance et autonomie renforcées
Accomplir au quotidien des tâches jusqu’alors impossibles en toute autonomie, sans dépendre de l'aide d'une tierce personne.
Lire un document, remplir un formulaire, se renseigner, prendre un rendez-vous, faire ses courses, sociabiliser, communiquer, etc.
Témoignages
- « En 2015, je fêtais ma première déclaration d'impôts en ligne en toute autonomie 🎉. »
- Roger Voice a changé ma vie ! 💚 : Sophie décrit son
« sentiment de liberté […] enivrant »
.
Les personnes handicapées et l’emploi en 2021
Une situation d’insécurité professionnelle permanente.
- Taux de chômage 2 fois plus important que celui du reste de la population : 18% contre 10% (source).
- Risques plus importants de licenciement ou de sous-emploi.
- Le handicap est le premier motif de discrimination en France, cf. rapport du Défenseur des droits 2020.
Crise sanitaire et accessibilité
- Isolement des personnes handicapées ne pouvant se rendre sur leur lieu de travail.
- Nouveaux outils numériques pas toujours accessibles, et impossibilité d’avoir une aide physique des collègues puisque tout le monde est confiné.
Pour aller plus loin :
- Visioconférence et accessibilité : que peut-on espérer ? : comparatif du niveau d’accessibilité des outils de visioconférence ;
- Communiquer à distance de manière accessible : conférence d'Access42 (Sylvie Duchateau) à Paris Web 2020.
Bénéfices de l’Accesssibilité numérique
l’accessibilité peut :
- Porter l’innovation : des fonctionnalités pour l’accessibilité intégrées dans des produits et services résolvent des problèmes inattendus.
- Augmenter les parts de marché : le marché global des personnes ayant un ou plusieurs handicaps est de plus d’un milliard de personnes, avec un pouvoir d’achat de plus de dix mille milliards d'Euros. L’accessibilité numérique augmente souvent l’expérience de tous les utilisateurs.
- Minimiser le risque légal : de nombreux pays ont mis en place des lois exigeant l’accessibilité numérique, et la question légale de l’accessibilité devient de plus en plus prégnante.
- Source d'économies induites et d'une maintenance et un support reduit
Prendre l'accessibilité numérique non comme une contrainte, mais comme une opportunité.
- L’utilisateur au centre des préoccupations.
- Homogénéïser les pratiques redactionnelles vers plus de claireté.
Discussion avant travail pratique N° 1
TP 1 : Installer une synthèse vocale
Installation de NVDA (Pour Windows)
Suivez ce tutoriel très complet :
Tester l’accessibilité d’une page web ou d’un PDF avec NVDA de Atalan.
Activation de VoiceOver (Pour Machintosh)
Les normes et références numériques adressant le handicap
Pour mettre en œuvre l’accessibilité numérique, deux textes de référence
WCAG 🌎
Web Content Accessibility Guidelines (Règles pour l’accessibilité des contenus Web)
- Spécification internationale, émise par le W3C
- Rédigée en anglais, traduite en français
- Norme ISO
- Version actuelle : WCAG 2.2, publiée le 2021, et incluant basse vision, troubles cognitifs et difficultés d’apprentissage
RGAA 🇫🇷
Référentiel Général d’Accessibilité pour les Administrations
Référentiel Général d’Amélioration de l'Accessibilité
- La référence légale française depuis 2009
- Permet d’évaluer la conformité à WCAG
- Héritier d’AccessiWeb
- Dernière mise à jour : 2021
- Nombreuses ressources : a42.fr/ress-rgaa
Principes et recommandations d’accessibilité
Selon les WCAG, le contenu web accessible doit suivre quatre principes : il doit être perceptible, utilisable, compréhensible et robuste. Treize recommandations relèvent de ces quatre principes. Ce sont, pour résumer, des objectifs généraux en terme d’accessibilité. Pour pouvoir appliquer concrètement ces recommandations, elles sont donc accompagnées de critères de succès, qui, eux, sont testables et opérationnels.
Exemples d’erreurs d’accessibilité courantes
Textes en image
À qui les textes en images posent-ils problème ? (1)
1. Personnes malvoyantes, dyslexiques ou présentant un trouble cognitif
Leurs besoins
Augmenter la taille du texte, changer de police de caractères, modifier les contrastes, etc., pour pouvoir lire malgré leurs déficiences.
Ce qui pose problème
Impossibilité de lire et donc d’accéder à l’information car les textes en images ne s’adaptent pas à leurs préférences.
À qui les textes en images posent-ils problème ? (2)
2. Personnes utilisant un lecteur d’écran : personnes aveugles, très malvoyantes ou ayant des difficultés de lecture
Leurs besoins
Des alternatives pertinentes aux images porteuses d’information, restituées par les lecteurs d’écran.
Ce qui pose problème
Impossibilité d’accéder à l’information lorsque l’alternative n’est pas ou mal renseignée (par ex. : impossibilité de contacter le service client).
Solutions 🛠️
- Remplacer les textes en images par du texte stylé avec HTML/CSS.
- Ou : Permettre de remplacer les textes en images par du texte stylé avec HTML/CSS à l’aide d’un mécanisme de remplacement.
Attention : le RGAA autorise l’utilisation de textes en images uniquement lorsque la police de caractères utilisée pour le texte présent dans l’image n’est pas reproductible en CSS (logo, police fantaisiste…).
Référence : critère 1.8 du RGAA 4.
Exemple de mécanisme de remplacement : AccessConfig
Capture d’écran d’AccessConfig, un petit outil basé sur JavaScript, développé par Access42. AccessConfig permet de remplacer une image contenant du texte par son alternative textuelle. Ainsi, les personnes qui ont besoin d’adapter l’apparence de ce texte peuvent le faire, par exemple en agrandissant la taille des caractères, en modifiant les couleurs, etc.
Formulaires
Formulaire à choix multiple
🤔 Problème : un lecteur d’écran va restituer « Oui » et « Non », mais pas la question correspondante. Ceci parce que la question n’est pas reliée techniquement aux champs.
Formulaire à choix multiple accessible
😍 Solution : réunir les champs visuellement et techniquement à l’aide des éléments fieldset
et legend
pour que la question soit bien restituée par les lecteurs d’écran.
Champs aux étiquettes similaires
🤔 Problème : il y a une ambiguïté entre les deux champs prénom lorsque l’utilisateur n’a pas une vision globale de la page
Regrouper les champs aux étiquettes similaires
😍 Solution : distinguer chacun des champs à l’aide des éléments appropriés, fieldset
et legend
, permet de lever l’ambiguïté sur la fonction de chacun des champs pour un utilisateur qui n’a pas accès la mise en forme.
En savoir plus :
Autre difficulté dans les formulaires
Captcha image
Exemple vécu : identification par captcha image pour récupérer les résultats du brevet des collèges
- Graphique : image de vérification.
- Lien : générer un nouveau code de contrôle.
- Saisir le code de contrôle : édition avec auto complétion.
- Bouton « valider ». Bouton « quitter ».
À qui les captchas images posent-ils problème ? (1)
Personnes aveugles ou très malvoyantes
Elles n’accèdent pas au contenu du test, et ne peuvent jamais remplir le code de sécurité.
Personnes ayant des difficultés de décodage de l’écriture (dyslexie par exemple) ou malvoyantes
Impossibilité de lire des caractères qui ont subi une distorsion, et donc de retranscrire le captcha.
Solutions 🛠️
Proposer une solution alternative, par exemple :
- Alternative audio (mais elle doit être audible !)
- Envoi d’un code par email ou par SMS
Tout le monde doit pouvoir réaliser le test, quelles que soient ses déficiences et ses préférences.
Référence : critère 1.4 et critère 1.5 du RGAA 4.
Autres difficultés dans les formulaires (1)
Erreurs de saisie signalées uniquement par la couleur
- L’indication par la couleur est difficile ou impossible à percevoir pour les personnes malvoyantes, daltoniennes, et/ou utilisant un lecteur d’écran, s’il n’y a pas d’alternative.
- Il leur est impossible de savoir où se situe l’erreur, de la corriger et de soumettre le formulaire.
Documents bureautiques en téléchargement
Des documents souvent inaccessibles
Beaucoup de documents bureautiques en téléchargement sont inaccessibles.
C’est le cas notamment des documents imprimés, signés puis scannés : c’est comme si on recevait une lettre manuscrite, et non un document numérique.
Ça donne quoi, un PDF inaccessible ?
La synthèse vocale d’un lecteur d’écran dit : « Ce document semble vide. Il s'agit peut-être d’un document mal structuré ou d’une image numérisée nécessitant la reconnaissance optique des caractères
».
À qui les PDF inaccessibles posent-ils problème ? (1)
1. Personnes malvoyantes, dyslexiques ou présentant un trouble cognitif
Leurs besoins
Adapter la présentation des contenus à l’écran pour pouvoir lire (augmenter la taille du texte, changer de police de caractères, modifier les contrastes, etc.)
Ce qui pose problème
Impossibilité de personnaliser le texte = impossibilité de lire.
À qui les PDF inaccessibles posent-ils problème ? (2)
2. Personnes utilisant un lecteur d’écran : personnes aveugles, très malvoyantes ou ayant des difficultés de lecture
Leurs besoins
Accéder à l’information avec un lecteur d’écran.
Ce qui pose problème
Le contenu est restitué comme une image sans alternative : accès à l’information impossible.
Recours éventuel à un logiciel de numérisation, ou à une tierce personne pour lire le document… ≠ autonomie.
Solutions 🛠️
Fournir une version accessible en plus du document téléchargeable inaccessible, par exemple :
- au format HTML ;
- au format Word structuré avec des titres, listes, etc.
Référence : critère 13.3 et critère 13.4 du RGAA 4.
Vérificateur d’accessibilité dans Word
Pour en savoir plus : Guide sur les lecteurs d’écran
Règles d’accessibilité indispensables
Respecter la hierarchie des titres
Besoins utilisateurs
-
Personnes aveugles et grands malvoyants :
- pouvoir naviguer de titre en titre,
- pouvoir retrouver facilement de l'information dans le contenu.
- Personnes handicapées moteur : naviguer plus vite grâce à des extensions navigateurs.
Ce qu’il faut éviter : une hiérarchie de titres incomplète ou brisée
Par exemple, un titre h3
ne peut pas suivre un titre h1
: il faut forcément qu’il suive un titre h2
, etc.
À noter :
- on peut avoir plusieurs
h1
dans une page ; - il n’est pas obligatoire que la hiérarchie de titres d’une page commence par un
h1
.
- Référence RGAA 3 :
- 9.1 [A]
Problématique utilisateurs
Manque de clarté et problème de mémorisation des abréviations et acronymes, même courts.
Solution
Indiquer immédiatement après l’abréviation sa signification entre parenthèses, lors de sa première occurrence.
Exemple : TVA (Taxe sur la valeur ajoutée).
Déficiences principalement impactées
- Dyslexie
- troubles de l’attention
- troubles de la mémoire
Définir les termes inhabituels
- Références RGAA :
- 13.9 [AAA]
- 13.10 [AAA]
Besoins utilisateurs
Comprendre les textes complexes, en particulier en cas de vocabulaire spécifique à un domaine d’expertise donné.
Solutions
- Créer un glossaire, s’il y a beaucoup de mots complexes.
- S’il y en a peu, on peut les définir dans la page.
Déficiences principalement impactées
- Dyslexie et dysorthographie
- dyspraxie
- troubles de la mémoire
Besoins utilisateurs
Un univers visuel trop riche est un obstacle pour les personnes dyspraxiques visuo-spatiales.
Solutions
- Prévoir une description détaillée pour chaque image complexe (infographie, plan…).
- Prévoir un résumé pour chaque tableau complexe.
- Prévoir une alternative à l’information donnée uniquement par la forme, la taille ou la position.
Déficiences principalement impactées
- Dyspraxie
- troubles de l’attention
En savoir plus : a42.fr/dyspraxie-vs
Donner le contrôle sur les contenus en mouvement
- Référence RGAA :
- 13.17 [A]
Problématiques utilisateurs
Les contenus en mouvement (animations, carrousels, parallaxe, GIF, vidéos…) peuvent provoquer des étourdissements, des vertiges et de la confusion cognitive.
Solutions
- Permettre d’arrêter et de redémarrer le contenu en mouvement.
- Ou permettre d’afficher tout le contenu sans le mouvement.
- Ou permettre de masquer le contenu en mouvement et de le réafficher.
Déficiences principalement impactées
- Troubles de l’attention
- troubles du système vestibulaire
Laisser le temps nécessaire à l’accomplissement d’une tâche
- Références RGAA :
- 13.1 [A]
- 13.4 [AAA]
Problématique utilisateurs
Les limites de temps sont souvent trop courtes pour que les personnes DYS puissent mener à bien une tâche.
Solutions
- Ne pas imposer de limite de temps, sauf si elle est absolument nécessaire (enchères, jeu concours, réservation de billet de voyage, etc.).
- Prévenir que le temps est presque écoulé et rallonger celui-ci si nécessaire.
Déficiences principalement impactées
- Dyslexie et dysorthographie
- dyspraxie
- troubles de l’attention
- troubles de la mémoire
- dyscalculie
Testez votre cours en utilisant uniquement la touche Tab de votre clavier
- Tab ou Shift + Tab pour revenir en arrière.
- L’ordre de tabulation doit être cohérent, y compris en RTL (right to left).
- Repérez et supprimez les éventuels pièges au clavier.
À noter : il se peut que vous ayez besoin d’activer certaines options de votre navigateur et/ou de votre OS pour pouvoir parcourir les pages en tabulant.
Outline
-
ne pas le supprimer
avec les propriétés CSS
outline
,outline-color
,outline-width
ououtline-style
; -
ne pas le dégrader
avec la propriété CSS
outline-color
.
Mais vous pouvez le renforcer !
À noter :
La pseudo-classe :focus-visible
fait apparaître l’outline
à la tabulation uniquement, et pas au clic. Mauvais support mais polyfill disponible.
Besoins utilisateurs
- Personnes handicapées moteur qui naviguent exclusivement au clavier. Besoin de voir où se trouve le focus dans la page.
- Personnes ayant des troubles de l’attention ou de la mémoire Besoin de retrouver rapidement où elles en étaient.
- Référence RGAA 3 :
- 10.7 [A]
Respecter les rapports de contraste du RGAA
Éléments devant être suffisamment contrastés :
- les textes HTML ;
- les textes présents dans les images ;
- les textes incrustés dans les vidéos ;
- et, dans WCAG 2.1, les composants d’interface non textuels porteurs d’information (un bouton d’action actif contenant une icône par exemple) : a42.fr/wcag21-contrastes
Les rapports de contraste attendus entre la couleur du texte et la couleur de son arrière-plan varient en fonction de la taille de texte, de sa graisse et du niveau d’accessibilité visé.
En savoir plus : a42.fr/contrastes
Un réflexe à acquérir : Colour Contrast Analyser
Indiquer le poids, le format et si besoin la langue de chaque fichier téléchargeable
Ces informations permettent à l'utilisateur de connaître les caractéristiques du fichier et d’évaluer si oui ou non il va le télécharger.
- Référence RGAA 3 :
- 13.6 [A]
Besoins utilisateurs
- Personnes aveugles et grands malvoyants : certains formats bureautiques sont plus ou moins compatibles avec les technologies d’assistance.
- Personnes handicapées mentales : l’indication de poids renseigne l’utilisateur sur le temps à attendre avant de pouvoir consulter le fichier.
- Personnes handicapées moteur : elles peuvent rencontrer des difficultés pour passer facilement du navigateur au lecteur de fichier et inversement.
Les outils de visioconférence
Avantages et inconvénients de la communication à distance
Avantages des outils de communication à distance pour les personnes handicapées
- Rompre l'isolement
- Permettre une meilleure inclusion des personnes
Avantages des outils de communication à distance pour les personnes handicapées
Permettre à différentes personnes de communiquer en compensant leurs difficultés :
- Difficultés à se déplacer ;
- Difficulté de lecture des documents écrits
- Difficultés de compréhension de ce qui est dit
- Problèmes d’écriture
- Difficultés de communication
Les inconvénients de la communication à distance
- Isolement de la personne
- Pas d’aide physique possible
- Concentration immense sur écran
- Inaccessibilité des outils : incompatibilité avec la technologie d'assistance utilisée, jusqu'à la perte de l'emploi
Besoins pour l’accessibilité d’un outil de visioconférence
- Pouvoir s’y connecter : autoriser la caméra et le micro, activer le bouton de connexion
- Accéder aux boutons pour contrôler le micro, la caméra, lever la main
- Connaître l’état des boutons : micro coupé ou non
- Être informée de l’arrivée ou du départ de participants
- Savoir qui est en train de parler
Besoins pour l’accessibilité d’un outil de visioconférence
- Accéder au tchat, être informée de l’arrivée des messages, lire leur contenu
- Bénéficier de sous-titres / vélotypie
Big Blue Button
Améliorer l'accessibilité de Big Blue Button
- Les boutons pour couper ou remettre le son/la caméra sont activables au clavier et comportent des raccourcis : alt+majuscule+m pour couper le micro.
- Possibilité d'utiliser le tchat : indication de l'arrivée d'un message et de son auteur
- Indication du nom de la personne qui parle, mais il faut rechercher ce message, elle n'est pas lue automatiquement
- Le partage de diapositives semble compliqué, pas pu tester
- Vélotypie possible mais difficile
Microsoft Teams
Accessibilité de Microsoft Teams
- Boutons étiquetés.
- L'état des boutons est restitué.
- Signalement de l'arrivée de participants.
- Des raccourcis pour couper le micro ou la caméra.
- Tchat accessible.
- Possibilité d'intégrer les sous-titres en français (nouveauté!)
Merci de votre attention !
Des questions ?