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
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
実用！Hono RPC2026
Avatar for yodaka yodaka
2
270
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
Avatar for shiro seike seike460
PRO
0
150
実践CRDT
Avatar for tamadeveloper tamadeveloper
0
590
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
710
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
650
JOAI2026 1st solution - heron0519 -
Avatar for heron0519 heron0519
0
150
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
Avatar for Terisuke terisuke
1
490
感情を設計する
Avatar for nakamichi ichimichi
5
1.6k
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
150
AIを導入する前にやるべきこと
Avatar for Negima negima
2
180
GNU Makeの使い方 / How to use GNU Make
Avatar for kaityo256 kaityo256
PRO
16
5.6k
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
470

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
310
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.8k
It's Worth the Effort
Avatar for 3n 3n
188
29k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.4k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
270
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k

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