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

@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

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

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

@seanmalseed #pubcon
Web Accessibility

@seanmalseed #pubcon

@seanmalseed #pubcon
Not a Clear Vision

@seanmalseed #pubcon
Not a Clear Vision

@seanmalseed #pubcon
Not a Clear Vision

@seanmalseed #pubcon
wat

@seanmalseed #pubcon
But Wait, It’s Worse

@seanmalseed #pubcon
We see this a lot.

@seanmalseed #pubcon
A Pervasive Problem

@seanmalseed #pubcon
Testing Alexa Top Sites

@seanmalseed #pubcon

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

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

@seanmalseed #pubcon

@seanmalseed #pubcon

@seanmalseed #pubcon

@seanmalseed #pubcon

@seanmalseed #pubcon
More Quick Wins

@seanmalseed #pubcon

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

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

@seanmalseed #pubcon
“Please select an option.”

@seanmalseed #pubcon

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

@seanmalseed #pubcon
Accessible Rich Internet Applications

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

@seanmalseed #pubcon
How To Fix This

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

@seanmalseed #pubcon
Text contrast ratio
against background color

@seanmalseed #pubcon
Text contrast ratio
against background color

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

@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?

@seanmalseed #pubcon
How To Fix This

@seanmalseed #pubcon

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

@seanmalseed #pubcon
Conclusion

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