單頁式應用中的無障礙設計

Transcript

1. 1 Accessibility in SPA
2. 2 / Kalan Frontend Engineer @LINE Fukuoka Twitter: @kalanyei Blog: blog.kalan.dev Github: kjj6198 Facebook Svelte.js Taiwan
3. 3 Accessibility in SPA
4. Agenda 4 WCAG / WAI-ARIA UI
5. Accessibility 5 Web Content Accessibility Guideline
6. Story Time 6
7. Story Time 7 jason-memo.dev/posts/prefer-tab-over-space-for-a11y/
8. Story Time 8 https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb
9. 9 W3C
10. 10 W3C
11. 11 W3C
12. WCAG: Web Content Accessbility Guidelines How to meet WCAG 12 P 
 erceivable O 
 perable U 
 nderstandable R 
 obust
13. 13 Windows Narrator MacOS iOS VoiceOver Android TalkBack
15. Demo 15
16. WCAG 16 https://www.w3.org/WAI/WCAG21/quickref https://www.w3.org/TR/WCAG21
18. 18 20 1 🇯🇵
19. 19 🇺🇸
20. 20 🇹🇼 119.8 5.1%
24. 24 aria role WAI-ARIA
25. ARIA (Accessible Rich Internet Applications) HTML aria roles 25 aria-label aria-labelledby aria-haspopup aria-expanded aria-modal aria-valuenow aria-posinset aria-describedby aria-labelledby combobox
26. 26 - ARIA
27. ARIA 27 UI HTML tag UI
28. button = <div> + onclick 28
29. 29 input button a tabindex=0 tabindex=-1
32. id 32
33. aria-label aria-describedby 33
37. aria-label aria-describedby 37
40. modal 40
41. overlay ESC modal modal modal body 41 Try to use it via screen reader
42. 42 Bad👎
43. 43 Good👍
44. combobox 44
47. 47 1. 2. enter 3.
49. 1. role combobox 2. aria-haspopup aria-expanded 3. aria-controls 4. role listbox 5. role option 6. aria-selected true 49
50. Google 50 d
51. downshift 51 You need an autocomplete, a combobox or a select experience in your application and you want it to be accessible. You also want it to be simple and fl exible to account for your use cases. Finally, it should follow the ARIA design pattern for a combobox or a select, depending on your use case.
52. Tab 52
53. 1. 2. 3. tablist tab tabpanel UI 4. tabindex="-1" aria-selected="false" tab 53
55. Slider 55
56. 56 1. role slider 2. 3. tabindex 4. aria-valuemin aria-valuemax aria-valuenow 5. aria-valuetext 6. aria-orientation
58. YouTube 58
59. Live Region - 59
61. role="status" aria-live="polite" role="alert" aria-live="assertive" + aria-atomic="true" 61
62. Real Time Notification 62
70. Client Side Routing 70
71. gatsby - announcer popstate URL 71
72. @reach/ui 72 https://reach.tech/
73. 73 WCAG alt tag button, a e.g
74. Dev Tool - Edge 74
76. UI 76 MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility
77. 77 30 0 1 Svelte UI Day12 ~ Day20 UI
78. UI 78 https://www.w3.org/WAI/ARIA/apg/patterns/
79. 79 相
80. POUR WCAG 80