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

Accessibility

Avatar for Hsiaoming Yang Hsiaoming Yang
December 21, 2017
Programming
0
300

 Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Avatar for Hsiaoming Yang

Hsiaoming Yang

December 21, 2017
Tweet

More Decks by Hsiaoming Yang

See All by Hsiaoming Yang
The modern OAuth 2.0
Avatar for Hsiaoming Yang lepture
2
1.8k
Vue: from view to view
Avatar for Hsiaoming Yang lepture
2
5.4k

Other Decks in Programming

See All in Programming
Claude Codeで挑むOSSコントリビュート
Avatar for kmuto eycjur
0
180
ECS初心者の仲間 – TUIツール「e1s」の紹介
Avatar for Xing Yahao keidarcy
0
100
物語を動かす行動"量" #エンジニアニメ
Avatar for konifar konifar
14
5.5k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
Avatar for Nealle nealle
0
330
サイトを作ったらNFCタグキーホルダーを爆速で作れ！
Avatar for Yuuki Shimizu yuukis
0
520
Introduction to Git & GitHub
Avatar for Latte72 latte72
0
120
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
240
Infer入門
Avatar for r1ru riru
4
1.6k
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
200
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
360
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
MLH State of the League: 2026 Season
Avatar for Swift theycallmeswift
0
160

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Scaling GitHub
Avatar for Zach Holman holman
462
140k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k

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