How To Be a Gentle Citizen Of The Web

As an frontend engineer, we can do better.

Transcript

1. How to be a gentle Citizen of The Web 1 @Kalan Twitter: @kalanyei
2. How to be a gentle Citizen of The Web 2 @Kalan Twitter: @kalanyei
3. Definition of Web Citizen Developer 3 Developer who implements web service The Person who uses website The Computer that search, index the web User Computer
4. Definition of Web Citizen Developer 4 Developer who implements web service The Person who uses website The Computer that search, index the web User Computer
5. Today Topic 5 Accessibility Performance UI / UX
6. Today Topic 6 Accessibility Performance UI / UX
7. What is Accessibility? (a11y) 7 A web that can be accessible to anyone Web Content Accessibility Guideline
8. Why we should care about it? 8 意味がわかるけど なぜ？
9. Definition of Web Citizen Developer 9 Developer who implements web service The Person who uses website The Computer that search, index the web User Computer
10. Some Statistics 10 Roughly one in 20 people in Japan has some disablity or another
12. 12 During population aging, it's possible that people can not see and move his/her hand well Taiwan Population 23,780,000 Japan Elderly population 35,880,000 (28.4%) > Population Aging
13. Modern Technology and Device is powerful enough 13 Screen Reader GPU, CPU JavaScript
14. Often being ignored or being misunderstood 14 accessibilityなんて政府のサイトだけ使うでしょ う？ Accessibility requirement is only for government site right? accessibilityなんて⾯倒くさいし、だれも気づかな いし、機能完成すればいいでしょう？ implement accessibility is annoying and no one would notice that. We just have to complete the feature and everything should be fine もっと技術的な課題をやりたいな。accessibilityは 時間の無駄無駄 I want to try more technical thing. Accessibility is just wasting time
15. Does disabled person can not use the web? 15 We can do better!
16. Web Accessibility Principle How to meet WCAG 16 P erceivable O perable U nderstandable R obust Available through sight, hearing, or touch. Compatible with keyboard or mouse. easy to comprehend. Can work on many browsers, device, screen reader
17. Screen Reader A screen reader is a form of assistive technology (AT)[1] that renders text and image content as speech or braille output. 17
18. VoiceOver 18 settings - Accessibility - VoiceOver
19. Case Study - Modal 1. Can be closed by clicking overlay 2. Always provide close button 3. Can be closed by ESC key 4. role=dialog 5. Manage Focus (Focus Trap) 6. Setting up proper aria and role 7. Prevent Scroll from body 8. Proper aria-label, aira- describedby 19 Try to use it via screen reader Bad
20. Case Study - Modal 1. Can be closed by clicking overlay 2. Always provide close button 3. Can be closed by ESC key 4. role=dialog 5. Manage Focus (Focus Trap) 6. Setting up proper aria and role 7. Prevent Scroll from body 8. Proper aria-label, aira- describedby 20 Try to use it via screen reader
21. 21 Good
22. Case Study - Modal 1. Can be closed by clicking overlay 2. Always provide close button 3. Can be closed by ESC key 4. role=dialog 5. Manage Focus (Focus Trap) 6. Setting up proper aria and role 7. Prevent Scroll from body 8. Proper aria-label, aira- describedby 22 Try to use it via screen reader <div id="exampleModal" tabindex="-1" aria- labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data- dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> role=dialog aria-modal=true
23. Screen Reader can not read it 23 <button type="button">❌</button>
24. Screen Reader can read aria-label! 24 <button type="button" aria-label="Close">X<button>
25. Case Study - Select Box Be very careful if you want to implement custom select box 25 downshift.js 1. aria-haspopup=listbox 2. switch aria-selected 3. use arrow to navigate option 4. use enter key to select option 5. use correct aria-activedescendant to indicate current focus item
26. aria-activedescentdant 26 The aria-activedescendant attribute contains the ID of the currently active child object that is part of a composite widget within the Document Object Model
28. Case Study - Tab 1. use left, right arrow to switch tab 2. role=tab 3. aria-selected to indicate selected tab 4. disabled focus for another tab when inactive 28
29. Case Study - Tab 29
30. Case Study - Table 1. add <caption> to describe your table 2. aria-sort to indicate sorting (ascending, descending) 30
31. Case Study - Chart Have no answer now... 31 1. Provide readable text as alternative as possible 2. Provide a simple table to represent chart content
32. Case Study - Live Region 1. aria-live=polite or aria-live=assertive 2. role=status 3. notify when content changed 32 <p role="status">Filter Article with C++</p>
33. Case Study - Real Time Notification 1. aria-live=polite or aria-live=assertive 2. role=status 33 <p role="status">Filter Article with C++</p>
34. Case Study - Real Time Notification 1. aria-live=polite or aria-live=assertive 2. role=status 3. Use when you want to notify user something 34
35. Case Study - Real Time Notification 35 aria-relevant * additions: when live region has new node/element * removals: when element has been deleted in live region * text: when text changed * all: above
36. Case Study - Use native button as possible 1. When button in form tag, it'll submit automatically 2. enter key, focus, touch, click event would be handled automatically 3. screen reader will read it in correct way 4. add type always (reset, button, submit) 36 <div onClick={handleClick}>click me</div> <div role="button" onClick={handleClick}>click me</div>
37. Case Study - Use correct tag 1. If it's a link or anchor, use <a> 2. If it's a button, use <button> 37 <a onClick>I'm a link</a> <a href="javascript:void(0)">I'm a link</a> <button onClick={() => location.href="/1234"}>I'm a link</button>
38. And, a lot... 38 • ARIA: Comment role • ARIA: Complementary role • ARIA: List role • ARIA: Listitem role • ARIA: Main role • ARIA: Mark role • ARIA: Navigation Role • ARIA: Region role • ARIA: Suggestion role • ARIA: alert role • ARIA: application role • ARIA: article role • ARIA: banner role • ARIA: button role • ARIA: cell role • ARIA: checkbox role • ARIA: contentinfo role • ARIA: dialog role • ARIA: document role • ARIA: feed role • ARIA: figure role • ARIA: form role • ARIA: grid role • ARIA: gridcell role • ARIA: heading role • ARIA: img role • ARIA: listbox role • ARIA: row role • ARIA: rowgroup role • ARIA: search role • ARIA: switch role • ARIA: tab role • ARIA: table role • ARIA: tabpanel role • ARIA: textbox role • ARIA: timer role • Aria Examples WCAG Guideline
39. Others - perfers-reduced-motion 39 Raise your hand if you don't like too much animation @media (prefers-reduced-motion) { .animation { /* no animation or a little */ } }
40. Others - Save Data 1. Auto download feature will turn off (iOS) 2. Podcast won't be downloaded automatically 3. You can use javascript to detect it 40 navigator.connection.saveData
41. 1,850 JPY 3,480 JPY / 12GB
42. 思いやり 42 大事にせよ Kindness
43. We are all Citizen of the Web! 43