Améliorer la participation des personnes handicapées à la société (enfin !) grâce à l’accessibilité numérique

Sylvie DUCHATEAU

BlendWebMix – 25 octobre 2018

Transcription et support de présentation

a42.fr/blend2018

Sylvie Duchateau

  • Consultante en accessibilité numérique.
  • Trésorière de l'Association Nationale des Maîtres de Chiens Guides, ANMCGA.
  • Email : sduchateau@access42.net
  • Twitter : @sylduch

Access42

  • Coopérative (SCOP) et entreprise solidaire d’utilité sociale (ESUS), spécialisée en accessibilité numérique.
  • 9 personnes et une chienne-guide.
  • Accompagnement/stratégie, conseil, audit et formations.
  • Rédaction du RGAA 3.
  • Ressources et outils sous licence libre.
  • Pour mieux nous connaître : a42.fr/liberee

Merci à mes collègues, pour leurs conseils et leur soutien.

L’équipe d’Access42

Au programme

  1. Les personnes handicapées et le numérique.
  2. Exemples pratiques
  3. Quelques pistes.

Les fondamentaux :
handicap, accessibilité et législation

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.

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.

Les personnes handicapées
et le numérique

Utilisation du numérique en France

  • 67% des Français utilisent l’e-administration.
  • 61% ont fait un achat en ligne au cours des 12 derniers mois.
  • 59% sont inscrits sur des réseaux sociaux.

Source : Baromètre du numérique 2017 : équipement, usages et compétences numériques des Français, enquête sur les « Conditions de vie et les aspirations » juin 2017, réalisée par le CREDOC

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.

Handicap en France 12 millions de personnes concernées

= 1 personne sur 5.

Une pluralité d'outils

