introduction à l'accessibilité
DESCRIPTION
Introduction à l'accessibilité à destination des travailleurs du Web. L'objectif et d'inciter les développeurs, chefs de projet et plus à faire de l'accessibilité.TRANSCRIPT
![Page 1: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/1.jpg)
Introduction à l’accessibilité
Par Damien Berseron
![Page 2: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/2.jpg)
Introduction
![Page 3: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/3.jpg)
Handicap
● “Hand in cap”● Sport : volonté de donner autant de chance à chacun● Désavantage d’un individu à accomplir un rôle social dû à sa
déficience partielle ou totale● France : loi du handicap du 11 février 2005 pour l’égalité des
chances
![Page 4: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/4.jpg)
Les différents handicaps
● Moteur● Visuel● Auditif● Mental● Psychique
![Page 5: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/5.jpg)
L’accessibilité du web
● Rendre l’information accessible quelque soit le support● Transposer les informations multimédias● Respecter les standards
Donner la même l’information à tous les utilisateurs
![Page 6: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/6.jpg)
Ce qu’il ne faut pas confondre
● L’UX et l’Accessibilité● “Prendre l'utilisateur pour un imbécile” et l’Accessibilité
![Page 7: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/7.jpg)
Comprendre les référenciels
![Page 8: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/8.jpg)
L’organigramme de l’accessibilité
WAI
WCAGUAAG ATAG
Les référenciels
![Page 9: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/9.jpg)
WCAG
● Web Content Accessibility Guidelines● 4 thématiques● 3 niveaux :
A AA AAANormal Amélioré Ultra Amélioré
![Page 10: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/10.jpg)
La première fois devant un référenciel
![Page 11: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/11.jpg)
Les référenciels Français
RGAAAccessiweb
![Page 12: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/12.jpg)
Accessiweb
● 13 thématiques● 133 critères● 334 tests
● Respect des 3 niveaux : A, AA, AAA● Respect le RGAA
![Page 13: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/13.jpg)
Accessiweb - Exemple de critère
![Page 14: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/14.jpg)
3 concepts favorables
![Page 15: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/15.jpg)
Ne pas être intrusif
Laisser le contrôle à l’utilisateur
Il ne faut pas essayer de deviner comment l’utilisateur va naviguer
![Page 16: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/16.jpg)
Top 5 des idées reçues
![Page 17: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/17.jpg)
“On s’en fou de l’accessibilité, on n’a pas d’aveugle”
TOUT le monde est concerné!!!
![Page 18: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/18.jpg)
“C’est bon les sourds ils auront les sous-titres”
FAUX
![Page 19: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/19.jpg)
“Il ne faut pas dépasser 3 niveaux de titres”
Aucun impact
![Page 20: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/20.jpg)
“Et en plus, c’est bon pour le SEO”
AttentionSEO ≠ Référencement Naturel
![Page 21: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/21.jpg)
“Il faut que ça marche sans JavaScript”
Plus maintenant
![Page 22: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/22.jpg)
Tips & Tricks
![Page 23: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/23.jpg)
Tips & Tricks
● Avoir un markup valide en fonction du type de document● Mettre une alternative sur les images● Mettre un titre sur les balises frame et iframe● Implémenter ARIA● Avoir le plan du document propre
![Page 24: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/24.jpg)
Tips & Tricks
● Ajouter des liens d’évitement● Ne pas mettre de titre sur un lien si il n’y en pas besoin● Donner à l’utilisateur le contrôle pour tout mettre en pause● Ne pas faire de détournement de balise● Avoir un markup sémantique
![Page 25: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/25.jpg)
Tips & Tricks
Faire preuve de bon sens
![Page 26: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/26.jpg)
Conclusion
![Page 27: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/27.jpg)
Conclusion
Rien n’est interdit, mais faites-le accessible
Ça ne coûte pas plus cher de développer en pensant à l’accessibilité !
![Page 28: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/28.jpg)
Alors ? On y va ?
![Page 29: Introduction à l'accessibilité](https://reader033.vdocuments.mx/reader033/viewer/2022052301/5586ea0fd8b42a7b198b4677/html5/thumbnails/29.jpg)
Merci