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
   

   View Slide

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

   View Slide

3. L’ACCESSIBILITÉ, C’EST SIMPLE :
   REVOYONS LES BASES
   

   View Slide

4. L’accessibilité,

   pourquoi ?
   

   View Slide

5. Parce que.
   

   View Slide

6. Parce que c’est utile.
   

   View Slide

7. Parce que c’est simple.
   

   View Slide

8. Parce que c’est nécessaire.
   

   View Slide

9. Parce que vous essayez 

   d’être des personnes décentes.
   

   View Slide

10. L’accessibilité,
    pour qui ?
    

    View Slide

11. Les personnes avec 

    des habilités particulières.
    

    View Slide

12. Donc tout le monde.
    

    View Slide

13. Nous avons tou•te•s 

    des habilités particulières ou 

    des incapacités temporaires.
    

    View Slide

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

    

    C'est assurer la diversité du web.
    

    View Slide

15. Comme l’UX, l’accessibilité est une 

    approche centrée sur l’utilisateur.
    

    View Slide

16. L’idée sous-jacente :

    le design inclusif.
    

    View Slide

17. Avec l’accessibilité,

    tout est une histoire de nuance :
    permanent • temporaire • situationnel
    

    View Slide

18. Adapter son design 

    aux handicaps permanents,

    c’est agir pour tou•te•s.
    

    View Slide

19. Le design inclusif peut 

    être articulé autour de 5 pôles.
    

    View Slide

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

    visuelle
    Icônes Microsoft
    

    View Slide

21. Un pôle autour du toucher.
    Amputation
    Immobilisation

    temporaire
    Activité

    parallèle
    Icônes Microsoft
    

    View Slide

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

    bruyant
    Icônes Microsoft
    

    View Slide

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

    de voix
    Accent ou

    non natif
    Icônes Microsoft
    

    View Slide

24. Un pôle autour de la compréhension.
    Autisme
    Maîtrise partielle

    de la langue
    Contexte

    stressant
    Icônes Microsoft
    

    View Slide

25. L’accessibilité,
    par le design.
    

    View Slide

26. Un design non accessible

    ne peut pas devenir accessible

    par son simple développement.
    

    View Slide

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

    View Slide

28. View Slide

29. WebAIM Color Contrast Checker

    http://webaim.org/resources/contrastchecker/
    

    View Slide

30. Soyez explicites, clairs et concis.
    

    View Slide

31. Prévoyez des alternatives.

    (résumés, sous-titrage, …)
    

    View Slide

32. Ne surchargez pas vos utilisateurs.

    (animations, bruit, quantité, …)
    

    View Slide

33. Travaillez en détail votre

    architecture de l’information.
    

    View Slide

34. Rappelez-vous que l’évident

    n’est pas toujours aussi évident

    qu’on le pense.
    

    View Slide

35. L’accessibilité,
    par le code.
    

    View Slide

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

    View Slide

37. HTML5
    

    View Slide

38. Utilisez les balises sémantiques

    et les rôles offerts par HTML5.
    

    View Slide

39. Apprenez à respecter
    la spécification HTML5.
    

    View Slide

40. View Slide

41. Toujours préférer les balises

    sémantiques sans changer leur rôle
    

    View Slide

42. Il y aura quasiment toujours une
    solution HTML à vos problèmes…
    

    View Slide

43. et lorsque ce n’est pas le cas,
    ARIA est là.
    

    View Slide

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

    View Slide

45. HTML5 et ARIA,

    les exemples du W3C :
    

    https://w3c.github.io/aria-practices/
    

    View Slide

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

    View Slide

47. <
    !!!
    
    !!!
    
    

    View Slide

48. <
    !!!

    View Slide

49. Rappelez-vous que vous pouvez
    rapidement lier des contenus.
    

    View Slide

50. <
    Titre de la section!
    
    Texte d’introduction de cet exemple!
    Blabla sans importance!
    !
    

    View Slide

51. Ou indiquer un information 

    portée uniquement par le design 

    invisible des lecteurs d’écran.
    

    View Slide

52. <
    
    Texte d’introduction de cet exemple!
    Blabla sans importance!
    !
    

    View Slide

53. C’est, par exemple, 

    le cas des polices d’icônes.
    

    View Slide

54. <
    
    Il était l’histoire d’un petit
    title=“chat”>!
    chat!
    qui aimait le lait.
    !
    

    View Slide

55. <
    
    Il était l’histoire d’un petit
    !
    qui aimait le lait.
    !
    

    View Slide

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;
    }
    

    View Slide

57. Pensez aussi à toujours regarder

    du côté de tous les standards…

    comme Unicode également !
    

    View Slide

58. <
    
    Il était l’histoire d’un petit qui aimait le lait.
    !
    !!!
    
    Il était l’histoire d’un petit 

    ! 

    qui aimait le lait.
    !
    

    View Slide

59. Lorsque vous créez vos 

    polices d’icônes, faites donc
    attention à la signification 

    originale du caractère choisi
    

    View Slide

60. Une sombre histoire de numéros :
    Unicode et les chiffres ordinaux
    

    View Slide

61. <
    !!!
    Le coureur nº10.
    !!!
    Le coureur no!10.
    !!!
    Le coureur no!!10.
    !!!
    Le coureur aria-label=“numéro”>no!!10.
    

    View Slide

62. View Slide

63. Des abréviations pour tou•te•s.
    

    View Slide

64. <
    !!!
    Une enquête rondement menée par le Police District” lang=“en”>NYPD!.
    

    View Slide

65. Rendre accessible 

    l’écriture non genrée
    

    View Slide

66. <
    !!!
    Lisible de tou·te·s.
    !!!
    Lisible de tout point médian thé point médian S
    !!!
    Lisible de toutes et de tous.
    !!!
    Lisible de 

    tou·te·s!.
    

    View Slide

67. L’accessibilité,
    avec des outils.
    

    View Slide

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

    View Slide

69. WCAG Accessibility Audit tool
    

    View Slide

70. Web Accessibility Evaluation Tool (WAVE)
    

    View Slide

71. Web Accessibility Evaluation Tools List
    

    View Slide

72. L’accessibilité,
    en bref !
    

    View Slide

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

    View Slide

74. Utiliser correctement HTML5

    c’est la plus grande partie du travail
    2.
    

    View Slide

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

    View Slide

76. Posez-vous toujours la question

    “et si (…) ?”
    4.
    

    View Slide

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

    View Slide

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

    View Slide