Accessibilité numérique :
les clés pour se lancer

par Loriane Buffet, Copsaé

Les midis érudits - Palo IT
28 septembre 2022

Présentation

  • Loriane Buffet
    (Twitter : @elbuffeto)
  • Consultante en accessibilité web et développeuse de sites web accessibles, chez Copsaé
    (Twitter : @copsae_access)

Copsaé

Avant de rentrer dans le vif du sujet...

Un petit rappel ne fait jamais de mal.

Introduction : accessibilité web, où en est-on ?

Une personne malvoyante utilisant une loupe d’écran sur un site web - Description détaillée ci-après
Crédit image : Sherm pour « Disabled and here» 

  1. Sur 1 million de sites analysés en 2022, 96,8% des pages d'accueil présentent des erreurs de conformité aux règles d’accessibilité automatiquement détectables (Source : enquête réalisée par Webaim) ;
  2. Il y a donc énormément à faire pour rendre le web accessible, mais c'est un sujet auquel les gens s'intéressent de plus en plus.

Introduction : bref rappel du cadre législatif et réglementaire

  1. Les obligations légales sont fixées par l'article 47 de la loi Handicap 2005-102 et son décret d’application de 2019 ;
  2. Pour s'assurer de la conformité aux règles d'accessibilité, on s'appuie sur le RGAA (Référentiel Général d’Amélioration de l’Accessibilité), basé sur la norme internationale WCAG (Web Content Accessibility Guidelines) ;

Accessibilité, ça y est je me lance !

Est-ce si compliqué que cela en a l'air ?

On se dit que ça va être facile (1/2)

Résultats de la recherche "rendre son site web accessible" sur Google :

« La bonne nouvelle, c’est qu’il vous suffit d’apporter quelques petits changements à votre site web pour le rendre plus accessible. »

5 façons de rendre votre site web accessible à tous

On se dit que ça va être facile (2/2)

Parmi les conseils les plus donnés :

  • Ajouter un texte alternatif aux images ;
  • Avoir un ratio de contraste de couleurs suffisant ;
  • Utiliser des titres pour structurer le contenu ;
  • Tester son site avec des outils de tests automatiques.

Ces conseils vont permettre de régler certains problèmes mais ils sont loin d'être suffisants.

On se décourage

La documentation officielle sur l'accessibilité web est difficile à appréhender.

  • WCAG : en anglais, très long, avec beaucoup de cas de figure et de liens. Exemple : le critère de succès 1.1.1 ;
  • RGAA : contenu conséquent avec des notes techniques, un glossaire, une méthodologie de tests.

On peut vite avoir l'impression de se retrouver face à une montagne infranchissable.

Montagne
Montagne - Crédit image : David Mark, Pixabay

La découverte de l'accessibilité web en autodidacte...

... et les premières bêtises.

Les erreurs communes : l'accessibilité ne servirait pas qu'aux personnes handicapées (1/5)

On justifie souvent la démarche d'accessibilité par le fait qu'elle présenterait des avantages multiples :

  • Elle bénéficierait aux personnes valides ;
  • Elle améliorerait le référencement ;
  • Elle serait vecteur d’innovation ;
  • Elle améliorerait l’image d’une entreprise.

C’est ce qu’on appelle les bénéfices induits de l’accessibilité, c’est-à-dire les bénéfices supplémentaires qui seraient apportés par l’accessibilité.

Les erreurs communes : l'accessibilité ne servirait pas qu'aux personnes handicapées (2/5)

Rappel utile :

Ne pas tenir compte de ce droit revient à discriminer les personnes handicapées.

Les erreurs communes : l'accessibilité ne servirait pas qu'aux personnes handicapées (3/5)

Mettre en avant les bénéfices induits revient à dire que faire de l'accessibilité uniquement pour les personnes handicapées n'est pas une raison suffisante.

Pourquoi ces bénéfices induits ne sont pas valables ? :

  • « Elle bénéficierait aux personnes valides » :
    On relègue au second plan les besoins essentiels des personnes handicapées et on recentre le débat sur les personnes valides qui sont déjà privilégiées ;
  • « Elle améliorerait le référencement » :
    Certaines règles d'accessibilité et de référencement peuvent se retrouver mais elles peuvent aussi se contredire ;

