Accessibility

83a5c46f52b4835e6048159bfa85478e?s=47 Hsiaoming Yang
December 21, 2017
Programming
0
140

 Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

83a5c46f52b4835e6048159bfa85478e?s=128

Hsiaoming Yang

December 21, 2017
Tweet

More Decks by Hsiaoming Yang

See All by Hsiaoming Yang
83a5c46f52b4835e6048159bfa85478e?s=48 lepture
2
850
83a5c46f52b4835e6048159bfa85478e?s=48 lepture
2
4.2k

Other Decks in Programming

See All in Programming
D79e3b0b78ca7027eb61d73028d45ad6?s=48 uchi_k
0
380
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
2
350
7a4968fbcd56e81f95a4f3c186141b52?s=48 kateinoigakukun
3
210
465a530291aedb53fff5a6333e3dedaa?s=48 bk_18
0
210
C95cdabc569dc4c7750d776687f66037?s=48 yutannihilation
0
110
0d04162c7a3c2907c059a06dbcd23cf4?s=48 tokorom
6
230
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
180
C61a5036d6b7b0529dcac43b411ead62?s=48 minaminao
2
130
575ca492bac55e895d0e1c86f7d709fe?s=48 hschwentner
9
1.6k
023b04c98f39cc041293d780352432ff?s=48 koic
0
700
47c092e185020f83fcb35e3ed998ca0e?s=48 leocavalcante
2
200
376e4eb9dc6c2e33d1330262edc4f109?s=48 janko_m
0
320

Featured

See All Featured
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
144
19k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
87
12k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
23
1.6k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k

Transcript

  1. Accessibility A glimpse of web accessibility

  2. About Me ★ Hsiaoming Yang ★ lepture ★ Flask ★

    https://github.com/lepture ★ https://lepture.com ★ 暁明株式会社

  3. https://typlog.com

  4. https://authlib.org

  5. Accessibility 0

  6. ★ Visual Impairment ★ Hearing Impairment ★ Handicap ★ Left

    hand ★ ......

  7. Real life 1

  8. Japan is doing pretty good in accessibility.

  9. Metro

  10. Toilet

  11. Traffic

  12. On Web 2

  13. “Accessibility is not taken into account.”

  14. Rakuten

  15. Before Programming 3

  16. ~8%

  17. This is a success message This is an error message

  18. This is a success message This is an error message

    ✔ ✗

  19. Trello Labels https://trello.com

  20. Font Size General/Accessibility/Larger Text

  21. Interaction & Feedback button:hover a:hover input:focus

  22. Button Button:hover

  23. – Tyrion Lannister “A mind needs books as a sword

    needs a whetstone if it is to keep its edge.”

  24. VoiceOver 4

  25. General Accessibility

  26. None
  27. None

  28. VO = Control + Option VO + Shift + Down

    Enter an area VO + Shift + Up Leave an area VO + Left Next Element VO + Right Previous Element VO + H Help

  29. Windows https://www.microsoft.com/en-us/accessibility/windows

  30. Accessibility is easy 5

  31. <html lang=“ja”>

  32. Semantic HTML <button> <header> <aside> <img alt=“”>

  33. <a role=“button”> role

  34. Landmarks

  35. None

  36. <a> <i class=“icon-menu” aria-label=“Menu”></i> </a> aria-label

  37. None
  38. None

  39. aria-hidden <a href=“URL”> <i class=“icon-wine” aria- hidden></i> ワイン </a>

  40. aria-live This is a success message ✔

  41. Accessibility is hard 6

  42. ★dialog ★tablist ★select ★etc..

  43. References • https://www.w3.org/TR/wai-aria-practices/examples/ landmarks/HTML5.html • https://developer.mozilla.org/en-US/docs/Learn/ Accessibility/HTML • http://www.w3.org/TR/wai-aria/roles •

    http://a11yproject.com/

  44. – W3C “The Web is fundamentally designed to work for

    all people.”

  45. Thank You Q & A