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

Accessibility

Hsiaoming Yang
December 21, 2017
Programming
0
230

 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.5k
Vue: from view to view
lepture
2
5.1k

Other Decks in Programming

See All in Programming
Site Reliability Engineering for GMO
pyama86
6
840
HUIT新歓2024「競技プログラミング、やってみませんか？」
slephy2784
1
250
今の SmartHR にエンジニアで入社するとどうなるの？
daisukeshinoku
5
4.6k
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
両面どころかインフラもTSでできるよ ～ 全方位TypeScriptによるプロダクト開発 ～
myfinder
9
3.2k
Ruby Function Composition
bkuhlmann
1
330
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
410
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Git Rebase
bkuhlmann
11
1.6k
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
"config" ってなんだ？ / What is "config"?
okashoi
0
210

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Visualization
eitanlees
135
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
353
18k
Designing with Data
zakiwarfel
95
4.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
For a Future-Friendly Web
brad_frost
171
8.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
16
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
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