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

Accessibility

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

 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
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
900
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
4.5k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
430
Kiroで始めるAI-DLC
Avatar for kaonash kaonash
2
630
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
テストコードはもう書かない：JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
Avatar for makun makun
0
580
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.5k
Navigating Dependency Injection with Metro
Avatar for Zac Sweers zacsweers
3
3.7k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
710
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
210
Zendeskのチケットを Amazon Bedrockで 解析した
Avatar for ryokosuge ryokosuge
3
320
そのAPI、誰のため？ Androidライブラリ設計における利用者目線の実践テクニック
Avatar for mkeeda mkeeda
2
3k

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.8k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
590
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k

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