Web accessibility Best Practices

Transcript

1. ❖ Frontend developer ❖ Co-organizer GDGBida ❖ Organizer JSMinna ❖ Everything JavaScript ❖ Wannabe gamer and football lover ❖ Professional baby boy ABDULQUDUS ABUBAKRE ibn_abubakre abdulqudus001
2. Web Accessibility Best Practices
3. Accessibility ❖ The quality of being able to be reached or entered. ❖ The quality of being easy to obtain or use. ❖ The quality of being easily understood or appreciated. - Google
4. Web accessibility Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them - w3.org
5. Why should I care? According to world bank: One billion people, or 15% of the world’s population, experience some form of disability, and disability prevalence is higher for developing countries. One-fifth of the estimated global total, or between 110 million and 190 million people, experience significant disabilities.
6. Best Practices
7. Color Contrast Color contrast is the difference in light between font (or anything in the foreground) and its background. In web accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information.
8. Use Semantic Tags ❖ Don’t just throw div everywhere in your application. ❖ Consider using semantic tags like section, header, footer ❖ Use proper heading tags (h1-h6)
9. Use descriptive alt text
10. Make sure your site is keyboard accessible ❖ Don’t hide the default outlines on element. ❖ Try not to mess with the default order tab order using the tabindex attribute. ❖ Without your mouse, try to navigate through you website. Can you use it comfortably?
11. How accessible is my website? ❖ https://wave.webaim.org/ ❖ Check color contrast https://webaim.org/resources/contrastchecker/ ❖ Axe https://www.deque.com/axe/ ❖ Google lighthouse
12. Thank you! Web accessibility is more than just a feature. It is a requirement. - ibn_abubakre ibn_abubakre abdulqudus001