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

Accessibility

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

 Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Avatar for Hsiaoming Yang

Hsiaoming Yang

December 21, 2017

More Decks by Hsiaoming Yang

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

Other Decks in Programming

See All in Programming
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
820
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
2
480
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
230
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
540
Nuxt Server Components
Avatar for wattanx wattanx
0
230
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
16
3.5k
安いハードウェアでVulkan
Avatar for Fadis fadis
1
870
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
400
飯MCP
Avatar for Yusuke Wada yusukebe
0
460
実践ハーネスエンジニアリング #MOSHTech
Avatar for Takuma Kajikawa kajitack
7
5.4k
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
130

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
510
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
300
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
140
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
470
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
180
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
170
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k

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