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
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
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
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%) >
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
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
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
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
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 labelledby="exampleModalLabel" aria-hidden="true">
id="exampleModalLabel">Modal title dismiss="modal" aria-label="Close"> ×
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
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
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
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
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 click me
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
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 */ } }
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
kjj6198
prathamesh
kyonmm
nktamago
tkmnzm
yukihiromori
yoshiitaka
mixi_engineers
opeonikute
ramimac
codmoninc
torounit
devopstaiwan
thoeni
holman
jponch
smashingmag
swwweet
trallard
lara
dougneiner
akmur
searls
ammeep
marcelosomers