Les enjeux de l’accessibilité web

En 2020, 98% des homepages ont des erreurs d’accessibilité, alors que la France compte 12 000 000 de personnes en situation de handicap.
Venez découvrir les enjeux, le cadre législatif et les bonnes pratiques permettant à toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder. Avec quantité d'exemples concrets pour illustrer les propos.

Transcript

2. Les enjeux de l’accessibilité web Mezcalito - 32 allée Henri Frenay 38000 Grenoble - 04 76 01 03 91
3. Qui suis-je Jimmy Burbure, 29 ans Intégrateur web depuis 2012 3 ans chez Photoweb 5 ans chez Mezcalito Passionné d’accessibilité depuis 2 ans 3
4. Sommaire 1. Introduction 2. L’accessibilité dans ses principes et son cadre législatif 3. Les technologies d‘assistance 4. Exemples illustrés 5. Et pour finir... 4
5. Introduction 5
6. “L’accessibilité numérique, c’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.” 6 Access 42 https://access42.net/decouvrir-accessibilite L’accessibilité est utile à tous, je peux être en situation de handicap (bras cassé, migraine ophtalmique, etc...)
7. Quelques statistiques Il y a 12 millions de personnes en situation de handicap en France*. * ce chiffre vous surprend ? c'est normal, dans 80% des cas ce handicap n'est pas visible. 7
8. Quelques statistiques En février 2020, 98,1% des homepages ont des erreurs d’accessibilité*. * sur un échantillon d’un million de sites web les plus visités. https://webaim.org/projects/million/ 8
9. Expérience Simuler différents handicaps : https://atalan.fr/agissons/fr/ 9
10. L’accessibilité dans ses principes et son cadre législatif. 10
11. L’accessibilité dans ses principes 11 Perceptible L'information et les composants de l'interface utilisateur doivent être présentés à l'utilisateur de façon à ce qu'il puisse les percevoir. Utilisable Les composants de l'interface utilisateur et de navigation doivent être utilisables. Compréhensible Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles. Robuste Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance.
12. Des définitions importantes W3C World Wide Web Consortium Le World Wide Web Consortium (W3C) est l’organisme de standardisation international chargé de promouvoir la compatibilité des technologies (HTML, CSS…) WCAG Web Content Accessibility Guidelines Les Web Content Accessibility Guidelines (WCAG) sont les recommandations du W3C en terme d’accessibilité numérique. RGAA Référentiel général d’accessibilité pour les administrations Le Référentiel Général d’Accessibilité pour les Administrations (RGAA) est un ensemble de documents administratifs et techniques permettant de vérifier l’application des règles internationales du WCAG. 12
13. Des règles strictes pour un site plus accessible 13 RGAA 4.0 A AA AAA RGAA 4.1 A AA
14. Les normes A, AA, AAA en exemple avec une vidéo Sans norme Vidéo non accessible. 14 Niveau A Il existe des sous-titres si la vidéo est enregistrée. Niveau AA Il existe des sous-titres même si la vidéo est en direct. Niveau AAA En plus des sous-titres, une traduction en langue des signes est disponible.
15. Décret n° 2019-768 du 24 juillet 2019 15 Pour qui ? Ceux qui ont un chiffre d’affaires supérieur à 250 millions d’euros. Quand ? Dès aujourd’hui ! (Et en 2021 en ce qui concerne les applications mobiles et progiciels du secteur public.) Quels risques ? De 2000 à 20 000 euros d’amende par site/application par an !
16. Décret n° 2019-768 du 24 juillet 2019 16 Une “échappatoire” possible : • La taille, les ressources et la nature de l’organisme concerné ne permettent pas [au responsable du site] de l’assurer ; • L’estimation des avantages attendus pour les personnes handicapées de la mise en accessibilité est trop faible au regard de l’estimation des coûts pour l’organisme concerné, compte tenu de la fréquence et de la durée d’utilisation du service, ainsi que de l’importance du service rendu.
17. Être conforme et l’afficher 17 Être conforme au RGAA Et le vérifier avec un audit Publier une déclaration d’accessibilité Avec l‘état et le niveau de conformité
18. C’est aujourd’hui N’attendez plus ! 18
19. Les technologies d’assistance 19
20. Les lecteurs d’écrans Un lecteur d'écran est un logiciel d’assistance technique destiné aux personnes « empêchées de lire » (aveugles, fortement malvoyantes, dyslexiques, dyspraxiques…) : il retranscrit par synthèse vocale et/ou sur un afficheur braille ce qui est affiché sur l'écran d'un ordinateur tant en terme de contenu que de structure et permet d’interagir avec le système d’exploitation et les logiciels applications. 20
21. Les autres technologies • clavier monomanuel • headstick • eye-tracking • clavier visuel • contacteur au souffle • trackball • contrôle par la pensée • etc. 21
22. Exemples illustrés 22
23. Quelques statistiques 23 Source
24. 24 Texte normal WCAG AA : ... Texte large WCAG AA : ... Bon ou mauvais contraste ?
25. 25 Texte normal WCAG AA : OK Texte large WCAG AA : OK Bon ou mauvais contraste ?
26. 26 Texte normal WCAG AA : ... Texte large WCAG AA : ... Bon ou mauvais contraste ?
27. 27 Texte normal WCAG AA : Échec Texte large WCAG AA : OK Bon ou mauvais contraste ?
28. 28 La légende suffit-elle ?
29. 29 Mon compte, recherche, panier ? Les icônes doivent forcément être accompagnées d’un label (visible/invisible ou vocalisable seulement pour les lecteurs d’écrans !)
30. 30 L’importance du flux La navigation au clavier doit permettre à l’utilisateur de se retrouver dans la page grâce à l’indicateur de focus. Si des éléments interactifs ne sont pas bien balisés en HTML, ceux-ci seront invisible pour l’utilisateur.
31. 31 Les sauts de titres Non. <h1>Coucou</h1> … <h2>Les actus</h2> <h4>Actualité 1</h4> <h4>Actualité 2</h4> Oui ! <h1>Coucou</h1> … <h2>Les actus</h2> <h3>Actualité 1</h3> <h3>Actualité 2</h3>
32. 78 critères plus tard... 1. Images 2. Cadres 3. Couleurs 4. Multimedia 5. Tableaux 6. Liens 7. Scripts 8. Éléments obligatoires 9. Structuration de l'information 10. Présentation de l'information 11. Formulaires 12. Navigation 13. Consultation 32
33. Et pour finir... 33
34. L’accessibilité est un travail en commun 34 Webdesign Je dois m’assurer que par exemple... Le contraste des couleurs est suffisant SEO (+ référent accessibilité) La hiérarchie des titres de niveaux est respectée Développeur (+ référent accessibilité) Le site est utilisable entièrement au clavier Éditorial Les intitulés des liens, des boutons sont explicites Vous Exemple : Sous-titrer les vidéos
35. “L'accessibilité n'est pas une contrainte : c'est une philosophie de conception qui vous encourage à faire de meilleurs choix pour vos utilisateurs et vous aide à vous concentrer sur ce qui compte vraiment.” Hubert Florin https://slack.design/articles/accessibility-a-powerful-design-tool/
36. 36 32 allée Henri Frenay 38000 Grenoble 04 76 01 03 91 www.mezcalito.fr Merci !