Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ne parlons plus d’accessibilité ! - KiwiParty 2017

Arnaud Delafosse
October 26, 2017

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

Arnaud Delafosse

October 26, 2017
Tweet

More Decks by Arnaud Delafosse

Other Decks in Design

Transcript

  1. 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…
  2. 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
  3. 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 ?)
  4. « 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 ?!
  5. 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.
  6. 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.
  7. 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 ?
  8. 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.
  9. 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 ?
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. …et chez nous, (dév front, dév JS, graphistes, UX, CdP,

    PO, SM, etc.) où est-ce que ça déconne ?
  16. 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
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐

    Moteurs de recherche ‐ App de bookmarking / lecture offline
  22. Rappel : qui interprète le HTML ? ‐ Navigateurs ‐

    Moteurs de recherche ‐ App de bookmarking / lecture offline ‐ WebView (app natives), Facebook, Twitter…
  23. 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.
  24. 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>
  25. 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.
  26. Par où commencer / approfondir ? #accessibilité, #a11y, @... TheAccesskey,

    The Paciello Group, A11ycasts… Outils, articles etc. : frama.link/a11y-ressources web-a11y
  27. Merci ! Retrouvez-moi sur Twitter @arnauddelafosse Remerciements : • KiwiParty

    crew • BlendWebMix • Aurélien Levy / Temesis • Élie Sloïm / Opquast