Introduction à l'accessibilité - M2 Web éditorial

L’accessibilité est un droit fondamental des personnes handicapées

Comment le mettre en oeuvre ?

  1. Handicap, accessibilité & Législation

  2. L'accessibilité ce n'est pas...

  3. Les technologies d'assistance

  4. Développer des sites web accessibles

  5. Formation, réseaux-sociaux, vidéos et fichiers accessibles

  6. Le numérique en situation / impact sur l'entièreté d'un service

  7. La fausse-bonne idée des surcouches accessibilité

Un petit tour de table

Vous l'avez sûrement déjà fait maintes fois… Recommencez !

  1. Votre prénom (qui sera ajouté à la roue de l'infortune 😈)

  2. Métier/domaine professionnel souhaité ?

  3. Niveau de connaissance en accessibilité web :

    • Débutant : j'en ai entendu parler sans plus.

    • Moyen : J'en ai entendu parler et ai déjà eu l'occassion de l'appliquer à quelques reprises.

    • Plutôt bon : Je m'informe sur le sujet et tente de l'appliquer autant que possible.

Je commence, vous suivez…

Parlons handicap

Rendez-vous sur : ahaslides.com/O2M3R (nouvel onglet)

Le handicap

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 L. 114 du code de l’action sociale et des familles - RGAA (Référentiel Général d'Amélioration de l'Accessibilité)

Définition légale du handicap : 3 éléments

Incapacité. exemple : Une personne ayant une prothèse de jambe barrière environnementale Limitation d'activité. exemple : une personne seule dans son coin (illustration d'un lapin triste)

  • Incapacités personnelles

    (altération substantielle, durable ou définitive d'une ou plusieurs fonctions)

  • Combiné à : Barrières environnementales

  • Impliquant : limitation d’activité ou restriction de participation

C'est le modèle social du handicap (=/= modèle médical)

Handicap ou situation de handicap ?

Tweet de Rashel LaGeekette répondant à un tweet d'Emmanuelle ABOAF. Transcription ci-après

Description de l'image

Emmanuelle ABOAF (@eaboaf_)

Avis à la population présente à #ParisWeb : les personnes handicapées (les pers sourdes, malentendantes, aveugles, malvoyantes, dyslexiques, à mobilité réduite et autres) sont là à la Paris Web. N’hésitez pas à aller les voir, leur poser des questions sur l’accessibilité ou autres.

Rashel LaGeekette (@RashelMedia)

"Personnes en situation de handicap" svp, pas "personnes handicapées", merci :)

Emmanuelle ABOAF (@eaboaf_)

Je suis désolée que le terme ne vous convienne pas ou vous met à l’aise mais c’est bien le bon terme. Il faut dire les choses telles qu’elles sont. Je ne suis pas en situation de handicap. Je suis sourde et de facto handicapée des oreilles. :)

Rashel LaGeekette (@RashelMedia)

Merci pour votre réponse Emmanuelle. Je travaille dans une Entreprise Adaptée, également ESUS (80% de la team en situation de handicap) et je vous confirme que le terme à utiliser est "personne en situation de handicap", mais les vieilles habitudes ont la vie dure :) Bonne soirée!

Emmanuelle ABOAF (@eaboaf_)

Je pense qu’on n’arrivera pas à se mettre d’accord. Ce n’est pas grave. Nous avons chacune son propre avis sur le sujet. 😉 Bonne soirée à vous aussi.

Un traitement nuancé

