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

Ne parlons plus d’accessibilité ! - KiwiParty 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. Ne parlons plus d’accessibilité !
    Arnaud Delafosse | @arnauddelafosse
    KiwiParty @ BlendWebMix | Lyon, 26 oct. 2017

    View full-size slide

  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…

    View full-size slide

  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

    View full-size slide

  4. Le titre auquel vous avez échappé !

    View full-size slide

  5. 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 ?)

    View full-size slide

  6. « 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 ?!

    View full-size slide

  7. Pourquoi ça bug ?

    View full-size slide

  8. 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.

    View full-size slide

  9. 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.

    View full-size slide

  10. 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 ?

    View full-size slide

  11. 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.

    View full-size slide

  12. 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 ?

    View full-size slide

  13. C’est quoi l’accessibilité web ?

    View full-size slide

  14. L’accessibilité = a11y
    Source : @mds
    (numéronyme)

    View full-size slide

  15. L’accessibilité - définition
    frama.link/TBL-a11y (Fr)
    Source : frama.link/TBL-CERN

    View full-size slide

  16. 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.

    View full-size slide

  17. L’a11y c’est pour qui ?

    View full-size slide

  18. 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.

    View full-size slide

  19. 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.

    View full-size slide

  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.

    View full-size slide

  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.
    Design inclusif,
    Design universel,
    Inclusion numérique.

    View full-size slide

  22. …et chez nous,
    (dév front, dév JS, graphistes, UX, CdP, PO, SM, etc.)
    où est-ce que ça déconne ?

    View full-size slide

  23. Un problème stratégique ET technique

    View full-size slide

  24. Un problème stratégique ET technique

    View full-size slide

  25. Ce que tout·e « dév front »
    DOIT connaître
    a.k.a. Le minimum syndical

    View full-size slide

  26. Le minimum syndical
    ‐ syntaxe HTML logique et valide = structure !
    ‐ hiérarchisation h1-h6
    ‐ , , , , , ,
    ‐ attributs alt bien renseignés (ou pas) sur les
    ‐ formulaires :
    ‐ + attributs for et id ≠ placeholder
    ‐ + pour grouper btns radios / checkbox

    View full-size slide

  27. Le minimum syndical
    ‐ pour chaque page :
    ‐ un attr. lang au + exceptions inline
    ‐ un élément bien renseigné (unique, pas trop long)
    ‐ bouton = (ou )
    ‐ textes de liens qui font sens, même seuls (≠ « Voir plus »)
    ‐ etc. etc.

    View full-size slide

  28. Le minimum syndical
    ‐ pour chaque page :
    ‐ un attr. lang au + exceptions inline
    ‐ un élément bien renseigné (unique, pas trop long)
    ‐ bouton = (ou )
    ‐ textes de liens qui font sens, même seuls (≠ « Voir plus »)
    ‐ etc. etc.

    View full-size slide

  29. 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.

    View full-size slide

  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.

    View full-size slide

  31. Le minimum syndical
    Etc.

    View full-size slide

  32. « Pourquoi faire
    du HTML propre ? »

    View full-size slide

  33. Rappel : qui interprète le HTML ?
    Les Agents Utilisateurs (User Agents)

    View full-size slide

  34. Rappel : qui interprète le HTML ?
    ‐ Navigateurs

    View full-size slide

  35. Rappel : qui interprète le HTML ?
    ‐ Navigateurs
    ‐ Moteurs de recherche

    View full-size slide

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

    View full-size slide

  37. Rappel : qui interprète le HTML ?
    ‐ Navigateurs
    ‐ Moteurs de recherche
    ‐ App de bookmarking / lecture offline
    ‐ WebView (app natives), Facebook, Twitter…

    View full-size slide

  38. 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.

    View full-size slide

  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)

    View full-size slide

  40. Ne pas chercher
    la perfection
    (il y a des expert·e·s pour ça)

    View full-size slide

  41. L’accessibilité c’est…
    …ni la perfection, ni instantané

    View full-size slide

  42. L’accessibilité c’est…
    …de l’amélioration continue

    View full-size slide

  43. 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.

    View full-size slide

  44. Au-delà de faire le job…

    View full-size slide

  45. Au-delà du job…

    View full-size slide

  46. Au-delà du job…

    View full-size slide

  47. Au-delà du job…

    View full-size slide

  48. Par où commencer / approfondir ?

    View full-size slide

  49. Par où commencer / approfondir ?

    View full-size slide

  50. Par où commencer / approfondir ?
    #accessibilité, #a11y, @...
    TheAccesskey, The Paciello Group, A11ycasts…
    Outils, articles etc. : frama.link/a11y-ressources
    web-a11y

    View full-size slide

  51. Qualité web
    Design inclusif
    Design universel
    Inclusion
    numérique
    UX

    View full-size slide

  52. Merci !
    Retrouvez-moi sur Twitter
    @arnauddelafosse
    Remerciements :
    • KiwiParty crew
    • BlendWebMix
    • Aurélien Levy / Temesis
    • Élie Sloïm / Opquast

    View full-size slide