Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

How To Be a Gentle Citizen Of The Web

Kalan
September 02, 2020

How To Be a Gentle Citizen Of The Web

As an frontend engineer, we can do better.

Kalan

September 02, 2020
Tweet

More Decks by Kalan

Other Decks in Technology

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. What is Accessibility? (a11y) 7 A web that can be

    accessible to anyone Web Content Accessibility Guideline
  6. 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
  7. 11

  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 27

  18. 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
  19. Case Study - Table 1. add <caption> to describe your

    table 2. aria-sort to indicate sorting (ascending, descending) 30
  20. 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
  21. 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>
  22. 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>
  23. 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
  24. 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
  25. 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>
  26. 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>
  27. 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
  28. 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 */ } }
  29. 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