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

Accessibility

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Hsiaoming Yang Hsiaoming Yang
December 21, 2017
Programming
0
320

 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.6k

Other Decks in Programming

See All in Programming
Claude Code の Skill で複雑な既存仕様をすっきり整理しよう
Avatar for yuichiro_takahashi yuichirokato
1
300
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
2k
maplibre-gl-layers - 地図に移動体たくさん表示したい
Avatar for Kouji Matsui kekyo
PRO
0
180
Codex の「自走力」を高める
Avatar for yorifuji yorifuji
0
560
エラーログのマスキングの仕組みづくりに役立ったASTの話
Avatar for Kenichi Shihota kumoichi
0
110
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
140
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
520
Swift ConcurrencyでよりSwiftyに
Avatar for 野瀬田　裕樹 yuukiw00w
0
240
Go1.26 go fixをプロダクトに適用して困ったこと
Avatar for Hiroki Kurasawa kurakura0916
0
330
あなたはユーザーではない #PdENight
Avatar for Takuma Kajikawa kajitack
4
300
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
200
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
200

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
47k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
150
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
150
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
63
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
140
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k

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