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

L’accessibilité au delà des specs

L’accessibilité au delà des specs

L’accessibilité doit être considérée dès le début d’un projet. Ce n’est pas une fonctionnalité que l’on ajoute au bon vouloir du client ou du budget. En partie, car c’est un sujet extrêmement vaste, parfois difficile à cerner.

Dans cette conférence abordable et pratique, Hugo vous propose de découvrir ce qu’est l’accessibilité au delà des spécifications, comment elle se confond peu à peu avec le design inclusif, et ce que c’est que de concevoir des produits pour tout le monde.

Kitty Giraudel

October 04, 2018
Tweet

More Decks by Kitty Giraudel

Other Decks in Programming

Transcript

  1. L’accessibilité au
    delà des specs
    @HugoGiraudel — Accessibility advocate @N26 (Berlin, Germany)
    October 4th 2018

    View Slide

  2. Qu’est-ce que
    l’accessibilité ?
    @HugoGiraudel

    View Slide

  3. Un ensemble
    de standards
    @HugoGiraudel

    View Slide

  4. Des interfaces
    pour tous
    @HugoGiraudel

    View Slide

  5. Empathie
    @HugoGiraudel

    View Slide

  6. Ne pas être
    égoïste
    @HugoGiraudel

    View Slide

  7. Design
    inclusif
    @HugoGiraudel

    View Slide

  8. Retour
    d’expérience
    @HugoGiraudel

    View Slide

  9. Handicaps &
    déficiences
    @HugoGiraudel

    View Slide

  10. Visuels
    @HugoGiraudel

    View Slide

  11. Moteurs
    @HugoGiraudel

    View Slide

  12. Cognitifs
    @HugoGiraudel

    View Slide

  13. Auditifs
    @HugoGiraudel

    View Slide

  14. Vocaux
    @HugoGiraudel

    View Slide

  15. Contexte
    @HugoGiraudel

    View Slide

  16. Permanent
    @HugoGiraudel

    View Slide

  17. Temporaire
    @HugoGiraudel

    View Slide

  18. Situationnel
    @HugoGiraudel

    View Slide

  19. Déficiences
    visuelles
    @HugoGiraudel

    View Slide

  20. “Mauvaise”
    vue
    @HugoGiraudel

    View Slide

  21. @HugoGiraudel

    View Slide

  22. Police large
    (16 à 22pt)
    @HugoGiraudel

    View Slide

  23. Contraste
    élevé
    @HugoGiraudel

    View Slide

  24. Avec
    possibilité de
    zoomer
    @HugoGiraudel

    View Slide

  25. Éviter les
    contenus à
    échelle fixe
    @HugoGiraudel

    View Slide

  26. Combiner
    texte, couleurs
    & formes
    @HugoGiraudel

    View Slide

  27. Daltonisme &
    perte de
    contraste
    @HugoGiraudel

    View Slide

  28. Contraste
    élevé
    @HugoGiraudel

    View Slide

  29. Petite police =
    contraste élevé
    @HugoGiraudel

    View Slide

  30. Tester vis-à-
    vis des specs
    @HugoGiraudel

    View Slide

  31. @HugoGiraudel

    View Slide

  32. Jamais la
    couleur seule
    @HugoGiraudel

    View Slide

  33. Attention aux
    éléments à
    code couleur
    @HugoGiraudel

    View Slide

  34. Combiner
    couleurs et
    motifs
    @HugoGiraudel

    View Slide

  35. @HugoGiraudel

    View Slide

  36. Cécité
    @HugoGiraudel

    View Slide

  37. Utilisation du
    clavier
    @HugoGiraudel

    View Slide

  38. Flux de
    contenu
    cohérent
    @HugoGiraudel

    View Slide

  39. Pas de survols
    critiques
    @HugoGiraudel

    View Slide

  40. Textes
    alternatifs
    @HugoGiraudel

    View Slide

  41. Essayer un
    lecteur
    d’écran
    @HugoGiraudel

    View Slide

  42. Déficiences
    motrices
    @HugoGiraudel

    View Slide

  43. Une seule
    main
    disponible
    @HugoGiraudel

    View Slide

  44. Handicaps
    aux membres
    supérieurs
    @HugoGiraudel

    View Slide

  45. Tendinites &
    syndrome du
    canal carpien
    @HugoGiraudel

    View Slide

  46. Tremblements
    & Parkinson
    @HugoGiraudel

    View Slide

  47. Comment
    faire ?
    @HugoGiraudel

    View Slide

  48. Boutons

    en bas de
    l’écran
    @HugoGiraudel

    View Slide

  49. @HugoGiraudel

    View Slide

  50. Éviter le
    multi-touch
    @HugoGiraudel

    View Slide

  51. Éviter les
    gestes
    répétitifs
    @HugoGiraudel

    View Slide

  52. Limiter le
    nombre
    d’actions
    @HugoGiraudel

    View Slide

  53. Être idulgent
    avec la
    précision
    @HugoGiraudel

    View Slide

  54. Tester avec
    son autre
    main
    @HugoGiraudel

    View Slide

  55. Clavier /
    lecteur
    d’écran
    @HugoGiraudel

    View Slide

  56. Déficiences
    cognitives
    @HugoGiraudel

    View Slide

  57. Autisme
    @HugoGiraudel

    View Slide

  58. Mise en page
    cohérente
    @HugoGiraudel

    View Slide

  59. Explicite &
    simple
    @HugoGiraudel

    View Slide

  60. Éviter les
    acronymes &
    idiomes
    @HugoGiraudel

    View Slide

  61. Sous-titrer

    les videos
    @HugoGiraudel

    View Slide

  62. Dyslexie
    @HugoGiraudel

    View Slide

  63. Utiliser une
    police claire
    @HugoGiraudel

    View Slide

  64. ~70 caractères

    / line
    @HugoGiraudel

    View Slide

  65. Hauteur de
    ligne de ~1.5
    @HugoGiraudel

    View Slide

  66. Contraste
    correct
    @HugoGiraudel

    View Slide

  67. Ferrer le
    contenu
    naturellement
    @HugoGiraudel

    View Slide

  68. Fournir
    d’autres
    moyens
    @HugoGiraudel

    View Slide

  69. Troubles
    vestibulaires
    @HugoGiraudel

    View Slide

  70. Éviter la
    parallax
    @HugoGiraudel

    View Slide

  71. Éviter le
    scroll
    automatique
    @HugoGiraudel

    View Slide

  72. Animations
    subtiles
    @HugoGiraudel

    View Slide

  73. Désactiver les
    animations
    @HugoGiraudel

    View Slide

  74. Troubles
    déficitaires de
    l’attention
    @HugoGiraudel

    View Slide

  75. Scénarios
    d’utilisation
    clairs
    @HugoGiraudel

    View Slide

  76. Éviter les
    animations en
    boucle
    @HugoGiraudel

    View Slide

  77. Anxiété
    @HugoGiraudel

    View Slide

  78. Éviter les
    limites dans le
    temps
    @HugoGiraudel

    View Slide

  79. Être clair et
    encourageant
    @HugoGiraudel

    View Slide

  80. @HugoGiraudel

    View Slide

  81. Permettre la
    revue
    @HugoGiraudel

    View Slide

  82. @HugoGiraudel

    View Slide

  83. Syndrome
    post-
    traumatique
    @HugoGiraudel

    View Slide

  84. Avertissements
    de contenu
    @HugoGiraudel

    View Slide

  85. Soigner le ton
    @HugoGiraudel

    View Slide

  86. Éviter les
    plaisanteries
    @HugoGiraudel

    View Slide

  87. Panel varié de
    testeur·euse·s
    @HugoGiraudel

    View Slide

  88. Épilepsie
    @HugoGiraudel

    View Slide

  89. Éviter les
    clignotements
    @HugoGiraudel

    View Slide

  90. Animer à la
    demande
    @HugoGiraudel

    View Slide

  91. Risques de
    crises
    @HugoGiraudel

    View Slide

  92. Déficiences
    auditives
    @HugoGiraudel

    View Slide

  93. Environnement
    bruyant
    @HugoGiraudel

    View Slide

  94. Otites &
    infections
    @HugoGiraudel

    View Slide

  95. Faible
    audition
    @HugoGiraudel

    View Slide

  96. Surdité
    @HugoGiraudel

    View Slide

  97. Comment
    faire ?
    @HugoGiraudel

    View Slide

  98. Sous-titrer les
    vidéos
    @HugoGiraudel

    View Slide

  99. Fournir
    d’autres
    moyens
    @HugoGiraudel

    View Slide

  100. Pour résumer
    @HugoGiraudel

    View Slide

  101. Structure et
    mise en page
    @HugoGiraudel

    View Slide

  102. Contenu et
    ton
    @HugoGiraudel

    View Slide

  103. Couleurs &
    contraste
    @HugoGiraudel

    View Slide

  104. Fonctionnements
    connus
    @HugoGiraudel

    View Slide

  105. Utilisation >
    esthétique
    @HugoGiraudel

    View Slide

  106. Faire mieux
    chaque jour
    @HugoGiraudel

    View Slide

  107. Penser à
    davantage de
    profils
    @HugoGiraudel

    View Slide

  108. Accepter les
    differences
    @HugoGiraudel

    View Slide

  109. Concevoir
    pour tout le
    monde
    @HugoGiraudel

    View Slide

  110. Merci !
    @HugoGiraudel
    October 4th 2018

    View Slide