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

Accessibility

Avatar for Hsiaoming Yang Hsiaoming Yang
December 21, 2017
Programming
0
300

 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.7k
Vue: from view to view
Avatar for Hsiaoming Yang lepture
2
5.4k

Other Decks in Programming

See All in Programming
AIエージェントによるテストフレームワーク Arbigent
Avatar for takahirom takahirom
0
340
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
490
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み～ / cdk-language-transformation
Avatar for k.goto gotok365
7
400
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
Avatar for Kenji Kazumura kazumura
1
150
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
Avatar for Tajima Sachiko schktjm
1
710
20250528 AWS Startupイベント登壇資料：AIコーディングの取り組み
Avatar for Hanse Kim procrustes5
0
140
インターフェース設計のコツとツボ
Avatar for おぎ togishima
2
670
テスト分析入門/Test Analysis Tutorial
Avatar for Hiroki Iseri goyoki
13
2.8k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
Avatar for CUEBiC Inc. cuebic9bic
3
310
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
2
910
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.6k
AIにコードを生成するコードを作らせて、再現性を担保しよう！ / Let AI generate code to ensure reproducibility
Avatar for Yusuke Yamada yamachu
7
6.2k

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Building Adaptive Systems
Avatar for Chris Keathley keathley
42
2.6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
100
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k

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