Ne parlons plus d’accessibilité ! - KiwiParty 2017

// KiwiParty @ BlendWebMix – Lyon, 26 oct. 2017
// Vidéo : https://youtu.be/WTT1wh0v9k8

Il est temps d’inclure l’accessibilité web dans nos bonnes pratiques et nos workflow, et ne plus la considérer comme une cerise sur le gâteau. C’est une question de volonté, pas de compétences.
Arrêtons de la considérer comme un champ relevant de l’expertise de quelques-un·e·s ou comme étant un Graal de perfection inatteignable, elle est tout simplement une brique fondamentale dans une démarche plus globale, inclusive, universelle, de qualité web.

/*
Mise à jour - sept. 2018
L’article 47 (loi du 11 février 2005) a été modifié et dorénavant le montant de 5000 € devient « le montant […] ne peut excéder 25 000 € » (par site web / app et par an) pour l’amende à payer en cas de manquement à faire apparaitre sur la page d’accueil « une mention clairement visible précisant s’il est ou non conforme aux règles relatives à l’accessibilité » ainsi qu’à communiquer la déclaration d’accessibilité (ou de non accessibilité), le schéma pluriannuel de mise en accessibilité et un plan d’action de l’année en cours.
Source : https://www.legifrance.gouv.fr/eli/loi/2018/9/5/2018-771/jo/article_80
*/

Liens
- Tim Berners-Lee et le CERN (Fr) : https://frama.link/TBL-CERN
- Définition de l’accessibilité par TBL (Fr) : https://frama.link/TBL-a11y
- L’accessibilité web par le WAI (En) : http://frama.link/WAI-a11y
- Chiffres 2015 sur le handicap en France, Okeenea (Fr) : http://frama.link/handi-chiffres
- Inclusive Design at Microsoft (En) : https://www.microsoft.com/en-us/design/inclusive
- Ressources (articles, tutos, vidéos, outils, etc.) : http://frama.link/a11y-ressources (document collaboratif ouvert à tou·te·s)

Livres
- "Designing with Web Standards" [En] (3e éd.) de Jeffrey Zeldman
- "HTML5 pour les web designers" [Fr] (2e éd.) de Jeremy Keith
- "HTML & CSS: Design and Build Websites" [En] de Jon Duckett
- "HTML5, une référence pour le développeur web" [Fr] de Rodolphe Rimelé
- "Inclusive Design Patterns" [En] de Heydon Pickering
- "Accessibility for Everyone" [En] de Laura Kalbag
- "Qualité Web - La référence des professionnels du Web" [Fr] (2e éd.) d’Élie Sloïm et Laurent Denis

Arnaud Delafosse sur Twitter : http://twitter.com/arnauddelafosse

Transcript

