Make your site fully accessible

What are the levels and principles of websites accessibility? Who is the target audience of accessibility functionality?
The presentation contains lots of advices about achieving the highest accessibility level and contains techniques of both automated and manual testing.

Transcript

1. Iryna Mazurak Front-end developer at MacPaw
2. Make your site fully accessible
3. What is accessibility?
4. What is accessibility? Accessibility is the practice of making your websites usable by as many people as possible.
5. Accessibility = a11y
6. Approximately 1 billion people in the world live with disabilities!
7. “If an organization’s web product is not accessible to a disabled person, that person may have grounds for making a claim against the organization under the Equality Act 2010 or the Disability Discrimination Act 1995” BSI Group
8. Section 508
9. Section 508 Its purpose is to “…require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.”
10. • Visual disabilities: total blindness low vision color blindness
11. • Visual disabilities: total blindness low vision color blindness • Auditory disabilities: partial or total inability to perceive sounds
12. • Visual disabilities: total blindness low vision color blindness • Auditory disabilities: partial or total inability to perceive sounds • Mobile disabilities: cerebral palsy neuromuscular disorders or paralysis
13. • Visual disabilities: total blindness low vision color blindness • Auditory disabilities: partial or total inability to perceive sounds • Mobile disabilities: cerebral palsy neuromuscular disorders or paralysis • Cognitive disabilities: have difficulty thinking and remembering (dyslexia)
14. • People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
15. • People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc. • Older people with changing abilities due to ageing
16. • People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc. • Older people with changing abilities due to ageing • People with “temporary disabilities” such as a broken arm or lost glasses
17. • People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc. • Older people with changing abilities due to ageing • People with “temporary disabilities” such as a broken arm or lost glasses • People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
18. • People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc. • Older people with changing abilities due to ageing • People with “temporary disabilities” such as a broken arm or lost glasses • People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio • People using a slow Internet connection
19. Accessibility principles
20. Accessibility principles Perceivable
21. Accessibility principles Perceivable Operable
22. Accessibility principles Perceivable Operable Understandable
23. Accessibility principles Perceivable Operable Understandable Robust
24. Three priority levels
25. Three priority levels Level A Level AA Level AAA
26. Most common WCAG failures (% of home pages)
27. Sites with the least number of accessibility errors Sites with the most accessibility errors • .de (Germany) • .uk (United Kingdom) • .jp (Japan) • .nl (Netherlands) • .edu (U.S.-based education institutions) • .au (Australia) • .ca (Canada) • .cn (China) • .ru (Russia) • .pl (Poland) • .br (Brazil) • .it (Italy) • .es (Spain)
28. Benefits with accessible sites
29. Benefits with accessible sites • Semantic HTML, which improves accessibility, also improves SEO, making your site more findable.
30. Benefits with accessible sites • Semantic HTML, which improves accessibility, also improves SEO, making your site more findable. • Caring about accessibility demonstrates good ethics and morals, which improves your public image.
31. Benefits with accessible sites • Semantic HTML, which improves accessibility, also improves SEO, making your site more findable. • Caring about accessibility demonstrates good ethics and morals, which improves your public image. • Make your site more usable by other groups, such as mobile phone users or those on low network speed.
32. Main tips
33. Use correct HTML for structure and CSS for layout • <article> • <aside> • <footer> • <header> • <main> • <nav> • <section> • <summary>
34. Add ARIA attributes • aria-label • aria-labelledby • aria-describedby • aria-required (state) • aria-hidden (state) • aria-valuemax • aria-valuemin • aria-valuenow • aria-valuetext • aria-disabled (state) • aria-expanded(state) • aria-haspopup(state) • aria-modal(state) • aria-multiselectable • aria-dropeffect • aria-dragged • aria-orientation
39. Heading levels should only increase by one
40. Include proper alt text for images <img src=”images/car.png”> <img src=”images/car.png” alt=””> <img src=”images/car.png” alt=”Laptop”> <img src=”images/car.png” alt=”Blue car on the road”>
41. Give your links unique and descriptive names with underline <p><a href="/about">Click here</a> to read more about our company</p> <p><a href="/about" title="Google - about us page">Click here</a> to read more about our company</p> <p><a href="/about" aria-label="Google - about us page">Click here</a> to read more about our company</p> <p>To learn more about our company read <a href="/about">About Us</a></p>
42. Maximize the colour contrast between the text and the background.
43. Ensure that all content can be accessed with the keyboard
44. Avoid automatic media or intensive animation Carousels example
45. Keep your copy simple and create sites with accessibility in mind.
46. How to test accessibility? - aXe Chrome extension - Contrast Ratio - High Contrast Extension - Web Developer Extension - WAVE Web Accessibility Tool - Accessibility Checklist - VoiceOver for Mac - NVDA for Windows
47. Test accessibility with real people
48. Useful links Web Content Accessibility Guidelines A11ycasts by Google Chrome Developers Web accessibility in mind WDN Accessibility
49. Thanks! Questions?