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

Accessibility

Hsiaoming Yang
December 21, 2017
Programming
0
270

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

Other Decks in Programming

See All in Programming
『改訂新版 良いコード／悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする！効果的な学習アプローチ / effective-learning-of-good-code
minodriven
26
2.9k
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
400
shadcn/uiを使ってReactでの開発を加速させよう！
lef237
0
270
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
1.3k
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
170
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
880
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
510
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
170
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
270
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
420
良いユニットテストを書こう
mototakatsu
11
3.5k
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
230

Featured

See All Featured
Making Projects Easy
brettharned
116
6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How STYLIGHT went responsive
nonsquared
96
5.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Automating Front-end Workflow
addyosmani
1366
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Thoughts on Productivity
jonyablonski
68
4.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Faster Mobile Websites
deanohume
305
30k

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