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

Accessibility

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

 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
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
Avatar for Mana Takada mana_takada
0
140
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
260
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.5k
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
380
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
420
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
220
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
670
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
220
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
700
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
Avatar for takuya542 takuya542
0
690
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
140
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
880

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k

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