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

Accessibility

Hsiaoming Yang
December 21, 2017
Programming
0
280

 Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Hsiaoming Yang

December 21, 2017
Tweet

More Decks by Hsiaoming Yang

See All by Hsiaoming Yang
The modern OAuth 2.0
lepture
2
1.7k
Vue: from view to view
lepture
2
5.3k

Other Decks in Programming

See All in Programming
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
GAEログのコスト削減
mot_techtalk
0
110
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Domain-Driven Transformation
hschwentner
2
1.9k
Rails アプリ地図考 Flush Cut
makicamel
1
110
チームリードになって変わったこと
isaka1022
0
190
Ruby on cygwin 2025-02
fd0
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Pulsar2 を雰囲気で使ってみよう
anoken
0
230

Featured

See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Designing for Performance
lara
604
68k
GitHub's CSS Performance
jonrohan
1030
460k
Scaling GitHub
holman
459
140k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540

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