L'accessibilité, c'est simple : revoyons les bases – ConFoo 2017

L'accessibilité, c'est simple : revoyons les bases – ConFoo 2017

Bon d'accord, l'accessibilité ce n'est pas toujours simple. Il existe beaucoup de cas particuliers et de détails à régler. Mais en pratique il existe beaucoup de choses simples à mettre en œuvre qui ne demande pas beaucoup de temps.
Petite séance de rattrapage sur les basiques de l'accessibilité Web à destination des développeurs qui, parfois, doivent mettre le nez dans le HTML et le JavaScript pour rendre le Web meilleur.

Conférence donnée dans le cadre de ConFoo 2017, à Montréal, le jeudi 9 mars 2017.

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.

6362477fcff413a76db8da108fade362?s=128

Damien Senger

March 09, 2017
Tweet

Transcript

  1. L’ACCESSIBILITÉ, C’EST SIMPLE ConFoo • Montréal • 9 mars 2017

  2. Damien Senger designer et développeur web hiwelo.co • @iamhiwelo Raccoon

    Studio web studio raccoon.studio
  3. L’ACCESSIBILITÉ, C’EST SIMPLE : REVOYONS LES BASES

  4. L’accessibilité,
 pourquoi ?

  5. Parce que.

  6. Parce que c’est utile.

  7. Parce que c’est simple.

  8. Parce que c’est nécessaire.

  9. Parce que vous essayez 
 d’être des personnes décentes.

  10. L’accessibilité, pour qui ?

  11. Les personnes avec 
 des habilités particulières.

  12. Donc tout le monde.

  13. Nous avons tou•te•s 
 des habilités particulières ou 
 des

    incapacités temporaires.
  14. Œuvrer pour l’accessibilité, ce n’est pas une lutte contre le

    handicap.
 
 C'est assurer la diversité du web.
  15. Comme l’UX, l’accessibilité est une 
 approche centrée sur l’utilisateur.

  16. L’idée sous-jacente :
 le design inclusif.

  17. Avec l’accessibilité,
 tout est une histoire de nuance : permanent

    • temporaire • situationnel
  18. Adapter son design 
 aux handicaps permanents,
 c’est agir pour

    tou•te•s.
  19. Le design inclusif peut 
 être articulé autour de 5

    pôles.
  20. Un pôle autour de la vision. Cécité Infection oculaire Distraction


    visuelle Icônes Microsoft
  21. Un pôle autour du toucher. Amputation Immobilisation
 temporaire Activité
 parallèle

    Icônes Microsoft
  22. Un pôle autour de l’ouïe. Surdité Infection auriculaire Environnement
 bruyant

    Icônes Microsoft
  23. Un pôle autour de la parole. Non verbaux Extinction
 de

    voix Accent ou
 non natif Icônes Microsoft
  24. Un pôle autour de la compréhension. Autisme Maîtrise partielle
 de

    la langue Contexte
 stressant Icônes Microsoft
  25. L’accessibilité, par le design.

  26. Un design non accessible
 ne peut pas devenir accessible
 par

    son simple développement.
  27. Côté design, c’est déjà gérer le contraste.

  28. None
  29. WebAIM Color Contrast Checker
 http://webaim.org/resources/contrastchecker/

  30. Soyez explicites, clairs et concis.

  31. Prévoyez des alternatives.
 (résumés, sous-titrage, …)

  32. Ne surchargez pas vos utilisateurs.
 (animations, bruit, quantité, …)

  33. Travaillez en détail votre
 architecture de l’information.

  34. Rappelez-vous que l’évident
 n’est pas toujours aussi évident
 qu’on le

    pense.
  35. L’accessibilité, par le code.

  36. Un web accessible, c’est un web sémantique.

  37. HTML5

  38. Utilisez les balises sémantiques
 et les rôles offerts par HTML5.

  39. Apprenez à respecter la spécification HTML5.

  40. None
  41. Toujours préférer les balises
 sémantiques sans changer leur rôle

  42. Il y aura quasiment toujours une solution HTML à vos

    problèmes…
  43. et lorsque ce n’est pas le cas, ARIA est là.

  44. L’accessibilité, par l’exemple.

  45. HTML5 et ARIA,
 les exemples du W3C : 
 https://w3c.github.io/aria-practices/

  46. La base pour débuter : les images !

  47. < !!!<!-- Image décorative sans corrélation avec le contenu !!-->

    <img src="img/example.png" alt=""> !!!<!-- Image apportant une information par rapport au contenu global !!--> <img src="img/example.png" alt="Un chat sur une table">
  48. < !!!<!-- Quand on désire une vraie légende —> <figure>

    <img src="example.png" alt="Un chat sur une table"> <img src="example2.png" alt="Un chat sur une chaise"> <figcaption>Légende!</figcaption> !</figure>
  49. Rappelez-vous que vous pouvez rapidement lier des contenus.

  50. < <h2 id=“ariaTitle”>Titre de la section!</h2> <section aria-labelledby=“ariaTitle”> <p>Texte d’introduction

    de cet exemple!</p> <p>Blabla sans importance!</p> !</section>
  51. Ou indiquer un information 
 portée uniquement par le design

    
 invisible des lecteurs d’écran.
  52. < <section aria-label=“Titre de la section”> <p>Texte d’introduction de cet

    exemple!</p> <p>Blabla sans importance!</p> !</section>
  53. C’est, par exemple, 
 le cas des polices d’icônes.

  54. < <p> Il était l’histoire d’un petit <i class=“icon-cat” aria-hidden=“true”

    
 title=“chat”>!</i> <span class=“sr-only”>chat!</span> qui aimait le lait. !</p>
  55. < <p> Il était l’histoire d’un petit <i class=“ico-cat” title=“chat”

    aria-label=“chat”>!</i> qui aimait le lait. !</p>
  56. < !// Exemple ici de la classe SR only de

    Bootstrap .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  57. Pensez aussi à toujours regarder
 du côté de tous les

    standards…
 comme Unicode également !
  58. < <p> Il était l’histoire d’un petit qui aimait le

    lait. !</p> !!!<!-- ou !!--> <p> Il était l’histoire d’un petit 
 <span aria-label=“chat”>!</span> 
 qui aimait le lait. !</p>
  59. Lorsque vous créez vos 
 polices d’icônes, faites donc attention

    à la signification 
 originale du caractère choisi
  60. Une sombre histoire de numéros : Unicode et les chiffres

    ordinaux
  61. < !!!<!-- En utilisant le caractère Unicode !!--> Le coureur

    nº10. !!!<!-- Seulement il n’est pas toujours disponible dans la police de caractère !!--> Le coureur n<sup>o!</sup>10. !!!<!-- Et puis nº, est-ce compris par tou·te·s ? !!--> Le coureur <abbr title=“numéro”>n<sup>o!</sup>!</abbr>10. !!!<!-- Et on termine avec la lecture au SR !!--> Le coureur <abbr title=“numéro” 
 aria-label=“numéro”>n<sup>o!</sup>!</abbr>10.
  62. None
  63. Des abréviations pour tou•te•s.

  64. < !!!<!-- Parce que tout le monde ne connait pas

    le NYPD —> <abbr title=“New York Police District”>NYPD!</abbr> !!!<!-- Et qu’en plus, avec l’accent c’est mieux !!--> Une enquête rondement menée par le <abbr title=“New York Police District” lang=“en”>NYPD!</abbr>.
  65. Rendre accessible 
 l’écriture non genrée

  66. < !!!<!-- Selon les préconisations quand l’épicène n’est pas possible

    dans un contexte !!--> Lisible de tou·te·s. !!!<!-- Cette graphie est lue par les lecteurs d’écrans !!--> Lisible de tout point médian thé point médian S !!!<!-- La lecture devant en être faite d’après le haut conseil à l’égalité français est !!--> Lisible de toutes et de tous. !!!<!-- Comment le faire lire correctement !!--> Lisible de 
 <span aria-label=“toutes et tous”>tou·te·s!</span>.
  67. L’accessibilité, avec des outils.

  68. L’onglet accessibilité des Dev Tools de Chrome

  69. WCAG Accessibility Audit tool

  70. Web Accessibility Evaluation Tool (WAVE)

  71. Web Accessibility Evaluation Tools List

  72. L’accessibilité, en bref !

  73. L’accessibilité, c’est pour tou•te•s ! 1.

  74. Utiliser correctement HTML5
 c’est la plus grande partie du travail

    2.
  75. La technologie ne rendra pas accessible un design mal conçu

    3.
  76. Posez-vous toujours la question
 “et si (…) ?” 4.

  77. L’évidence n’est jamais évidente. 5.

  78. Merci de votre attention, à vous la parole ! @iamhiwelo