Un poil d’accessibilité dans votre médiation numérique

Chat roux qui regarder en l’air, vers le titre de la conférence, avec un arc-en-ciel en fond, bien kitsch.

par Julie Moynat, Copsaé

Pour le Hub Conumm
2 juin 2025

Présentation : Julie Moynat

La Lutine du Web
  • Consultante en accessibilité web et développeuse de sites web accessibles
    Copsaé L’Ouvre-Boîtes
  • Blog personnel : La Lutine du Web.

Programme

  1. Conférence d’une heure en 3 parties :
    1. Partie 1 : Introduction sur l’accessibilité numérique ;
    2. Partie 2 : Un poil d’accessibilité pour vos mails, sites et réseaux sociaux ;
    3. Partie 3 : À quoi penser quand on choisit des outils numériques.
  2. Questions pendant 30 minutes.

Diaporama fourni à la fin.

Partie 1 : Introduction sur l’accessibilité numérique

Avec un focus sur l’accessibilité web.

Qu’est-ce que l’accessibilité numérique ?

Une personne malvoyante utilisant une loupe d’écran sur un site web - Description détaillée ci-après
Une personne malvoyante utilisant une loupe d’écran sur un site web

Permettre aux personnes handicapées d’accéder à toutes les informations et d’utiliser tous les services numériques sans barrière, quels que soient le moyen d’accès, les contenus et le mode de consultation.

L’accessibilité numérique implique :

  • Sites web ;
  • Logiciels, applications mobiles, systèmes d’exploitation ;
  • Outils permettant d’accéder au numérique (ordinateur, téléphone, bornes tactiles…).

Handicaps et besoins d’accessibilité web

Quelques exemples…

  • Une personne malvoyante : textes suffisamment contrastés ;
  • Une personne aveugle (navigue avec clavier et lecteur d’écran, parfois avec une plage Braille) : avoir un contenu structuré avec des titres ;
  • Une personne sourde : vidéo sous-titrée ;
  • Une personne tétraplégique qui navigue au contrôle à la voix : boutons et liens avec un nom visible ;
  • Une personne avec trouble de l’attention : mettre en pause les images animées.
Des mains sur un bloc-notes Braille posé sur les jambes de la personne assise.
Une personne aveugle utilise un bloc-notes Braille.

L’accessibilité : un droit humain avant tout

Un droit fondamental défini dans la Convention Relative aux Droits des Personnes Handicapées de 2006 de l’ONU.

Un site web pas accessible :

  1. Difficultés, voire impossibilité, pour les personnes handicapées à l’utiliser ;
  2. Discrimination.

Oppression systémique nommée « validisme » (lire les bonnes résolutions antivalidistes des Dévalideuses).

Bonne résolution n°1 : Je découvre le validisme ! - Description détaillée ci-après

Des lois pour l’accessibilité numérique, en France, depuis 2005

  • Obligation d’accessibilité pour les sites web et applications ;
  • Organismes concernés :
    • Organismes publics ;
    • Organismes privés :
      • Délégataires d’une mission de service public ou avec mission d’intérêt général (sous conditions) ;
      • Avec un chiffre d’affaires de plus de 250 millions d’euros ;
      • À partir du 28 juin, encore plus (dont e-commerce, sous conditions).
  • Depuis 2023 : sanctions et contrôles dans la loi.

Pour creuser le sujet des lois sur l’accessibilité numérique

Trois personnes noires handicapées lèvent le poing devant un mur.
Trois personnes noires handicapées (une personne non-binaire tenant une canne, une personne non-binaire dans un fauteuil roulant électrique, une femme sur une chaise pliante) lèvent le poing.

Le niveau d’inaccessibilité du web

  • Le million WebAIM : plus de 90% du million de pages d’accueil ont des défauts d’accessibilité automatiquement détectables ;
  • Sites publics en France : sur plus de 6000 sites contrôlés par l’Observatoire du respect des obligations d'accessibilité numérique, seuls 26 se déclarent totalement conforme au référentiel d’accessibilité (0,4% !) ;
  • Dématérialisation des démarches forcée mais accessibilité pas au rendez-vous ;
  • Les sites publics devraient tous être accessibles depuis 2011 !
Un paresseux grimpant à un arbre.

Pas d’outil magique pour rendre accessible ou auditer

Chat noir montrant ses canines du bas, portant un chapeau de sorcière et un nœud papillon orange et noir dans un décor d’Halloween.

Rendre accessible à des êtres humains nécessite des êtres humains pour faire le travail correctement.

Et vous qui n’êtes pas des développeurs ou développeuses, en quoi ça vous concerne ?

  1. Vous produisez forcément des contenus (il suffit d’un e-mail) ;
  2. Pour échanger, travailler en collaboration, etc, vous utilisez des outils que toutes les personnes impliquées doivent utiliser.

Or, il y a peut-être une personne handicapée qui vous lit, qui échange avec vous.

