Top accessibility pitfalls and how to fix them
Download as PPTX, PDF0 likes846 views
The document discusses the importance of web accessibility, outlining its impact on users with various disabilities and the legal obligations of site owners to enhance accessibility. It emphasizes that accessibility not only improves user experience but also has SEO benefits and builds brand loyalty. Key strategies to improve accessibility include better color contrast, keyboard navigation, and using plain language.
Top accessibility pitfalls and how to fix them
- 1. Make Your Site More Accessible! Jessica James | Erudite @Jessica_James01
- 2. Hi, I’m Jess, Account Director at Erudite” Jessica James Account Director & Nerd Jess worked in Digital Marketing roles for 5 years before specialising in SEO in 2018. Since then, she’s become increasingly fascinated by user experience and inclusive design. @Jessica_James01 #BrightonSEO
- 3. Who does it impact? Why be accessible? What is accessibility? 1 . 2 . 3 . I’m Going to Cover… How to make our sites more accessible 4 . @Jessica_James01 #BrightonSEO
- 4. B R I G H T O N S E O J U L Y 2 0 2 1 What is Accessibility ? 01 @Jessica_James01 #BrightonSEO
- 5. Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.” @Jessica_James01 #BrightonSEO
- 6. In Order to be Accessible, All Users Should be Able to… Perceive Understand Navigate Interact @Jessica_James01 #BrightonSEO
- 7. B R I G H T O N S E O J U L Y 2 0 2 1 Who Does it Impact? 02 @Jessica_James01 #BrightonSEO
- 8. Sensory (visual, auditory) Cognitive (thinking, communication) Motor (locomotion, fatigue, dexterity) @Jessica_James01 #BrightonSEO
- 9. Most Likely to Be Impacted Visual 1.7m Hearing 1.8m Manual Dexterity 3.7m Neuro-diverse 3.2 m @Jessica_James01 #BrightonSEO The Clickaway Pound
- 10. Accessibility Impacts People with Disabilities @Jessica_James01 #BrightonSEO
- 11. Situational (crowded public space, lost headphones) Temporary (carpal tunnel, concussion) Socio-economic (limited access to top-end devices or fast Wi-Fi) @Jessica_James01 #BrightonSEO
- 12. Accessibility Impacts People with Disabilities @Jessica_James01 #BrightonSEO Accessibility Impacts Everyone
- 13. B R I G H T O N S E O J U L Y 2 0 2 1 Why Be Accessible? 03 @Jessica_James01 #BrightonSEO
- 14. @Jessica_James01 #BrightonSEO Great User Experience Accessibility is great user experience We know that great user experience is becoming increasingly important in SEO It stands to reason that improving Accessibility will have long-term SEO benefits
- 15. @Jessica_James01 #BrightonSEO Brand Favour Making your content easy to access builds brand loyalty
- 16. @Jessica_James01 #BrightonSEO You are Legally Obliged The Equality Act 2010 (UK) requires site owners to make reasonable adjustments to make sites more accessible. In the US there were over 3,500 web accessibility lawsuits in 2020.
- 17. @Jessica_James01 #BrightonSEO You are Legally Obliged
- 18. £17.1 billion Lost every year due to inaccessible websites @Jessica_James01 #BrightonSEO The Bottom Line The Clickaway Pound, 2019
- 19. B R I G H T O N S E O J U L Y 2 0 2 1 How to be More Accessible? 04 @Jessica_James01 #BrightonSEO
- 20. Accessible Images Improving Colour Contrast 1 . 2 . Accessible Navigation 3 . @Jessica_James01 #BrightonSEO Tone of Voice 4 .
- 21. @Jessica_James01 #BrightonSEO Improving Colour Contrast Low colour contrast impacts everyone Test for low colour contrast using the WAVE Chrome extension or the WCAG Colour Contrast Checker (WebAIM) Who? How?
- 22. @Jessica_James01 #BrightonSEO Improving Colour Contrast
- 23. @Jessica_James01 #BrightonSEO Improving Colour Contrast
- 24. @Jessica_James01 #BrightonSEO Improving Colour Contrast Test changes in Google Optimize first to build a business case!
- 25. @Jessica_James01 #BrightonSEO Accessible Images Overlay your text with HTML Embed text within images, or use images of text Do Don’t
- 27. @Jessica_James01 #BrightonSEO Accessible Images Alt Text Provide useful alt text when it’s appropriate to the user Stuff every alt text field with keywords Do Don’t
- 28. @Jessica_James01 #BrightonSEO Accessible Images Alt Text
- 29. @Jessica_James01 #BrightonSEO Accessible Images Alt Text “Cooking experience setting with captions What’s my Introduction? and Make a Simple shopping list.” “Cooking Station” Helpful Unhelpful
- 30. @Jessica_James01 #BrightonSEO Accessible Images Colour Coding Include a second point of differentiation if colour coding information (patterns, underline, labels, HTML table of supporting data) Use colour alone to convey meaning. Do Don’t
- 31. @Jessica_James01 #BrightonSEO Accessible Images Colour Coding
- 32. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard Test navigating around your site using your keyboard. Can you move around easily? Fill out forms and interact with elements? Assume all of your users use a mouse. Do Don’t
- 33. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard
- 34. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard Make sure your site has visible focus indicators with sufficient colour contrast when you navigate with a keyboard. Do
- 35. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard Make sure you have a functioning skip-link on all pages. Keyboard users don’t have to tab through your whole header before they can get to the main content. Do Don’t
- 36. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard • Tab key – skip link appears • Enter key – focus skips over the header and moves down to the main content. Focus means both; - the content in the viewport - keyboard focus
- 37. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard • Tab key – no skip link • Have to tab 11 times to reach main content of the page!
- 38. @Jessica_James01 #BrightonSEO Accessible Navigation Links Use descriptive link text that describes the action the user is about to make Do Don’t Click here, see more, explore
- 40. @Jessica_James01 #BrightonSEO Tone of Voice • Use plain language wherever possible • Avoid figurative speak • Minimise use of jargon • Explain acronyms the first time you use them • Remember, not all of your users will be reading it in their first language, or may be using Google Translate. Do
- 41. @Jessica_James01 #BrightonSEO Google Translate doesn’t always get it right
- 42. B R I G H T O N S E O J U L Y 2 0 2 1 Final Note. 05 @Jessica_James01 #BrightonSEO
- 43. @Jessica_James01 #BrightonSEO - Tim Berners-Lee The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
- 44. Erudite Agency Ltd 2010-2020 © jess.james@erudite.agency Thank you. +44 (0) 1256 384890