Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Top accessibility pitfalls and how to fix them Slide 1 Top accessibility pitfalls and how to fix them Slide 2 Top accessibility pitfalls and how to fix them Slide 3 Top accessibility pitfalls and how to fix them Slide 4 Top accessibility pitfalls and how to fix them Slide 5 Top accessibility pitfalls and how to fix them Slide 6 Top accessibility pitfalls and how to fix them Slide 7 Top accessibility pitfalls and how to fix them Slide 8 Top accessibility pitfalls and how to fix them Slide 9 Top accessibility pitfalls and how to fix them Slide 10 Top accessibility pitfalls and how to fix them Slide 11 Top accessibility pitfalls and how to fix them Slide 12 Top accessibility pitfalls and how to fix them Slide 13 Top accessibility pitfalls and how to fix them Slide 14 Top accessibility pitfalls and how to fix them Slide 15 Top accessibility pitfalls and how to fix them Slide 16 Top accessibility pitfalls and how to fix them Slide 17 Top accessibility pitfalls and how to fix them Slide 18 Top accessibility pitfalls and how to fix them Slide 19 Top accessibility pitfalls and how to fix them Slide 20 Top accessibility pitfalls and how to fix them Slide 21 Top accessibility pitfalls and how to fix them Slide 22 Top accessibility pitfalls and how to fix them Slide 23 Top accessibility pitfalls and how to fix them Slide 24 Top accessibility pitfalls and how to fix them Slide 25 Top accessibility pitfalls and how to fix them Slide 26 Top accessibility pitfalls and how to fix them Slide 27 Top accessibility pitfalls and how to fix them Slide 28 Top accessibility pitfalls and how to fix them Slide 29 Top accessibility pitfalls and how to fix them Slide 30 Top accessibility pitfalls and how to fix them Slide 31 Top accessibility pitfalls and how to fix them Slide 32 Top accessibility pitfalls and how to fix them Slide 33 Top accessibility pitfalls and how to fix them Slide 34 Top accessibility pitfalls and how to fix them Slide 35 Top accessibility pitfalls and how to fix them Slide 36 Top accessibility pitfalls and how to fix them Slide 37 Top accessibility pitfalls and how to fix them Slide 38 Top accessibility pitfalls and how to fix them Slide 39 Top accessibility pitfalls and how to fix them Slide 40 Top accessibility pitfalls and how to fix them Slide 41 Top accessibility pitfalls and how to fix them Slide 42 Top accessibility pitfalls and how to fix them Slide 43 Top accessibility pitfalls and how to fix them Slide 44
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Top accessibility pitfalls and how to fix them

Download to read offline

Last year Erudite published the UK Accessibility Benchmark, which looked at the UK's most popular websites and assessed compliance against WCAG Accessibility Criteria. This talk will dive into some of the most common issues we encountered, and give you practical examples to help you identify and resolve accessibility issues on your own site!

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Top accessibility pitfalls and how to fix them

  1. 1. Make Your Site More Accessible! Jessica James | Erudite @Jessica_James01
  2. 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. 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. 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. 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. 6. In Order to be Accessible, All Users Should be Able to… Perceive Understand Navigate Interact @Jessica_James01 #BrightonSEO
  7. 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. 8. Sensory (visual, auditory) Cognitive (thinking, communication) Motor (locomotion, fatigue, dexterity) @Jessica_James01 #BrightonSEO
  9. 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. 10. Accessibility Impacts People with Disabilities @Jessica_James01 #BrightonSEO
  11. 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. 12. Accessibility Impacts People with Disabilities @Jessica_James01 #BrightonSEO Accessibility Impacts Everyone
  13. 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. 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. 15. @Jessica_James01 #BrightonSEO Brand Favour Making your content easy to access builds brand loyalty
  16. 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. 17. @Jessica_James01 #BrightonSEO You are Legally Obliged
  18. 18. £17.1 billion Lost every year due to inaccessible websites @Jessica_James01 #BrightonSEO The Bottom Line The Clickaway Pound, 2019
  19. 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. 20. Accessible Images Improving Colour Contrast 1 . 2 . Accessible Navigation 3 . @Jessica_James01 #BrightonSEO Tone of Voice 4 .
  21. 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. 22. @Jessica_James01 #BrightonSEO Improving Colour Contrast
  23. 23. @Jessica_James01 #BrightonSEO Improving Colour Contrast
  24. 24. @Jessica_James01 #BrightonSEO Improving Colour Contrast Test changes in Google Optimize first to build a business case!
  25. 25. @Jessica_James01 #BrightonSEO Accessible Images Overlay your text with HTML Embed text within images, or use images of text Do Don’t
  26. 26. @Jessica_James01 #BrightonSEO Accessible Images
  27. 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. 28. @Jessica_James01 #BrightonSEO Accessible Images Alt Text
  29. 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. 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. 31. @Jessica_James01 #BrightonSEO Accessible Images Colour Coding
  32. 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. 33. @Jessica_James01 #BrightonSEO Accessible Navigation Keyboard
  34. 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. 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. 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. 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. 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
  39. 39. @Jessica_James01 #BrightonSEO Accessible Navigation Links
  40. 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. 41. @Jessica_James01 #BrightonSEO Google Translate doesn’t always get it right
  42. 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. 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. 44. Erudite Agency Ltd 2010-2020 © jess.james@erudite.agency Thank you. +44 (0) 1256 384890

Last year Erudite published the UK Accessibility Benchmark, which looked at the UK's most popular websites and assessed compliance against WCAG Accessibility Criteria. This talk will dive into some of the most common issues we encountered, and give you practical examples to help you identify and resolve accessibility issues on your own site!

Views

Total views

361

On Slideshare

0

From embeds

0

Number of embeds

137

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×