Vue en contre-plongée d’un écureuil nous regardant curieux, allongé sur un tronc d’arbre, tête en bas, reposant sur ses coudes et tenant une noisette dans ses pattes.

Partie 2 : Un poil d’accessibilité pour vos mails, sites et réseaux sociaux

Comment produire des contenus un minimum accessibles ? Passons quelques règles en revue.

Structurer ses contenus avec des titres et listes

Objectif : permettre aux personnes aveugles ou ayant un handicap cognitif de se repérer, mieux comprendre, parcourir rapidement le contenu.

  • Quand l’option existe, utiliser titres et listes pour structurer le contenu quand nécessaire ;
  • Ne pas simplement utiliser du texte plus gros ou des tirets mais utiliser les options présentes dans l’éditeur ;
  • Utiliser les titres de manière logique : un titre de niveau 3 est un sous-titre du titre de niveau 2. Vérifiez la hiérarchie avec l’extension de navigateur HeadingsMap (démo HeadingsMap).
Une liste déroulante affichant la possibilité de mettre des titres de niveau 2 à 6.
Option permettant de mettre des titres de différents niveaux (hors niveau 1, réservé au titre de l’article) dans l’éditeur d’un site web. On voit également les 2 boutons pour les listes à puces et numérotées.

Liens : des intitulés informant sur la destination

