We’ll start this off with my opinion the importance of accessible web design.
It’s really important. It’s important because we want everyone to experience the web to the fullest extent possible, in all the ways they prefer. There’s absolutely no reason we shouldn’t be doing this. It’s good for you, it’s good for me, it’s good for those who need the design to operate a website. And, to be entirely honest, it’s not a big ask.
So design with everyone in mind, because you should be doing it anyway.
Now, if you disagree with that opinion, I have questions for you, but that’s not for this blog. Instead, I’ll counter with a simple fact:
Oops. Google fooled you into being nice.
Text to speech readers use the alt tags on images to describe them to those who cannot see them. It just so happens that Google really likes it when you give your images proper descriptions because it means it can further refine how relevant search results are based on this.
A transcript is really important for those who cannot hear a video. It’s also a massive SEO boost because it creates an entire blog post out of thin air which, again, Google likes because it can furuther refine search results based on the textual content.
The skip to content scripts and tags are used by text to speech readers to avoid reading the navigation menu out loud on every page of the website when the user doesn’t want them to. And Google likes them because it defines in a machine-readable way where it should start defining page content.
A lot of good SEO habits, like how large paragraphs are, how much content a page has, or how “readable” a page is according to the content, are also good accessibility habits. You don’t want to read a wall of text. No one wants to visit a page that’s too busy. Everyone hates reading blog posts that are full of basic writing mistakes.
Now image you are, for example, autistic. A page that’s too busy can be a psychological trigger for you. You’re disinclined to visit the website again, if not in some cases unable to. That’s not okay.
Usually, things considered “too busy” for those with Autism Spectrum Disorder are things that those without would consider annoying, bordering on infuriating, anyway. We need to keep this mind, though. Because, not only is it the polite thing to design around, Google likes it.
And that brings us around to best practices.
Because now you understand the importance of accessible webdesign but you also need to know how to do it.
I’ve talked about some best practices before with security. And like that, there’s some unexpected habits you may need to break. And, in the same way we want to think about security as a total change in our habits, to really engage accessibility the same way, we need to live it, not just observe it.
You’ll notice at the top of this post is the accessibility symbol. It’s not a person in a wheel chair, it’s a person in a blue circle. Because not all disabilities are immediately visible, this has been chosen in lue of the wheel chair we see on handicap parking places.
In addition, you may have already noticed, and already played with, the accessibility button to the upper right. It’s a handy plugin that we put on every site we design, because it provides a bunch of options to people who need them to browse the web. It even does things like automatically add skip to content scripts and tags.
When you’re designing a page, or content to be added somewhere, there’s a thought that should fire off, both for SEO and for accessibility.
“How will a robot read this?”
For me, it’s a perfect guide. Because I can then imagine how not only the google robot will read the page. I can can also, then, imagine what it sounds like for the person with a screen reader.
And here’s something you might not have considered. Some fonts you encounter aren’t just fonts, they’re entire sets of unicode characters different from their usual counterparts. In this excellent example you can see how frankly impossible to understand some things can be. And, kicker, the Google robots won’t read them correctly either.
Videos are notoriously hard for a robot to understand, but a transcript is slurped up in moments and parsed as relevant content. If you’re wondering how one makes a transcript, there’s a great piece of software for it. You may have even heard of it. It’s called Microsoft Word.
So that’s how I would want others to think about their page design. What would a robot read?
What does good accessibility praxis look like?
We’ll use the front page of the Harmony Group Atlanta site as an example:
A Screen shot of the front page of the harmony group atl website
When a screen reader drops into this page, the first thing it does it read the skip to content script. Which, if the user selects, will then drop down to read “Managed IT, Websites, & Apps.” Some screen readers will read the ampersand as “ampersand”. Others will just read it “and”. Google does not care.
The screen reader (and thus the Google bot) then reads the second line, the button, and then scrolls through the page’s content, eventually getting to the footer, the social media links, and the chat box. One thing the plugin that adds our accessibility icon does that I didn’t mention, is force the skip to content to go to the button first, then to the content. Google bots don’t seem to mind this, as it has yet another skip to content script attached to it.
A person will have the option to tab through the navigation menu if they want to. A Google bot will read it all as one long script, and then parse it based on tags. And because we implemented accessibility features that helped the screen reader, the bot already has a bunch of tags to help it parse the page when it’s done reading.
With that as a clean, working example, I hope the idea behind this is a little more clear. And that whether or not you truly believe in accessibility as a social idea (I hope you do!), you now at least understand how it can help you with your SEO.
If you want further reading on this subject, Christine Laikind has an abundance of information on the subject, and is available for direct consultation on the subject: https://www.christinelaikind.com/speaking/
Stay safe in the world and on the web.
~AJ.
