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

L’accessibilité au delà des specs

Kitty Giraudel
October 04, 2018
Programming
0
330

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

See All by Kitty Giraudel
Designing for the real world
kittygiraudel
0
290
Clever, stop being so
kittygiraudel
0
350
Clever, stop being so
kittygiraudel
1
600
Clever, stop being so
kittygiraudel
2
350
Local styling with CSS Modules
kittygiraudel
21
3k
Three Years of Purging Sass
kittygiraudel
5
940
Keep Calm and Write Sass
kittygiraudel
8
5.5k

Other Decks in Programming

See All in Programming
マイクロサービス環境におけるToilを削減するTerraformの活用 in DMMプラットフォーム
pospome
1
230
第2回 AWSとGitHub勉強会 - CodespacesとHelidonの利用 -
ogiwarat
0
180
CircleCIでChatGPTにエラーの解説を頼んでみた
mfunaki
PRO
0
200
NSSpain 2023: An overview of different approaches to share code across platforms
terhechte
0
130
Google Apps Scriptを使いこなさない方法
efbmzwyk999
0
140
アプリケーションパフォーマンスの計測と改善の方法を勉強している話
devoc
10
2.6k
Rediscover the joy of coding with Creative Coding
clown0082
0
120
拡張機能でええんちゃう？
maepon
0
220
WASMCON2023 Keynoteから見るWASMの今
kojipole
0
120
Migrating From Spring Boot 2 To Spring Boot 3 - What's Jakarta EE Got To Do with It?
ivargrimstad
0
720
ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi
lnit
0
150
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
6
6.9k

Featured

See All Featured
Infographics Made Easy
chrislema
236
17k
Typedesign – Prime Four
hannesfritz
35
1.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
208
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
20k
Faster Mobile Websites
deanohume
296
29k
The Illustrated Children's Guide to Kubernetes
chrisshort
26
45k
Atom: Resistance is Futile
akmur
257
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
16
1.4k
Making the Leap to Tech Lead
cromwellryan
119
8.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
15
1.6k
What the flash - Photography Introduction
edds
64
11k

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