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

Other Decks in Programming

See All in Programming
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
24
13k
エラー処理の温故知新 / history of error handling technic
Avatar for nakaryo ryotanakaya
7
1.9k
🦞OpenClaw works with AWS
Avatar for matsukada licux
1
370
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
3
450
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
540
新規プロダクトを高速で生み出すハーネスエンジニアリング
Avatar for Ryohei Ikegami seanchas116
3
210
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
200
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
3
1.7k
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
380
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
210
cloudnative conference 2026 flyle
Avatar for azihsoyn azihsoyn
1
200
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
Avatar for HayatoKudou hayatokudou
4
540

Featured

See All Featured
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
7.7k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
200
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
190
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
510
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
120
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
290

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