Les erreurs communes : l'accessibilité ne servirait pas qu'aux personnes handicapées (4/5)

Pourquoi ces bénéfices induits ne sont pas valables ? :

  • « Elle serait vecteur d’innovation » :
    La prise en compte de l'accessibilité ne débouche pas systématiquement sur une invention ;
  • « Elle améliorerait l’image d’une entreprise » :
    Est-ce plus important que l’inclusion des personnes handicapées dans la société ? Attention au handi washing !

Les erreurs communes : l'accessibilité ne servirait pas qu'aux personnes handicapées (5/5)

Promouvoir l'accessibilité en mettant en avant ses prétendus bénéfices induits conduit à invisibiliser les personnes handicapées et leurs besoins réels.

Auto-critique de mon propre parcours : sur mon blog « 100 jours d'accessibilité », au tout début de mon apprentissage, j'ai moi-même utilisé ces arguments.

Recommandation de lecture : Accessibilité numérique : améliorons nos arguments ! par Access42.

Les erreurs communes : certaines règles sont mal comprises (1/3)

Les alternatives d'images

« Ajoutez du texte alternatif à vos images. [...] Ainsi, un utilisateur qui ne peut pas voir votre image saura tout de même ce qu’elle représente. (En bonus : le texte alternatif contribue à améliorer votre référencement SEO.) »

5 façons de rendre votre site web accessible à tous

C'est plus compliqué que ça !

Les erreurs communes : certaines règles sont mal comprises (2/3)

Les alternatives d'images

  • Comme beaucoup de règles en accessibilité... ça dépend ! Voir l'arbre de décision du W3C (World Wide Web Consortium) ;
  • Tous les éléments img doivent avoir un attribut alt (pensez au validateur du W3C !).
    
    <!-- Code invalide -->
    <img src="/mon-image.jpg" />
    
  • Les images purement décoratives doivent avoir un attribut alt vide.
    
    <!-- Image décorative -->
    <img src="/mon-image.jpg" alt="" />
    

Les erreurs communes : certaines règles sont mal comprises (3/3)

Les corrections des outils de tests automatiques

Les corrections proposées peuvent parfois être compliquées à comprendre.

Démonstration sur www.lemonde.fr avec l'extension Axe DevTools : « les liens doivent avoir un texte perceptible ».

Les erreurs communes : on fait pire que mieux (1/2)

Question posée sur Twitter par Jon Avila (@JonAvilaA11y) :

Quelles sont les pires choses que les gens font pour essayer de rendre quelque chose accessible et qui aggravent la situation ?

Source du tweet
  • Ajouter le mot « icon » à toutes les icônes du site ;
  • Mettre un tabindex="0" sur tous les éléments de la page ;
  • Ajouter un aria-hidden="true" sur la balise body.

Les erreurs communes : on fait pire que mieux (2/2)

Une utilisation mauvaise et excessive d'ARIA

  1. ARIA est une spécification rédigée par le W3C qui permet de rendre les contenus web complexes plus accessibles (carrousels, datepickers...) ;
  2. Mal utilisée, ARIA peut se traduire par une expérience encore plus inaccessible que si ARIA n’était pas utilisée ;
  3. « No ARIA is better than bad ARIA » : ARIA ne doit pas être utilisé n'importe comment, il y a des règles précises à suivre.

Les erreurs communes : les outils de surcouche

  1. Module qui propose différents paramètres de personnalisation de l’interface du site (augmenter les contrastes de couleurs du texte, augmenter la taille de police ou l’interlignage...) ;
  2. Si ces outils peuvent parfois rendre plus confortables l’utilisation de certains sites ou se conformer à certains critères d’accessibilité, mais ils ne rendront un site totalement conforme ;
  3. Le déploiement de ces modules peut ajouter de nouveaux problèmes d’accessibilité.

Démonstration sur le site One Click Accessibility.

