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

Accessibility

Hsiaoming Yang
December 21, 2017
Programming
0
290

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

Other Decks in Programming

See All in Programming
メモリウォールを超えて：キャッシュメモリ技術の進歩
kawayu
0
570
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.4k
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
150
フロントエンドテストの育て方
quramy
11
2.9k
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
970
ベクトル検索システムの気持ち
monochromegane
30
9.7k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
150
複数ドメインに散らばってしまった画像…！ 運用中のPHPアプリに後からCDNを導入する…！
suguruooki
0
460
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
850
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.3k
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.4k
「影響が少ない」を自分の目でみてみる
o0h
PRO
1
780

Featured

See All Featured
Code Reviewing Like a Champion
maltzj
522
39k
Producing Creativity
orderedlist
PRO
344
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
4 Signs Your Business is Dying
shpigford
183
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
510
Measuring & Analyzing Core Web Vitals
bluesmoon
6
370
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Raft: Consensus for Rubyists
vanstee
137
6.9k

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