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

React + Accessibility (M16Y) = Awesome web for the next billion users

React + Accessibility (M16Y) = Awesome web for the next billion users

Creating platforms for everyone to use is very important in today's world, this talk focuses on methods to build platforms that are accessible to current users and the next billion users.

F51de5c2338c052872065d71e6f677b3?s=128

Obinna Ekwuno

August 17, 2019
Tweet

More Decks by Obinna Ekwuno

Other Decks in Programming

Transcript

  1. React + Accessibility (M16Y) = Awesome web for all

  2. React + Accessibility (M16Y) = Awesome web for the next

    billion users
  3. Hello! I AM OBINNA EKWUNO Media Developer Expert @ Cloudianry

    Technical Writer @ Scotch.io & LogRocket Community organizer forloop Enugu, JAMstack Israel You can find me at @Obinnaspeaks 3
  4. Talk Goals ⋆ Understand Web accessibility and Implementation ⋆ Discuss

    Terms associated with Web accessibility ⋆ Understand the importance of this concept ⋆ The challenges and solutions in #a11y and #M16y ⋆ Learn to use React Fragments 4
  5. Terms used a lot in the community ⋆ #a11y =>

    Accessibility ⋆ #m16y => Media Accessibility ⋆ WAI – Web Accessibility Indicatives ⋆ ARIA – Accessible Rich Internet Applications
  6. What is Web Accessibility ?

  7. See -> Use -> Understand

  8. “ Accessibility is for everyone not just people with disabilities.

    It refers to user experience 8
  9. Web Accessibility in General.

  10. Have you ever tried this? . Place your screenshot here

    10
  11. “ This content is not available in your country 11

  12. Focus, Tab order & Focus Management

  13. ⋆ What is focus ⋆ Focusable elements ⋆ Non-focusable elements

    ⋆ Logical tab order ⋆ Using the tab order to get something off screen that should only be focusable when it appears
  14. ⋆ Focus management – knowing when to change the tab-index

    of a none focusable element to be added in the tab order by calling the focus method on it because a user requested it
  15. More on Focus Management ⋆ Using Skip links 15

  16. 16

  17. Semantics and Assistive technology

  18. What about it ? ⋆ A screen reader provides the

    DOM tree in form of speech ⋆ What type of element – ROLE , NAME/LABEL, VALUE,STATE
  19. ARIA-* Accessibility rich internet application 19

  20. What about it ? ⋆ Helps to modify attributes on

    an element which helps fix how they are viewed in the accessibility tree
  21. 21

  22. 22

  23. 23

  24. THINGS ARIA CAN NOT DO ⋆ Modify element appearance ⋆

    Modify element behavior ⋆ Add focusability ⋆ Add keyboard event handling 24
  25. THINGS ARIA CAN DO ⋆ Modify accessibility tree ⋆ Add

    semantics to an element when no semantics exists ⋆ Modify semantics ( adding role of switch to a button to set state) 25
  26. THINGS ARIA CAN DO ⋆ Express MORE UI patterns ⋆

    Provide extra labels and descriptions (aria-label ) ⋆ Can provide extended semantic relationship elements ⋆ Works with assistive technology (role alert ) 26
  27. Note worthy aria tips ⋆ The role attribute should always

    be on the same element as the tab index =0 27
  28. 28

  29. What is Media Accessibility ?

  30. Elements of media Accessibility ❖Color Usage – How we combine

    colors ❖Text – Text and background ❖Design elements in the platforms
  31. Photophobia Light sensibility Solution – Dark mode (Night-shift mode )

    Using CSS filter and Invert () ?
  32. Contrast sensitivity Solution – Implement contrasting color background with text

    (Add example)
  33. Deuteranopia ( Red and Green color blindness ) Solution -

    Add patterns to photos
  34. Tritanopia ( Blue and Green / Yellow and violet )

    Solution – Implement contrasting color background with text (Add example)
  35. Achromatopsia ( The don’t see color ) Solution – Add

    tags so they can activity see what color things are
  36. Magic solution ⋆ Use Cloudinary’s API (Simulate_colorblind parameter ) Deuteranopia

  37. 37

  38. Who needs this ?

  39. Who is this even important To?? E-commerce platforms

  40. More pointer on solving problems on M16Y? - Using CLEAR

    COMMUNICATION Icons with text (Don’t use icons with color backgrounds) - WAI – ARIA – Dom + ARIA - Readability
  41. Accessibility in React JS. CAN REACT APPS BE MADE ACCESSIBILE

    ?
  42. Quick Points to note ⋆ The core focus of web

    accessibility lies in Semantic HTML ⋆ JSX supports accessibility ⋆ React Fragments are Awesome ! ⋆ Use of aria-* attributes
  43. React Fragments.

  44. Using React Fragment.

  45. Using React Fragment.

  46. Advantages of using React Fragment. ⋆ Improves efficiency of code

    ⋆ Better manage memory ⋆ Reduces cumbersome code structures
  47. Tools to check out - Axe Axe-core (Chrome extension &

    Tool) - M16Y plugin - No coffee simulator ( chrome extension ) - Light house
  48. Last words - Intuitive ( The baby test ) -

    Alt and description is awesome - Pay attention to color combination - Test for accessibility with axe or lighthouse
  49. Resources - https://www.w3.org/TR/wai-aria-1.0/#roles ⋆ a11y.css ⋆ Accessibility Insights ⋆ aXe

    ⋆ Chrome Vox ⋆ Contrast Checker ⋆ Lighthouse
  50. Resources ⋆ No Coffee ⋆ Pa11y ⋆ Tota11y ⋆ Tenon

    ⋆ Voice Over ⋆ Wave ⋆ M16Y plugin
  51. 51 Thanks! ANY QUESTIONS? You can find me at @obinnaspeaks

    & obinnacodes@gmail.com