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.

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.
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.
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^o!10. !!!<!-- Et puis nº, est-ce compris par tou·te·s ? !!--> Le coureur <abbr title=“numéro”>n^o!!</abbr>10. !!!<!-- Et on termine avec la lecture au SR !!--> Le coureur <abbr title=“numéro” 
 aria-label=“numéro”>n^o!!</abbr>10.
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