Web accessibility is great for users and can be helpful to your SEO. In this presentation, Sean Malseed walks you through ways to improve your web accessibility.

1. @seanmalseed #pubcon
Accessibility for SEO in 2021
Presented by:
Sean Malseed
Technical Director, Greenlane Search Marketing

2. @seanmalseed #pubcon
About Me
● I’m Sean
● Technical Director at Greenlane
● Extreme amateur programmer
● Hobbies include vintage computers, dark
beer and long stretches of doing nothing in
particular
greenlanemarketing.com/team/sean-malseed

3. @seanmalseed #pubcon
Google’s Influence on Everything
“Don’t be
evil.”

4. @seanmalseed #pubcon
Google’s Influence on Everything
“Don’t be
evil.”

5. @seanmalseed #pubcon
Web Accessibility

6. @seanmalseed #pubcon

7. @seanmalseed #pubcon
Not a Clear Vision

8. @seanmalseed #pubcon
Not a Clear Vision

9. @seanmalseed #pubcon
Not a Clear Vision

10. @seanmalseed #pubcon
wat

11. @seanmalseed #pubcon
But Wait, It’s Worse

12. @seanmalseed #pubcon
We see this a lot.

13. @seanmalseed #pubcon
A Pervasive Problem

14. @seanmalseed #pubcon
Testing Alexa Top Sites

15. @seanmalseed #pubcon

16. @seanmalseed #pubcon
Top .COM Website Text Accessibility
Not
Accessible
Download the data:
https://www.dropbox.com/s/ef962pfsy5ncr44/seans-accessibility-crawl.zip?dl=1

17. @seanmalseed #pubcon
How To Fix This
(seriously takes less than one minute)

18. @seanmalseed #pubcon

19. @seanmalseed #pubcon

20. @seanmalseed #pubcon

21. @seanmalseed #pubcon

22. @seanmalseed #pubcon
More Quick Wins

23. @seanmalseed #pubcon

24. @seanmalseed #pubcon
Screen readers can understand:
<button>Search!</button>
They cannot understand:
<button> </button>

25. @seanmalseed #pubcon
“Please select an option.”
“Form.”
“Button.” “Button.” “Button.” “Button.”
“Button.” “Button.” “Button.” “Button.”
“Button.” “Button.” “Button.” “Button.”

26. @seanmalseed #pubcon
“Please select an option.”

27. @seanmalseed #pubcon

28. @seanmalseed #pubcon
https://web.dev/button-name/

29. @seanmalseed #pubcon
Accessible Rich Internet Applications

30. @seanmalseed #pubcon
<button aria-label=”search”> </button>

31. @seanmalseed #pubcon
How To Fix This

32. @seanmalseed #pubcon
If your clickable elements don’t have
words in them, add a word with aria-
label

33. @seanmalseed #pubcon
Text contrast ratio
against background color

34. @seanmalseed #pubcon
Text contrast ratio
against background color

35. @seanmalseed #pubcon
Google requires a 4.5:1
text contrast ratio.
75% of text should be
14px or larger

36. @seanmalseed #pubcon
Because no matter how cool this light text style looks on your site,
it’s completely unreasonable to expect anyone to read it.
Especially if they use vision correction.
… know what I mean?

37. @seanmalseed #pubcon
How To Fix This

38. @seanmalseed #pubcon

39. @seanmalseed #pubcon
<div class=”text-blocks”>
If this text is too light...
</div>
<style>
.tiny-text {
color:darkgray;
}
</style>

40. @seanmalseed #pubcon
Conclusion

41. @seanmalseed #pubcon
Thank you!
Sean Malseed
@seanmalseed
https://www.greenlanemarketing.com