Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Other Decks in Programming

See All in Programming
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
470
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
15k
Module Harmony
Avatar for petamoriken / 森建 petamoriken
2
610
なあ兄弟、 余白の意味を考えてから UI実装してくれ！
Avatar for Ryomm ktcryomm
10
11k
配送計画の均等化機能を提供する取り組みについて(⽩⾦鉱業 Meetup Vol.21@六本⽊（数理最適化編))
Avatar for 伊豆原基人 izu_nori
0
120
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
Avatar for TVer Inc. techtver
PRO
3
1.4k
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
Avatar for Agata Naomichi agatan
2
6.2k
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
Avatar for Kazuki Hara harappa80
0
260
WebRTC、 綺麗に見るか滑らかに見るか
Avatar for sublimer sublimer
1
140
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
190
テストやOSS開発に役立つSetup PHP Action
Avatar for Atsushi Matsuo matsuo_atsushi
0
140
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
Avatar for Tomohisa Takaoka tomohisa
5
18k

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
780
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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