Objectif : éviter aux personnes aveugles, handicapées motrices ou cognitives, ayant déjà une navigation plus complexe, de visiter des pages pour rien.

  • Si possible : écrire un intitulé explicite informant sur la destination du lien :
    • Éviter « cliquer ici » et URL brutes (https://www.blabla…) ;
    • Préférer les liens explicites comme « En savoir plus sur l’accessibilité numérique » ou intégrés dans une phrase.
  • Pour les hashtags de plusieurs mots, écrire en casse de chameau .
    Exemple : #nonaladissolutiondurgencepalestine devient #NonALaDissolutionDurgencePalestine
La liste des liens de la page d’accueil de PayPal.
Capture de l’outil « Liste d’éléments » du lecteur d’écran NVDA. Il liste tous les liens de la page d’accueil de PayPal où on trouve 3 liens « En savoir plus » à la suite.

Images (1/3) : les alternatives

Objectif : permettre notamment aux personnes aveugles ou très malvoyantes d’accéder aux informations véhiculées par les images.

L’alternative d’image :

  • Est à remplir tout le temps sur les réseaux sociaux ou si seule dans un lien, mais autrement seulement si l’image apporte une information ;
  • Permet de comprendre l’information qu’on veut transmettre via l’image. Pas tous les détails ;
  • Ne donne pas d’information qu’on ne voit pas dans l’image ;
  • Est cachée, donc ne répond pas à tous les besoins (malvoyance, dyslexie…) : éviter les images de texte, sinon recopier le texte brut dans le message visible de toustes, pas dans l’alternative.

Un article pour aller plus loin « Comment partager une image de façon accessible ? », Copsaé

Images (2/3) : décorative ou informative ?

Exemple 1

Regardez qui j’ai vu en bord de Sèvre à Nantes !

Une vache marron avec les poils longs et des grandes cornes passe sa tête par une clôture barbelée et tire légèrement la langue.

Alternative = Une vache marron avec les poils longs et des grandes cornes passe sa tête par une clôture barbelée et tire légèrement la langue.

Exemple 2

Ce taureau Highland (marron à poils longs et grandes cornes), passant sa tête par la clôture barbelée, vous salue en tirant la langue !

Alternative vide ici. L’image est décorative.

Sauf si on est sur les réseaux sociaux : « Le taureau » suffirait alors.

Images (3/3) : avec du texte

Voilà ma nouvelle pancarte antivalidiste pour la manifestation !

L’accessibilité est politique ! Soyez antivalidistes !

Avec le drapeau handi !

La pancarte en carton avec écrit le texte cité dans mon message en noir et rouge et le dessin du drapeau handi (fond noir et 5 bandes en diagonale de couleurs vert, bleu, blanc, jaune, rouge).

Alternative = La pancarte en carton avec écrit le texte cité dans mon message en noir et rouge et le dessin du drapeau handi (fond noir et 5 bandes en diagonale de couleurs vert, bleu, blanc, jaune, rouge).

  • Surtout pas d’URL dans les alternatives !
  • Et les couleurs pour les personnes daltoniennes ?

Caractères spéciaux : gare aux abus !

Objectif : permettre notamment aux personnes aveugles ou dyslexiques de lire et comprendre les contenus.

  • Le faux gras, c’est non ! (démo faux gras)
  • On n’abuse pas des émojis ! (démo émojis)
  • Écriture inclusive : il n’y a pas que le point médian dans la vie :
    1. C’est aussi reformuler : mots épicènes, double flexion, accords de proximité et de majorité, le genre neutre (néologismes et terminaisons collées)…
    2. Abréviations en dernier recours. Si besoin, préférer l’apostrophe : ami’es (une seule apostrophe).

    Les salariés sont tous venus en kilt et nombreux à la réunion.

    Les salarié’es ont toustes assisté en kilt et en nombre à la réunion.

Illustration de caractères fantaisistes et abus d’émojis
Illustration de caractères en faux gras, faux italique, fantaisistes au style gothique ou script ainsi que d’abus d’émojis avec 3 émojis touches de clavier pour former le nombre 100, 3 émojis point d’exclamation rouge, 3 émojis de visage festif - Source : Faux gras, caractères fantaisistes, abus d’émojis : le détournement des caractères Unicode, fléau pour l’accessibilité du web, La Lutine du Web

Multimédia (audio ou vidéo) : le minimum à faire

Objectif : permettre notamment aux personnes ayant un handicap visuel et/ou auditif d’accéder à l’information.

  • Vidéos :
    • Sous-titrer pour les personnes sourdes ou malentendantes ;
    • Vocaliser les informations affichées à l’écran (textes, images qui apportent de l’information) pour les personnes aveugles ou malvoyantes ;
    • Si possible, faire une version texte (transcription textuelle) reprenant les informations sonores et visuelles pour les personnes sourdes-aveugles.
  • Audios (podcasts…) : faire une transcription textuelle reprenant les informations sonores pour les personnes sourdes ou malentendantes.
Vidéo du gouvernement français sous-titrée et avec encadré LSF
Vidéo du gouvernement français où on voit Sophie Cluzel, Secrétaire d’État chargée du handicap en 2020. Ses paroles sont sous-titrées et interprétées en LSF par une interprète incrustée dans un petit encadré en bas de la vidéo. Mais le texte affiché (nom et fonction) n’est pas lu !

Partie 3 : À quoi penser quand on choisit des outils numériques

Se poser la question de comment les personnes handicapées avec qui vous interagissez pourront utiliser les outils dont vous avez besoin.

Questions que vous pourriez vous poser

  • Est-ce que la personne avec qui j’échange est handicapée ? A-t-elle des besoins d’accessibilité pour les outils numériques ? Lesquels ?
  • Comment je lui pose la question sans que ce soit intrusif, si elle ne l’aborde pas elle-même ?
  • La personne veut utiliser tel outil des GAFAM mais je déteste les GAFAM, j’utilise que des logiciels libres. Que faire ?
Sur un meuble au bord duquel se trouve un beau gâteau d’anniversaire, un chat s’approche.

Exemple d’outil : la visio

Bébé chien labrador avec un casque audio sur les oreilles, levant la tête en l’air.

Exemple d’outil : le partage de documents

  • Édition de fichiers collaborative en ligne pas simple pour les personnes aveugles, notamment ;
  • Nextcloud en ligne pas accessible (ça commence à s’améliorer un peu)
    mais on peut se connecter à l’explorateur de fichiers de son ordi
    (mais il faudra sûrement de l’aide d’une personne voyante).
    Google Drive et OneDrive font mieux ;
  • Une solution : envoyer les documents en pièce-jointe d’un mail ;
  • Préférer le partage de fichiers documents DOCX, ODT plutôt que PDF ;
  • C’est à vous de gérer l’accessibilité du contenu des documents.

Lire « Rédiger des documents collaboratifs avec un lecteur d’écran #4 : Google Docs, Framapad ou Word Online ? », Access42, 2018.

Chat assis sur un calepin et qui a sa patte sur son œil, tête baissée, comme s’il se tapait la tête avec la paume.

Questionner les personnes, ne pas imposer d’outil

  • Laisser les personnes dire les outils qu’elles préfèrent :
    Avez-vous un outil de visio préféré ? Si non, je vous propose d’utiliser tel outil. ;
  • Si nécessaire, demander les besoins d’accessibilité concernant les échanges, pas le handicap ;
  • Si l’outil ne fonctionne pas, questionner ses réseaux et des personnes qui ont le même handicap, puis tester avec la personne ;
  • Ne pas imposer, rester flexible (même si ça implique de passer par les GAFAM) !

Note : les outils évoluent tout le temps et l’(in)accessibilité n’est jamais garantie dans le temps.

Cervidé qui tourne la tête vers le haut avec un corvidé sur le dos regardant vers l’objectif.

Conclusion

  • L’accessibilité, c’est l’affaire de toustes, partout, tout le temps ;
  • Questionnez vos façons de faire pour discriminer le moins possible (on ne sait pas tout) ;
  • Écoutez ce que les personnes handicapées vous disent de leurs besoins ;
  • S’adapter et être souple autant que possible ;
  • Cette conférence était trop courte pour tout voir. N’hésitez pas à potasser les ressources et à suivre une vraie formation.
Girafe qui lève la tête bien droite vers le ciel.

Ressources