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 :
    1. Législation
    2. 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.
plage braille, clavier monomanuel, headstick, eye tracker, lecteur d’écran, contacteur à souffle, casque neuronal, licorne, clavier virtuel

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

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 :

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

Alternative présente ? Oui. Alternative pertinente ? Non ! 😱

Contacter le service client Marcel

À 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

a42.fr/AccessConfig

Capture d’écran d’AccessConfig

Formulaires

Formulaire à choix multiple

Avez-vous un passeport ?

🤔 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

Avez-vous un passeport ?

😍 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

Passager nº1

Passager nº2

🤔 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

Passager nº1

Passager nº2

😍 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.

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

À 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

Les champs obligatoires sont indiqués en rouge.
  1. 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.
  2. 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 ?

À 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
L’outil remonte des alertes sur la structure du document et l’ordre de lecture.

Pour en savoir plus : Guide sur les lecteurs d’écran

a42.fr/lecteurs-ecran

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.

Comment vérifier la hiérarchie des titres sur le Web ?

Hiérarchie de titres brisée sur wordpress.org

Expliquer les abréviations

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

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

Prévoir une alternative aux images complexes et aux tableaux

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

Illustration de Sue Lockwood

Problématiques utilisateurs

Les contenus en mouvement (animations, carrousels, parallaxe, GIF, vidéos…) peuvent provoquer des étour­dis­sements, des vertiges et de la confusion cognitive.

Solutions
  • Permettre d’arrêter et de redémarrer le contenu en mou­ve­ment.
  • Ou permettre d’afficher tout le contenu sans le mou­ve­ment.
  • 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

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.

Besoins utilisateurs

  • Personnes aveugles et déficientes visuelles
  • Personnes handicapées moteur

Outline

  • ne pas le supprimer avec les propriétés CSS outline, outline-color, outline-widthou outline-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.

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

Colour Contrast Analyser

Colour Contrast Analyser est une petite appli gratuite pour MacOS et Windows, qui permet de vérifier que le rapport de contraste entre deux couleurs est conforme.

a42.fr/cca

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.

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 ?