$30 off During Our Annual Pro Sale. View Details »

Accessibility

Hsiaoming Yang
December 21, 2017
Programming
0
200

 Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Hsiaoming Yang

December 21, 2017
Tweet

More Decks by Hsiaoming Yang

See All by Hsiaoming Yang
The modern OAuth 2.0
lepture
2
1.3k
Vue: from view to view
lepture
2
4.7k

Other Decks in Programming

See All in Programming
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
650
Under the hoods: How Quarkus operates with GraalVM demonstrated with Neo4j
michaelsimons
1
710
Kubernetes Admission Webhook Deep Dive
zoetrope
7
640
ネットスーパーにおける商品在庫データのアプリケーション構築事例
10xinc
7
2.6k
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
outsider
0
620
Behat en 2022
pocky
1
150
ぱっと見犬猫っぽいAWSアーキテクチャ図を Amazon Rekognitionで判定しよう
kzkmaeda
0
260
OMO Package of App Unity
appunity
0
650
WebAssembly for the Backend
adriancole
0
160
SvelteKitを本番投入してみて
kubotak
0
230
FlutterKaigi 2022 Keynote
wasabeef
1
240
E2Eテストから負荷試験シナリオを作ってみた / Why do we make a scenario of load testing from E2E testing scenarios
mackee
0
1.9k

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
1
300
Code Reviewing Like a Champion
maltzj
508
38k
Designing with Data
zakiwarfel
91
4.1k
Designing the Hi-DPI Web
ddemaree
273
32k
What’s in a name? Adding method to the madness
productmarketing
11
1.8k
What's new in Ruby 2.0
geeforr
335
30k
Automating Front-end Workflow
addyosmani
1352
200k
Web Components: a chance to create the future
zenorocha
304
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
How GitHub (no longer) Works
holman
298
140k
YesSQL, Process and Tooling at Scale
rocio
158
12k
Typedesign – Prime Four
hannesfritz
34
1.5k

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