Recommandation de lecture : Overlay Fact Sheet.

Quand il n'est plus possible d'avancer en solo...

Tout ne repose pas sur une seule personne ou sur un seul métier !

Tous les métiers du web sont concernés par l’accessibilité numérique (1/3)

L'accessibilité du web ne concerne pas uniquement les développeuses et les développeurs, tout le monde doit être formé.

  1. Formation générale de sensibilisation à l'accessibilité pour toutes les personnes de l'entreprise (salarié·e·s et direction incluse) ;
  2. Formation spécialisée pour chaque métier de la chaîne de production d'un site.

Tous les métiers du web sont concernés par l’accessibilité numérique (2/3)

  • Cheffes et chefs de projet :
    • S'assurer de la prise en compte de l’accessibilité à toutes les étapes d’un projet ;
    • S'assurer de la compétence des équipes ;
  • Designeuses et designers : prendre en compte et mettre en œuvre les règles d’accessibilité liées au design, tant sur le plan fonctionnel que graphique ;
  • Développeuses et développeurs : implémenter techniquement l’accessibilité ;

Tous les métiers du web sont concernés par l’accessibilité numérique (3/3)

  • Testeuses et testeurs :
    • Apprendre à utiliser des outils de tests automatisés ;
    • Apprendre à effectuer des tests manuels ;
  • Contributeurs et contributrices :
    • Connaître les règles d'accessibilité pour les contenus web ;
    • Connaître les règles d'accessibilité pour les contenus multimédias ou bureautiques.

Se faire accompagner dès le début du projet

Se faire accompagner par des spécialistes du sujet qui pourront répondre aux questions et connseiller sur la direction à prendre. Ces spécialistes pourront :

  1. Accompagner dans la mise en œuvre de l’accessibilité au sein de l'entreprise ;
  2. S'assurer de la prise en compte de l'accessibilité à la genèse du projet ;
  3. Accompagner les équipes ;
  4. Auditer le travail effectué au fur et à mesure que le projet avance ;
  5. Rédiger la déclaration d’accessibilité et la page d’aide à l’accessibilité.

Recommandation de lecture : En gestion de projet, on ne laisse pas l’accessibilité dans un coin par Laetitia Sahuet.

Conclusion

  1. L'apprentissage de l'accessibilité est un processus long ;
  2. La formation en autodidacte est un premier palier mais qui a des limites ;
  3. Il est nécessaire de se faire accompagner par des spécialistes ;
  4. Au fur et à mesure, on s'améliore sur chaque projet.

Conclusion : quelques derniers conseils

  1. Donner et chercher les sources : les spécifications du W3C (WCAG, ARIA), le RGAA, les articles de blog s’ils sont sourcés et écrits par des personnes qui travaillent sur le sujet ;
  2. Se renseigner sur les handicaps et les impacts en cas de non accessibilité :
    1. Le guide des impacts basé sur le RGAA 3 (donc obsolète et incomplet) ;
    2. Le chapitre « Benefits»  de chaque fiche critère WCAG ;
  3. Documenter le code, les spécifications... tout ce qui peut être documenté ;
  4. Ne pas avoir peur de dire « je ne sais pas»  même si on a reçu une formation ;
  5. Échanger avec d’autres personnes et avoir un ou une mentor expérimentée.

Conclusion : des ressources utiles

  1. La liste de diffusion RGAA ;
  2. Les hashtags #a11y, #accessibilité, #RGAA, #WCAG sur Twitter ;
  3. Les différents guides d’apprentissage de l’accessibilité :
    1. Les guides d’Orange pour le web, les applications mobiles ;
    2. Les différents guides de la DINSIC/DINUM (attention certains se basent sur le RGAA 3 donc des contenus peuvent être obsolètes) ;
    3. Les notices AccedeWeb.

L’ensemble de ces différents guides peut être trouvé sur le wiki de Julie Moynat : Guides d'apprentissage de l'accessibilité.

Merci de votre attention !

Diaporama : conferences.copsae.fr/2022-palo-it

Des questions ?