un handicap peut faire partie de l'identité d'une personne (culture sourde, troubles neuro-développemental comme l'autisme...) ou au contraire engendrer des croyances limitantes auxquelle la personne ne veut pas être associée

Le plus important étant de respecter l'avis de chacun et de ne SURTOUT pas imposer son opinion !

La manière la plus objective de formuler ce questionnement serait de dire que l'accessibilité permet aux personnes handicapées de ne pas être en situation de handicap numérique.

Quels sont les types de handicaps ?

  • Visuel : cécité (plage braille & lecteur d'écran), âge (glaucome, cataracte... utilisent le zoom), daltonisme, photophobie & photosensibilité.

  • Auditif : surdité totale ou partielle.

  • Moteur : paralysie, tremblements, dyspraxie.

  • Trouble du développement intellectuel/difficultés d'apprentissage.

  • Mental, cognitif ou psychique : troubles neuro-développementaux (dyslexie, TSA, TDA/H...), maladie neurologique (Alzheimer...), AVC, troubles psychiatriques (schizophrénie...), vieillissement…

Le handicap à l'épreuve de la société

Eugénisme et reconnaissance tardive

Affiche de propagande du régime nazi par le magazine Neues Volk comprenant une photo d'une personne handicapée avec un médecin et un texte traduit ci-après

Traduction de l'affiche : « La vie de cette personne atteinte d'une maladie héréditaire coûte 60 000 Reichsmarks à la communauté nationale. Camarade, c'est aussi ton argent. »

  • Le programme d’euthanasie & Aktion T4 : meurtre systématique des patients handicapés placés dans des institutions en Allemagne. Lancé en 1939 (environ deux ans avant la « solution finale » visant les juifs d'europe). 250 000 individus furent tués.

  • l'extermination douce / Hécatombe des fous : Abandon et mort lente, de faim, de froid et de carence de soins, de plus de 45 000 personnes présentant des troubles mentaux dans les hôpitaux psychiatriques français durant l'Occupation.

La convention relative aux droits des personnes handicapées a été adopté par l'ONU en… 2006 !

Le porno d'inspiration (inspiration porn)

Stella Young : capture de sa conférence

Voir la vidéo : Je ne suis pas votre source d'inspiration, merci. - Stella Young

La représentation, ce n'est pas du porno d'inspiration

La représentation est à destination des personnes handicapées

Le porno d'inspiration est à destination des valides

Le validisme

Ne me validez pas, je m'en charge. nos vies = vos vies, lesdevalideuses.org

Le validisme se caractérise par la conviction de la part des personnes valides que leur absence de handicap et/ou leur bonne santé leur confère une position plus enviable et même supérieure à celle des personnes handicapées. […]

Le validisme suppose que la plupart des personnes handicapées se consument dans la plainte, l'aigreur, la frustration ou le regret de ne pas être valides.

Définition du Collectif Luttes et handicaps pour l'égalité et l'émancipation (CLHEE)

Pour la huitième année consécutive, le handicap est la première cause de discrimination en France. (Devant l’origine, l’âge, le sexe ou l’orientation sexuelle!) selon le rapport annuel d'activité du Défenseur des droits (DDD).

Qu'est-ce que l'accessibilité ?

L’accessibilité du web signifie que les sites web, les outils et les technologies sont conçus et développés de façon à ce que les personnes handicapées puissent les utiliser.
Définition du W3C

Les personnes peuvent

  • Percevoir

  • Comprendre

  • Naviguer

  • Interagir

  • Et parfois : contribuer

Le web : Une promesse d'accessibilité

Le pouvoir du Web est dans son universalité. L’accès pour tous, quel que soit le handicap, est un aspect essentiel.
Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web

Le numérique était censé être une réelle avancée pour l’autonomie et l’inclusion des personnes handicapées : accès à la lecture, à l’information, aux démarches administratives, au travail etc. mais sa mauvaise exploitation en ont fait une barrière de plus.

Une promesse qui n'est malheureusement pas tenue aujourd'hui comme en témoigne l'observatoire du respect des obligations d'accessibilité numérique.

Les troubles cognitifs, encore peu étudiés dans le cadre du numérique

  • Prise en compte des handicaps cognitifs et d'apprentissage seulement depuis 2018 dans le WCAG 2.1, la plupart des critères sont de niveau AAA.

  • Les troubles cognitifs peuvent affecter : L'attention, la Mémoire, la perception, les praxies, le langage... Chacun aura ses propres besoins (parfois adressés dans les référentiels).

  • Un des éléments que l'on peut retrouver lié à plusieurs troubles cognitifs (TSA, TDAH, dépression etc...) est la dysfonction exécutive (ensemble assez hétérogène de Processus cognitifs de haut niveau permettant la maîtrise de l'individu par lui-même) : la personne peut avoir des difficultés de planification, d'organisation d'attention, de résolution de problèmes, de prise de décision, de mémoire de travail, de manque de flexibilité cognitive...

  • Pour tout cela : Il convient de limiter les distractions et d'avoir des interfaces de navigation claires, simples et homogènes.

Une conférence pour aller plus loin : Penser l’accessibilité numérique avec les handicaps cognitifs - Lison Fanuel

La théorie des cuillères

Personne Lambda : 100 cuilleres, personne atteinte d'une maladie chronique : 40 cuillères. La théorie des cuillères illustre la gestion de l'énergie quotidienne d'une personne ayant un handicap invisible. @petite.mu_

Vous allez peut-être un jour croiser le chemin d'une personne handicapée qui n'a fait que se battre toute la journée, le tout avec une énergie limitée.

Votre erreur, aussi petite soit-elle, sera peut-être la goutte d'eau qui fera déborder son vase : soyez ouverts d'esprit, ce sont des frustrations et discriminations quotidiennes que nous devons écouter, comprendre et tâcher de résoudre sans laisser notre égo de professionnel se mettre en travers du chemin.

Imaginez les journées de la personne derrière le compte LinkedIn de l'association Valentin Haüy

L’accessibilité et le handicap : les enjeux

  • 1 personne sur 6 est handicapée, 80 % des handicaps sont invisibles et souvent acquis au cours de la vie.

  • Les personnes handicapées participent pleinement à la société (travail, loisirs, consommation) et doivent être intégrées dès la conception des services.

    Côté pro : Les entreprises de plus de 20 employés doivent embaucher des travailleurs handicapés, rendant l’accessibilité des services numériques pros et du quotidien cruciale pour éviter la discrimination à l'embauche (en plus de toutes les autres !).

  • L’accessibilité est pour les personnes handicapées, s’il y a un avantage autre quelconque (SEO, vision d’une page au soleil etc.) c’est collatéral et ne doit pas être mis en avant.

Quelle approche avoir ?

Législation

Dates clés

11 février 2005

L’accessibilité numérique devient une obligation légale pour les sites web du secteur public.

14 mai 2009

Publication du Référentiel Général d’Accessibilité pour les Administrations (RGAA) et des modalités d’application de la loi.

À partir de 2012

L’ensemble des sites web de l’État et des collectivités territoriales doivent être conformes au RGAA.

7 octobre 2016

Extension de l’obligation légale à une partie du secteur privé sous condition de chiffre d’affaires (250 millions d’euros).

20 septembre 2019

Publication de la version 4 du RGAA, qui devient le Référentiel général d’amélioration de l’accessibilité.

9 mars 2023

Transposition de la directive européenne (UE) 2019/882 relative à l’accessibilité des produits et services applicable à partir de 2025.

6 septembre 2023

Sanctions renforcées pour le secteur public (jusqu'à 25 ou 50 000 € selon les infractions) et mise en place d’une autorité de contrôle : l’Arcom.

5 octobre 2023

Publication des WCAG 2.2 par le W3C.

9 octobre 2023

Extension de l’obligation légale à certains secteurs (banques, transports, téléphonie, audiovisuel et commerce électronique) et mise en place de cinq autorités de contrôle supplémentaires : DGCCRF, ARCEP, ACPR, AMF et Banque de France.

Pour plus de détail : Chronologie des évolutions réglementaires en matière d’accessibilité numérique en France - Access42

Entités concernées par l'obligation d'accessibilité

  • Les personnes morales de droit public : État, collectivités territoriales, établissements publics, etc.

  • Les personnes morales délégataires d’une mission de service public ou ayant une mission d’intérêt général : sociétés de transports en commun, sociétés en charge de l’eau et de l’assainissement, offices du tourisme, structures culturelles, etc.

  • Les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros réalisés en France et calculés sur la base de la moyenne des trois années précédentes.

Nouveautés en 2025

Depuis la Transposition de la Directive européenne (UE) 2019/882 relative aux exigences en matière d’accessibilité applicables aux produits et services promulgué le 7 mars 2023 et applicable à partir de 2025 :

  • Les livres numériques

  • Tous les sites et plateformes de commerce.

  • Tous les services bancaires et financiers dès qu’ils s’utilisent au moyen d’une interface numérique.

  • L’ensemble des services de médias audiovisuels

  • Pour les transports, tous les terminaux en libre-service doivent être accessibles. Cela concerne : les terminaux de paiement, d’information, de réservation, d’enregistrements, ou encore les distributeurs de titres de transport.

  • Pour ce qui concerne les services téléphoniques, ce sont essentiellement les interfaces de communications, par exemple les systèmes de visioconférence pour l’interprétariat qui devraient être concernés.

Seules les entreprises privées du secteur des services employant moins de dix personnes et réalisant un chiffre d’affaires inférieur ou égal à 2 M€ sont exemptées de ces obligations. - plus d'informations sur le site de l'Association Valentin Haüy

Livrables attendus

  • Le rapport d'audit : Qui peut-être une auto-évaluation, même si ce n'est pas recommandé.

  • Publication d'une déclaration d'accessibilité (ex : sans audit - paule.bzh & avec audit access42.net

  • l’affichage d’une mention obligatoire du statut de conformité RGAA sur la page d’accueil

  • la publication d’un schéma de mise en accessibilité pluriannuel (exemple de Schéma) d’une durée maximale de 3 ans. Il s’agit d’une feuille de route qui présente la politique de l’entité concernée en matière d’accessibilité numérique et détaille les moyens mis en œuvre.

  • la mise en place d’un moyen de contact dédié et d’une assistance aux utilisatrices et utilisateurs dans un délai raisonnable ;

La priorité pour les utilisateurs : éliminer les erreurs critiques/bloquantes

Selon le brouillon de travail des WCAG 3, une erreur critique est :

  • Éléments susceptibles d'empêcher l'utilisateur de terminer une tâche s'ils sont présents n'importe où dans la vue (exemples : clignotement, blocage du clavier, audio sans pause)

  • Éléments susceptibles d'empêcher l'utilisateur de terminer une tâche s'ils sont présents n'importe où dans la vue (exemples : clignotement, blocage du clavier, audio sans pause)

  • Erreurs qui, lorsqu'elles sont cumulées dans une vue ou à travers un processus, entraînent un échec (exemple : langage confus et ambigu en grande quantité).

Si l'objectif principal de votre page est de faire payer une commande à l'utilisateur, mais que le bouton de validation n'est pas atteignable ou qu'il est bloqué par un CAPTCHA inaccessible : la correction des autres erreurs ne résoud pas le problème.

Qu'est-ce que n'est pas l'accessibilité ?

Accessibilité =/= Inclusion

l'accessibilité fait partie des démarches d'inclusion mais n'est pas la seule.

Aparté sur l'écriture inclusive

L'écriture inclusive n'est pas de l'accessibilité... Mais elle n'est pas non plus (entièrement) en contradiction.

Les différentes formes d'écriture inclusive :

  • abréviations avec point médian (Les utilisateur·rices)

  • L’écriture détaillée / décomposée (Les développeuses et développeurs)

  • L'écriture épiscène ("les personnes malvoyantes")

  • néologismes ("Toustes")

  • l'accord de proximité et l'accord de majorité

À ce jour le plus sûr pour utiliser des formules inclusives et accessibles : éviter le point médian, reformuler pour tirer profit de l'écriture épiscène ou des formes complètes lorsque nécessaire et pratiquer les accords de proximité et de majorité si besoin.

Un article complet sur le sujet : Écriture inclusive et accessibilité numérique - Julie Moynat

Accessibilité =/= Outil SEO

  • Souvent mis en avant pour essayer de "convaincre" de manière détournée des décideurs

  • En réalité cela peut être conflictuel. En cas de conflit : l'accessibilité doit peser plus dans la balance et il y a parfois des astuces pour concilier les deux (pas idéal, mais fonctionne).

  • Pour les récalcitrants : mieux vaux faire le travail en sous-marin que s'enliser dans des conflits sans fin…

Accessibilité =/= Qualité web

Découvrez les règles Opquast

Beaucoup de règles de la checklist Opquast (référence en termes de démarche qualité web) chevauchent, mais tout n'est pas mentionné et la qualité web s'étend à d'autres domaines transversaux. Exemples :

  • Critère Opquast uniquement : "Les données sensibles ne sont pas transmises en clair dans les URL."

  • Critère Opquast & RGAA : "L'information n'est pas véhiculée uniquement par la couleur"

  • Critère RGAA : "Chaque cadre a-t-il un titre de cadre"

Accessibilité =/= fracture numérique & Illectronisme

Il est ici question de difficulté d'accès à internet et d'utilisation des services numériques dus à un manque de contact ou à des incompréhensions.

On parle plus de compétences et d'outillage, ces soucis peuvent être réglés par des politiques d'inclusion et de formation et la mise à disposition d'alternatives physiques (par exemple pour les personnes illettrées ou âgées)

Les technologies d'assistance : naviguer différemment

Lorsque l'on parle de technologies d'assistance on pense souvent aux lecteurs d'écrans, mais ce ne sont pas les seuls ! Exemples de styles de navigation :

Un quizz pour repartir

Rendez-vous sur le quizz : ahaslides.com/KXSN9

L'outil de quizz n'a pas été audité et présente des problèmes d'accessibilité : si vous avez des problèmes d'accès ou besoin d'adaptation, n'hésitez pas à le signaler.

Développer des sites web accessibles : quelques préceptes

Il suffit d'un seul champ de formulaire non labellisé pour compromettre une fonctionnalité complète.

on peut voir cela comme une difficulté, ou au contraire comme quelque chose de rassurant : parfois changer un petit attribut html peut permettre à quelqu'un de compléter une tâche en autonomie.

Tous les ajustements n'ont pas le même impact sur le parcours de l'utilisateur : on priorice les éléments critiques.

Démo : Utiliser le RGAA

Du code valide (et standard !) tu produiras

La mise en place d'un code html & css valide est la base de toute bonne intégration car c'est en grande partie sur cela que reposent les technologies d'assistance. Un code non-valide peut être mal ou pas du tout restitué.

Outil de vérification : Validateur W3C

Note : Le critère propre à cela a été supprimé des WCAG (et peut-être bientôt du RGAA), mais cela reste une bonne aide pour détecter des anomalies.

Des noms accessibles tu définiras

Chaque type de balise a son ordre de priorité pour définir quel label sera restitué à la technologie d'assistance.

Plusieurs options s'offrent à vous selon les types de balises (aria-labelledby, aria-label, title, texte dans la balise visible ou avec une class sr-only etc.).

Ordre de priorité pour une image par exemple : aria-labelledby > aria-label > alt > title. Attention : si un aria-label est défini, l'attribut "alt" sera ignoré.

Liste précisant l'ordre de priorité des labels en fonction des balises (W3C)

La hiérarchie sémantique tu respecteras

- enchainement logique

- éviter si possible de sauter des niveaux de titres

- ne pas utiliser les balises de titre juste pour le style

Exemple d'ajustement de niveau de titre visuel sans compromettre la structure html (dans la sidebar) : Un blog

Des tailles fixes tu n'imposeras pas

Mettre des largeurs et hauteurs fixes est la recette pour un désastre : lors du zoom, pour le responsive, lors de l'édition des contenus.

Des contrastes tu te soucieras

  • Générez une palette accessible et communiquez dessus à vos clients/employeurs.

  • Exemples de générateur de palette accessible : Accessible Brand colors, Paletton

Le focus tu conserveras

L'affichage du focus est la pierre angulaire de la navigation au clavier, son absence rend impossible toute navigation.

Un exemple de gestion et affichage de focus : Maxine Ficheux

Des pièges clavier tu te méfieras

Les informations par la couleur tu ne transmettras pas

  • Testez en passant la page en monochrome

  • Utilisez des formes (exemple trello ci-dessous)

Les images tu décrieras

  • Infographies et image contenant du texte (ex : affiche) = transcription totale (ex : https://www.urssaf.fr/accueil/decouvrir-urssaf.html)

  • Image de produit e-commerce : doit bien véhiculer tout dans la description + dans l'attribut alt la couleur ou le motif par exemple

  • Travailler les descriptifs rendez-les exhaustifs sur le toucher, matière, couleur, forme... Peut servir pour les personnes ayant des sensibilités sensoriels par ex.

  • Imaginez que l'image n'existe pas.

  • Utiliser l'alt decision tree

Les attributs accessibles tu utiliseras

  • ex : aria-expanded pour un menu/bouton. Utile pour les lecteurs d'écran, utilisable dans le css pour s'assurer mentalement de l'avoir bien pris en charge.

  • Toujours prévoir le style de focus avec le hover (exemple : Maxine Ficheux)

Les animations et vidéos en arrière-plan tu limiteras

Des dérogations tu n'abuseras pas

En accessibilité numérique, plusieurs types de contenus ne sont pas soumis à l’obligation de mise en accessibilité :

Certains auditeurs excluent les bannières cookies de leur audit alors qu'elles sont cruciales à l'accès à l'information. - exemple accessible : https://pialab.io/ - exemple de réelle utilisation de site : https://www.youtube.com/watch?v=Uaqo4FOI_DY.

Peut être utilisé pour les vidéos sur plateformes externes par exemple A CONDITION qu'il y ait une alternative & que cela n'interfère pas avec les autres fonctionnalités de la page (non-normatif, mais montre justement que la norme ne fait pas tout).

Pour aller plus loin : https://access42.net/principe-non-interference-accessibilite-numerique/.

Les attributs Aria avec parcimonie tu utiliseras

No ARIA is better than bad ARIA - Aria authoring practices guide

Besoin d'ARIA pour

Pas besoin d'aria pour

des formulaires, des accordéons (sur navigateur récent), des tableaux, des liens simples...

la class : "sr-only" souvent préférée aux "aria-label" car est plus facilement identifié comme du texte et moins oublié lors des traductions par ex. Explication complète sur cette classe

Plus le module interactif est compliqué, plus la mise en accessibilité le sera. S'il y a des oppositions de budget préférer rendre plus minimaliste que rendre moins accessible. Vaut aussi pour l'éco-conception.

Outils & check-lists

Exemple d'audit rapide

Sur le web : Exemple de site commandé avec un intérêt pour l'accessibilité, mais qui a vite dévié lors de son utilisation : d-k.io

Sur mobile : l'application Riffx

Outils utilisés : Validateur de code, NVDA (cheat sheet des raccourcis clavier : twogrey.github.io/NVDA-cheatsheet/), headingsMap, WCAGContrastChecker, wave, Axe, RGAA : critères et tests

à votre tour

Une présentation accessible… à quelques exceptions près !

Ce support est construit comme une page web : les mêmes règles s'appliquent !

Votre mission :

  • Former des groupes de 2 (ou 3 selon votre nombre)

  • Trouver au moins 5 erreurs et le critère associé

  • Proposer une piste de correction

  • Attention : Pas d'IA pour cet exercice !

    Vous pouvez cependant vous servir d'outils de détection automatique dans le navigateur.

les thématiques contenant des erreurs : 1, 3, 4, 6, 8, 9, 10 et 13

La formation accessible

  • Prévoir des alternatives aux éléments inaccessibles (images, vidéos etc…)

  • Si vous utilisez des logiciels bureautiques bien constitués : tirez profit des styles pour structurer le contenu, assurez-vous d'avoir un ordre de lecture adéquat etc.

  • Lorsque vous présentez : Donnez toutes les informations à l'oral

  • Toutes les règles de RGAA qui n'ont pas à trait au code s'appliquent ! Contrastes, langue de document structuration avec des titres, listes etc.

Réseaux sociaux accessibles

Adieu au faux-gras et emoji en remplacement de texte !

Ceux-ci engendrent une très mauvaise lecture par les lecteurs d'écran en restituant très mal ou rien du tout.

Un article complet sur le sujet : Faux gras, caractères fantaisistes, abus d’émojis : le détournement des caractères Unicode, fléau pour l’accessibilité du web

Carousels et autres

Il n'y a généralement pas d'option pour fournir des alternatives satisfaisantes aux carousels linkedIn et parfois même aux images et vidéos selon les réseaux, pour les rendre accessibles à tous, l'idéal reste donc de fournir une transcription textuelle dans une page html à part (au mieux) ou de reprendre le contenu dans le post.

Access42 a publié sur son blog une série sur les réseaux sociaux, à consulter !

à votre tour !

Créez un carousel LinkedIn sur l'accessibilité… En étant accessible !

Les contraintes :

  • En groupe de 2 ou 3

  • 3 pages de carousel carré

  • minimum 1000 caractères

  • Utiliser au moins une liste

  • Doit avoir le potentiel de performer sur Linkedin

    • Phrase d'accroche

    • Se concentrer sur un sujet ou une idée reçue

    • Conclure pour susciter l'engagement

Envoyez vos propositions à pellin.rachel@gmail.com

Des vidéos accessibles

Un player adapté

les gros acteurs du secteur (Vimeo/youtube) ont rendu leur player naviguable, des solutions existent pour les vidéos auto-hébergées (le player natif est bon pour du très basique mais manque d'options et offre une navigation peu agréable voire inaccessible pour certains éléments)

Détail d'un test du player natif

Nécessite des alternatives

Les vidéos, selon leur nature, devront toujours être accompagnées d'un ou plusieurs des éléments suivants

  • Transcription : systématique

  • Sous-titres

  • audio-description (exemple d'audio-description, pas besoin de surcharger)

une transcription :

La pertinence de l'IA

La montée de l'intelligence artificielle est un désastre écologique en devenir, mais elle est extrêmement utile pour facilité la mise en accessibilité des vidéos, via notamment :

  • Sous-titres en temps réel (pour les visio par ex)

  • Transcriptions

  • Speech to text (très utilisé pour les vidéos courtes)

Il reste important de vérifier systématiquement les sorties. Conférence sur le sujet et témoignages de personnes handicapées L’IA et le handicap : progrès ou exclusion ?

Attention : Ce n'est pas parce que quelque chose est caché visuellement que personne ne va le lire. Attention au code généré par IA, testez avec NVDA ! - Voir l'article d'Adrian Rosselli

Des fichiers accessibles

Le constat est simple et rapide : il est possible mais compliqué de rendre les PDF entièrement accessibles, le format word/libre-office est à favoriser lorsque possible et l'idéal reste de publier le contenu du document dans une page html en plus.

Au delà du numérique, l'accessibilité impacte l'entièreté d'un service.

Exemple des alternatives proposées par un opérateur : Bouygues Telecom

Certains services numériques sont proposés sur des bornes - Il faut penser à leur accessibilité physique. Exemple de la Makina Bellèt : le prototype ne permettait pas l'accès au fauteuil roulant, la version définitive a un pied ajustable.

Surcouches d'accessibilité : la fausse-bonne idée

En conclusion

  • Un même problème peut avoir de nombreuses solutions : soyez curieux et formez-vous dans votre domaine de prédilection. Vous avez du pouvoir, ne le gâchez pas !

  • laissez l’utilisateur maître de sa destinée (sons, animations, vidéos etc.)

  • Restez simples, c’est souvent plus accessible, plus éco-conçu et plus performant !

  • Même avec les meilleurs intentions du monde, vous allez faire des erreurs, le sujet est vaste et beaucoup de pros sont mal informés : soyez humbles et ouverts c'est le plus important.

  • Bonus : Ne comptez jamais sur un outil, une surcouche, un bidule pour rendre un site accessible à votre place : ça ne marche pas.

L'accessibilité, c'est partout !

Gif de Marine Le Pen s'écriant ironiquement Ils sont partout

  • Statistiquement, vous côtoyez des personnes handicapées au quotidien (perso, études, travail...).

  • Le droit à la vie privée, c'est pour tout le monde - en particulier dans des sociétés instables.

  • Chaque support que vous produisez, évènement que vous organisez, contenu que vous publiez : il y a des enjeux d'accessibilité.

Certaines choses ne doivent pas être optionnelles dans vos métiers.

l'accessibilité n'est pas une sur-facturation elle fait part intégrante de votre pratique de développeur/designer/rédacteur/community manager.

L'ignorer c'est faire votre travail à moitié voire faillir à votre devoir de conseil si vous travaillez sur le projet d'un client.

Merci pour votre écoute !

Des questions ?

Rachel Pellin
Rachel Pellin

pellin.rachel@gmail.com

webtopie.fr - prachel.fr

/in/rachel-pellin/

Webtopie, développement web éthique et éco-responsable

Crédit illustrations @ paulalee

Participez à l'amélioration continue de ce cours

Avant que le souvenir de cette journée s'efface de votre esprit : prenez moins de 5 minutes pour répondre à ce petit questionnaire.

Vos réponses entièrement anonymes serviront à améliorer ce cours pour ceux qui viendront après vous.

Tous les champs sont facultatifs, vous pouvez répondre uniquement à ce qui vous inspire 😉

Répondre au formulaire