1. Ne parlons plus d’accessibilité ! Arnaud Delafosse | @arnauddelafosse KiwiParty @ BlendWebMix | Lyon, 26 oct. 2017
2. Arnaud Delafosse Autodidacte du web depuis 2001, je fais aujourd’hui : ‐ Développement front-end ‐ AMOA (assistance à maîtrise d’ouvrage) ‐ Pilotage de projet ‐ Enseignement / formation #RWD #Mobile1st #UX #a11y #dynamicPrototyping…
3. Mais d’abord… DISCLAIMER • Je ne suis pas expert accessibilité • Ce n’est pas une présentation technique • Ce n’est pas une présentation sur le handicap • Les termes « qualité web » et « bonnes pratiques » ≠ Opquast • English inside
5. Le titre auquel vous avez échappé !
6. Où je veux en venir… 1. Il faut vulgariser* l’accessibilité web 2. Cela touche beaucoup de monde 3. Ça n’est ni difficile ni coûteux si c’est fait à temps 4. La responsabilité de tou·te·s de (bien) faire le job 5. Willpower! (Sortir du cadre pro ?)
7. « Mais comment osez-vous ?! » *Vulgariser : Action de mettre à la portée du plus grand nombre, des non-spécialistes des connaissances techniques... (Larousse) ≠ difficulté / expertise / certifications... = démocratisation, diffusion, popularisation... = rendre l’accessibilité plus …accessible ?!
8. Pourquoi ça bug ?
9. Pourquoi ça bug ? L’accessibilité… • fait peur / méconnaissance (= ) • = « les aveugles »  « on a pas de clients aveugles », • « personne ne s’est jamais plaint » / « c’est pas une priorité », • « ça coûte cher » / « ça rapporte rien », • « ça fait des sites moches », • etc.
10. Pourquoi ça bug ? L’accessibilité « c’est compliqué / pour les experts » • WCAG (61 critères, A-AA-AAA), RGAA (Fr), • référentiel AccessiWeb (133 critères, Bronze-Argent-Or), • label e-accessible (5 niveaux), • EN 301 549 (standard européen), European Accessibility Act (proposition de directive européenne), • Section 508 (US), Equality Act 2010 (UK), SGQRI 008-03 (Québec), etc. + des specs écrites pour des expert·e·s, pas des graphistes / développeuses·eurs.
11. L’accessibilité « c’est compliqué / pour les experts » • WCAG (61 critères, A-AA-AAA), RGAA (Fr), • référentiel AccessiWeb (133 critères, Bronze-Argent-Or), • label e-accessible (5 niveaux), • EN 301 549 (standard européen), European Accessibility Act (proposition de directive européenne), • Section 508 (US), Equality Act 2010 (UK), SGQRI 008-03 (Québec), etc. + des specs écrites pour des expert·e·s, pas des graphistes / développeuses·eurs. Pourquoi ça bug ?
12. Pourquoi ça bug ? En France, une contrainte légale sélective, leeeente, floue et peu dissuasive • article 47 de la loi de 2005 + décret d’application 2009 • article 106 de la Loi pour une République numérique (2016) + décret d’app° à venir + 3 ans pour la mise en conformité * • action de groupe (recours collectif ou class action) possible uniquement depuis mai 2017 et via un syndicat ou une association * les contrevenants ne sont quasiment pas pénalisés : amende de 5000 € max.
13. En France, une contrainte légale sélective, leeeente, floue et peu dissuasive • article 47 de la loi de 2005 + décret d’application 2009 • article 106 de la Loi pour une République numérique (2016) + décret d’app° à venir + 3 ans pour la mise en conformité * • action de groupe (recours collectif ou class action) possible uniquement depuis mai 2017 * les contrevenants ne sont quasiment pas pénalisés : amende de 5000 € max. Pourquoi ça bug ?
14. C’est quoi l’accessibilité web ?
15. L’accessibilité = a11y Source : @mds (numéronyme)
16. L’accessibilité - définition frama.link/TBL-a11y (Fr) Source : frama.link/TBL-CERN
17. L’accessibilité - principes Les 4 grands principes de l’accessibilité numérique : ‐ des contenus perceptibles, ‐ utilisables, ‐ compréhensibles ‐ et robustes. Source : frama.link/WAI-a11y [En] C’est le droit universel de pouvoir accéder, comprendre, utiliser et interagir avec un site ou une application.
18. L’a11y c’est pour qui ?
19. L’accessibilité – pour qui ? (Chiffres INSEE – 2015) Source : frama.link/handi-chiffres Personnes en situation de handicap en France : 12 millions de françai·se·s = 20 % de la population …jusqu’à 40% avec les situations de handicap temporaires. + vieillissement de la population.
20. L’accessibilité – pour qui ? Source : Inclusive Design at Microsoft Des types de handicap multiples : • permanent, • temporaire, • situationnel, …pouvant affecter le toucher, la vue, l’ouïe, le langage, la perception.
21. L’accessibilité – pour qui ? Source : Inclusive Design at Microsoft Des types de handicap multiples : • permanent, • temporaire, • situationnel, …pouvant affecter le toucher, la vue, l’ouïe, le langage, la perception.
22. L’accessibilité – pour qui ? Source : Inclusive Design at Microsoft Des types de handicap multiples : • permanent, • temporaire, • situationnel, …pouvant affecter le toucher, la vue, l’ouïe, le langage, la perception. Design inclusif, Design universel, Inclusion numérique.
23. …et chez nous, (dév front, dév JS, graphistes, UX, CdP, PO, SM, etc.) où est-ce que ça déconne ?
24. Un problème stratégique ET technique
25. Un problème stratégique ET technique
26. Ce que tout·e « dév front » DOIT connaître a.k.a. Le minimum syndical
27. Le minimum syndical ‐ syntaxe HTML logique et valide = structure ! ‐ hiérarchisation h1-h6 ‐ <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> ‐ attributs alt bien renseignés (ou pas) sur les <img> ‐ formulaires : ‐ <label> + attributs for et id ≠ placeholder ‐ <fieldset> + <legend> pour grouper btns radios / checkbox
28. Le minimum syndical ‐ pour chaque page : ‐ un attr. lang au <html> + exceptions inline ‐ un élément <title> bien renseigné (unique, pas trop long) ‐ bouton = <button> (ou <input type="button">) ‐ textes de liens qui font sens, même seuls (≠ « Voir plus ») ‐ etc. etc.
29. Le minimum syndical ‐ pour chaque page : ‐ un attr. lang au <html> + exceptions inline ‐ un élément <title> bien renseigné (unique, pas trop long) ‐ bouton = <button> (ou <input type="button">) ‐ textes de liens qui font sens, même seuls (≠ « Voir plus ») ‐ etc. etc.
30. Le minimum syndical ‐ signaler visuellement les états de :hover + :focus ‐ pas de :focus {outline: 0;} ‐ ne pas utiliser QUE la couleur pour différencier les liens (<3 soulignement) ou véhiculer une information ‐ attention aux contrastes ‐ attention au display: none ‐ pas de texte dans les images (utiliser CSS) ‐ etc. etc.
31. Le minimum syndical ‐ signaler visuellement les états de :hover + :focus ‐ pas de :focus {outline: 0;} ‐ ne pas utiliser QUE la couleur pour différencier les liens (<3 soulignement) ou véhiculer une information ‐ attention aux contrastes ‐ attention au display: none ‐ pas de texte dans les images (utiliser CSS) ‐ etc. etc.
32. Le minimum syndical Etc.
33. « Pourquoi faire du HTML propre ? »
34. Rappel : qui interprète le HTML ? Les Agents Utilisateurs (User Agents)
35. Rappel : qui interprète le HTML ? ‐ Navigateurs
36. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐ Moteurs de recherche
37. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐ Moteurs de recherche ‐ App de bookmarking / lecture offline
38. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐ Moteurs de recherche ‐ App de bookmarking / lecture offline ‐ WebView (app natives), Facebook, Twitter…
39. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐ Moteurs de recherche ‐ App de bookmarking / lecture offline ‐ WebView (app natives), Facebook, Twitter… ‐ Technologies d'assistance (Assistive Technologies) • Lecteurs d'écran + synthèse vocale + plage braille • Loupe (zoom) d’écran • Dispositifs d'interaction / commande vocale • Etc.
40. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐ Moteurs de recherche ‐ App de bookmarking / lecture offline ‐ WebView (app natives), Facebook, Twitter… ‐ Technologies d'assistance (Assistive Technologies) <html>
41. Ne pas chercher la perfection (il y a des expert·e·s pour ça)
42. L’accessibilité c’est… …ni la perfection, ni instantané
43. L’accessibilité c’est… …de l’amélioration continue
44. Faire le job N’attendez pas d’être un·e expert·e, intégrez dès aujourd’hui l’accessibilité dans votre workflow, dans votre trousse à outils de bonnes pratiques. Montez progressivement en compétences et dites- vous que vous ne le faites pas pour rendre service à qui que ce soit mais que vous faites votre boulot.
45. Au-delà de faire le job…
46. Au-delà du job…
47. Au-delà du job…
48. Au-delà du job…
49. Par où commencer / approfondir ?
50. Par où commencer / approfondir ?
51. Par où commencer / approfondir ? #accessibilité, #a11y, @... TheAccesskey, The Paciello Group, A11ycasts… Outils, articles etc. : frama.link/a11y-ressources web-a11y
52. Yapuka
53. Qualité web Design inclusif Design universel Inclusion numérique UX
54. Merci ! Retrouvez-moi sur Twitter @arnauddelafosse Remerciements : • KiwiParty crew • BlendWebMix • Aurélien Levy / Temesis • Élie Sloïm / Opquast