Il existe de très nombreuses aides techniques (ou 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

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

Le numérique en 2018 : un rendez-vous manqué !

Frustration et découragement au quotidien

L'immense majorité des contenus numériques est inaccessible.

Nous sommes encore une fois exclues de la société.

Témoignages

Les personnes handicapées et l'emploi en 2018

Une situation d'insécurité professionnelle permanente.

Le taux de chômage des personnes handicapées est 2 fois supérieur au reste de la population (19% contre 10%).

Pour les salarié·es handicapé·es, risques plus importants de licenciement ou de sous-emploi.

La discrimination représente le premier motif de signalement auprès du Défenseur des droits.

Décision du Défenseur des droits de février 2017 : Discriminations : accessibilité des logiciels utilisés par les agents publics, des administrations encore en défaut.

Norme et référentiel pour produire des sites et contenus accessibles

  • Une norme internationale : WCAG 2.1
  • Un référentiel français pour appliquer la norme : RGAA 3
  • De nombreuses ressources permettant la prise en main du référentiel, par corps de métier (designer, chef de projet, développeur…) et type de développement (web, mobile) : a42.fr/ress-rgaa

Exemples d'erreurs basiques

Textes en image

Présence oui, pertinence non !

😱 Impacts utilisateurs

Utilisateurs malvoyants, dyslexiques ou présentant un trouble cognitif
  • Besoin d’adapter la présentation des contenus à l’écran pour faciliter la lecture (agrandir la taille des caractères, changer de typo, de couleurs de texte etc..)
  • Les textes en images rendent impossibles ces adaptations de présentation
Utilisateurs de lecteurs d’écran
(personnes aveugles, très malvoyantes ou ayant des difficultés de lecture)
  • Le contenu restitué à l’utilisateur est l’alternative de l’image
  • Si l’alternative n’est pas ou mal renseignée, l’utilisateur n’accède jamais à cette information (ici, impossibilité de contacter le service client)

Guide « Défauts d’accessibilité : Impacts sur les utilisateurs », Chapitre Images

🛠️ Solutions

  • Remplacer les images textes par du texte stylé en HTML/CSS
  • Mettre à disposition un mécanisme de remplacement des images texte par du texte stylé
(Note : Vous voyez en capture d’écran un petit outil basé sur JavaScript (que nous développons), qui permet d’injecter le texte contenu dans l’alternative de l’image en remplacement de l’image elle-même. Ce qui permet ensuite aux personnes qui le souhaitent d’adapter l’apparence du texte)

Important : les images textes sont admises uniquement dans les cas où la police n’est pas reproductible en CSS (logo, typo fantaisiste)

Ressources : Critère 1.8 et Critère 1.9 du RGAA 3

Formulaires

  • Réserver un billet
  • Déclarer ses impôts
  • Rechercher un document.

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.

Erreurs de saisies signalées uniquement par la couleur

* champs obligatoires

Passager nº1

🤔 Problème :

  • L’erreur de saisie n’est pas perceptible (utilisateurs aveugles ou déficients visuels) (l’information véhiculée par la couleur n’est pas restituée par un lecteur d’écran et Un utilisateur qui a des troubles de la perception des couleurs peut ne pas percevoir cette mise en forme
  • Impossible de savoir où se situe l’erreur
  • Impossible de terminer le processus

Erreurs de saisies signalées

* champs obligatoires

Passager nº1

Erreur dans l’adresse email.
Exemple d’email valide : audrey@gmail.fr

😍 Solution : ajouter un texte adjacent au champ qui retranscrive l’information véhiculée par la couleur. Dans le cas de champs formatés, ajouter un exemple réel de saisie.

Captcha image

Récupérer les résultats du brevet de son enfant :
identification par captcha

  • Utilisateurs aveugles : n’accèdent pas au contenu du test, ne peuvent jamais remplir le code de sécurité
  • Utilisateurs avec des difficultés de décodage de l’écriture (dyslexique par exemple) : impossibilité de lire des caractères qui ont subi une distorsion et donc de retranscrire le captcha
  • Dans notre exemple, on ne récupère jamais les résultats d'examen

🛠️ Solutions

  • Pas de captcha.
  • Proposer une solution alternative : alternative audio souvent ... inaudible.
  • Proposer un courriel de contact.
  • Envoi d’un code par SMS.

Documents bureautiques

  • Document image
  • PDF signé

Un PDF inaccessible

😱 Impacts utilisateurs

Utilisateurs malvoyants, dyslexiques ou présentant un trouble cognitif
  • Besoin d’adapter la présentation des contenus à l’écran pour faciliter la lecture (agrandir la taille des caractères, changer de typo, de couleurs de texte etc..)
  • Les documents en images rendent impossibles ces adaptations de présentation
Utilisateurs de lecteurs d’écran
(personnes aveugles, très malvoyantes ou ayant des difficultés de lecture)
  • Le contenu restitué à l’utilisateur indique seulement qu'il s'agit d'une image, aucune information sur ce qu'elle contient.
  • L'utilisateur n'a donc pas accès au texte : recours à un logiciel de numérisation ou à une tierce personne pour lire le document.

🛠️ Solutions

  • Fournir une version HTML équivalente
  • Proposer un document Word correctement structuré (titres, listes…)
mise en oeuvre du vérificateur d'accessibilité dans Word

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

a42.fr/lecteurs-ecran

Vers une amélioration de la situation ?

Opérations bancaires

Pouvoir abandonner un site pour cause d’inaccessibilité :
un rêve devenu réalité

Ancienne banque

  • Identification par clavier virtuel.
  • Mémorisation des chiffres, saisie très lente.
  • PDF images ou protégés en lecture.
  • Double validation de toutes les opérations : par téléphone.
  • Pas de réactivité de la part des personnes concernées contactées par Twitter et courriel.

Nouvelle banque

  • Plus de clavier virtuel.
  • Relevé de compte en PDF accessible avec tableaux structurés.
  • Carte de clés personnelles papier avec alternative en fichier Excel.
  • Problèmes de sécurité et d’accessibilité.
  • Référent accessibilité disponible pour répondre aux doléances.

En résumé

  • Prendre en compte l’accessibilité dès le début du projet.
  • Se former aux règles d'accessibilité : il y en a pour tous les métiers !
  • Avoir en interne une personne référente en accessibilité numérique.
  • Prendre en compte les besoins des utilisateurs, mais les traiter avec discernement.
  • Éviter de se mettre à la place des utilisateurs.

Gardons contact !

  • Notre blog : nos actualités et articles de fond sur l’accessibilité.
    a42.fr/a42-blog
  • Notre lettre d’information : tous les mois, un condensé d’accessibilité dans votre boîte mail.
    a42.fr/newsletter-abonnement
  • Notre compte Twitter : notre veille au quotidien sur l’accessibilité numérique.
    @access42net

Merci de votre attention !

Des questions ?

Suivez-nous sur Twitter : @access42net