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.

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
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
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
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
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