As an SEO specialist & web designer, people often ask me questions about making websites more accessible. so that all users can easy use them.
After all, a lot of SEO best practices are also great for accessibility! Google’s crawlerbots behave similar to screen readers. Both rely on written text and code to understand the structure & content of every page. Many accessibility techniques are beneficial for your SEO — alt text, heading tags, and clear site architecture help both.
But optimizing for SEO doesn’t mean that your site is accessible.
Accessibility is about more than pleasing Google bots. The best practices help ALL your users to navigate your page and understand your content easily.
There are specific things you can do to help those with auditory, cognitive, physical, neurological, and visual limitations … but accessibility isn’t just for those with permanent medical conditions!
Applying accessibility standards to your website is important for ALL users. Anybody using your website might be in a dimly lit room and need a color contrast, or be reading under the table during a meeting or not be able to listen to audio.
Making your website accessible is an act of respect to your audience, recognizing that they might not process information the same way that you do.
(I personally really struggle to watch videos, especially if they don’t have captions — the irony of my YouTube channel isn’t lost on me! — so I always make sure to provide a complimentary blog post and upload verified captions in case my audience has similar learning styles.)
Which is more important: SEO or Accessibility?
There are plenty of spaces where SEO and accessibility overlap; the technologies for each build and improve each other!
However, optimizing for one doesn’t necessarily mean you’re improving the other. Good SEO doesn’t automatically make your website more accessible, and following accessibility guidelines doesn’t always improve your search results.
In my opinion, when SEO and accessibility best practices don’t align: focus on accessibility. User experience should trump robot experience, every time.
How is your website doing for accessibility?
In the next section, I’ll talk through best practices, specifically highlighting when they overlap with SEO best practices and when accessibility should trump SEO …
… but I find that a list of best practices can be a little stale if it’s purely theoretical.
So I encourage you to run your website through the WAVE Web Accessibility Evaluation Tool, review the errors and alerts that are flagged, then come back here & read more.
Also, no shame about having errors on your page, you probably didn’t know about these rules! The first time I ran this I had dozens of mistakes — and I build websites for a living, I should know this stuff! I learned that I had to change the color scheme and re-code major sections of my website:
Once you’ve reviewed your audit, come on back here & let’s talk about what we can do to make our websites easier for EVERYONE.
User experience & accessibility
One of the major things that audit reviewed is how easily visitors can move around your site. Can they navigate using keyboard shortcuts without a mouse? Would a screen reader be able to tell them what the images are?
Your site navigation
Having a logical structure to your website makes it easier for people AND Google robots to find information they’re looking for.
You have “top-level” pages that show up in your main navigation, usually at the top of your page, which are the most important pages on your website. From there, you can usually click through to “lower-level” pages.
So if people are on your homepage and looking for a blog post, they can click on “blog” on your main nav, then scroll until they find the blog post they need. But what if you don’t have a “blog” link there? Or what if you call it something cutesy, like “voyaging,” and they have no idea what that means?
Make it easy for people to navigate your site, and to know what to expect with clear descriptions.
A helpful tool for accessibility is your sitemap.
Sitemaps help users to find content they are looking for. They’re great for SEO (because they make sure Google isn’t missing any pages) and for accessibility (because they provide clear access to important pages on the site, in a structured list).
Another way to help people navigate easily around your site is to include Breadcrumb links.
Breadcrumb links: Breadcrumb links are used to show search engine crawlers and screen readers how a site is structured. They are also a great way to improve internal linking on a site, particularly for large websites with complex navigation structures.
The more complex your navigation, the more important it is to have a sitemap & breadcrumbs so that people don’t get lost. Here’s an example from my client The Yellow Bird skincare:
If you find yourself on this product, you can follow the breadcrumb trail to realize you’re in the Artisan Soap category, and can easily find your way back home using these links.
Page titles (aka SEO Title)
Page titles are the text that’s shown in the browser window, and also in the search result snippet, and usually the search result snippet.
As users are working around your site, the page title will tell them at a glance what to expect from that page. Make sure your page title is clear about where they are within the website.
Your page title is also what’s shown in your SEO Snippet, so you want to make it clear to Google’s crawler robots what to expect when people click through to that page.
When you don’t specify your page title, the default will be your headline/H1. So for my homepage, in the wordpress dashboard it’s called “Home,” but my page title is “SEO Strategy & Training for Online Entrepreneurs | Love At First Search.”
I included my keywords in here (“seo strategy,” “seo training” “online entrepreneurs”) as well as my business name, so people know what to expect when they land on my homepage. “Home” doesn’t help them nearly as much as those details!
Headings
Headings are more than just formatting! Structuring the headings on your page is really important both for SEO & accessibility.
For SEO, headings are key ways to let Google know what to expect on that page, and when users click through and begin to skim the page, it gives them an idea of what to expect in every section.
And for accessibility, headings are essential for most assistive technology, to make it easier for users to skip between sections. These are especially important for users that don’t use a mouse and navigate using keyboard shortcuts.
Also, headings break up the text and make it easier for people to read what you’re writing. Big blocks of text are much harder to read than shorter paragraphs with clear delineations.
Think of headings like signposts, sending people to the right places on your site.
Best practices for headings
- Use only one H1 heading per page — the headline.
- Move down your heading hierarchy in order, so that screen readers can understand the relative importance of different sections. Don’t jump from H2 to H5 just because you like the font styles.
Read more about how to structure your headings for accessibility.
Making forms easier for people to use
When I say “forms” I don’t just mean contact forms — think also of credit card fields and subscription boxes.
Forms can be particularly tricky for navigation AND visual contrast.
As you’re setting up your email lead magnet forms, contact forms, and buy now forms, consider these best practices:
- Include form field labels above or within the boxes
- Make sure your text contrast color is strong enough (a white box with light grey text might not be easy to read)
- Don’t include color prompts (“fields in red are required”), but find another way to give clear delineation (“fields marked with asterisk are required”)
- If you have a captcha, include an audio option
Read more about designing accessible web forms.
Making your website experience better for color-blind users
My first introduction to website accessibility was as a web designer, when I was creating logos and color palettes for my design clients. I designed a really great logo for a client and was super proud of the work … until I got feedback from one of their customers that the work I’d done was completely inaccessible for their colorblind audience.
If you’re not sure what your website looks like to a color blind audience, you can use Check My Colours or install a Chrome extension to see a simulation (I used the Let’s get color blind extension to check out my homepage), and here’s one version for people who can’t see red clearly — my coral call to action box is a gold tone:
So here are some color contrast best practices:
- Make sure you’re using more than color to convey information.
- Have a 4.5:1 ratio of color contrast — you can check this on the WebAIM contrast checker
- If you’re going to put text over an image, make sure that the contrast is strong enough across all the text.
- Make sure all your links are also underlined, so that if users can’t see the color contrast they’ll still recognize the resource
- Avoid problematic color combinations that can be difficult to distinguish. Greens & grays can be particularly difficult, as their shades can blend with red, brown, blue, and yellow.
For more tips about accessible color contrast in your design, check out How to Design for Color Blindness and Accessibility: Improving The UX For Color-Blind Users.
4 Visual best practices for accessibility
In addition to color palette selection, there are specific actions you can take to make it easy for visually impaired users to navigate & understand your website.
Include alt text on all relevant images
I’ve talked plenty about the importance of alt text for image SEO, to get your images to show up in Google Image Search, but alt text is also incredibly important for users that use screen readers.
According to BigHack’s guide to writing better alt text: “Screen readers read image descriptions out loud. This means that blind and visually impaired people can understand the content of the image in an accessible way. If images do not have alt text, then screen readers will simply say “image” or “graphic” which gives no context or meaning.”
Label your buttons
Buttons should be used for clickable actions, and instead of passive phrases like “click here,” make the action clear, like “sign up” or “buy now.”
Read more about buttons & clickable elements.
Use clear anchor text
Whether you’re linking to another page on your website or an external resource, “read more” or “click here” is not necessary. Instead, find a descriptive way to explain what people will see when they click through to that page. Those words that you include as a hyperlink are called “anchor text.”
Anchor text is used to describe the content that will be found on the page being linked to. It can be used to describe the purpose of the page and help users determine whether they want to click the link to visit the destination page.
Anchor text is a great place to include a keyword that factors into that linked page’s SEO algorithm. You’ll notice that in all the above sections when I link out, I don’t say, “For more information about anchor text, click here.” Instead I say, “Read more about anchor text.” (Whoa, that is so meta!) I set it up this way because I want to send Google a signal that the linked page is about anchor text.
Do not auto-play your video
If you have a video on your website, the audio can drown out the voice of the screen reader, which can basically make your website non-functional.
Also, if the user is using keyboard shortcuts, it can be hard to figure out where to turn the video off.
—
For a firsthand perspective about how to make your website better for visually impaired users, check out this great article: 5 most annoying website features I face as a blind person every single day
Audio best practices
Include transcripts or synchronized captions
If you have pre-recorded video or audio content — something like a YouTube video or podcast — include a transcript. Plus for SEO, podcast transcripts in your show notes can help you get found by a new audience.
If you’re creating live content — like a Facebook live or Zoom call — consider getting synchronized captions. For Zoom, Otter.ai can add these for business level and above, and Google Meet includes them automatically.
Read more about the accessibility of captions, transcripts & audio descriptions.
Content writing & readability
Accessibility isn’t just about helping people with physical disabilities to access your site; it’s also about cognitive processing. What can you do to make your content easier to read?
According to the Yale Usability Guidelines, that are 3 factors to consider when it comes to readability:
Text formatting
When you’re formatting your content, you should focus on making it easy for your reader to follow, not about making it look fancier. Here are some best practices:
- don’t change the font, font-size, or color of your text
- using bold and italics for emphasis only, not headings
- don’t underline or strike through text (underline is ok for links)
- keep text left-aligned
- use numbered and bulleted lists generously
Reading level
Whenever possible, write at the lowest reading level possible so that more readers can understand you. This helps people with cognitive impairments, those who don’t speak your language natively, and people who are skimming.
Whenever possible, use simpler words & shorter sentences. Keep paragraphs short (2-4 sentences.) And avoid jargon and idioms as much as possible.
One of my favorite ways to make sure that I’m writing simply is to run my drafts through Hemingway. My first draft (left image below) was at a grade 12 reading level — you can see all the hard-to-read red sections and unnecessary blue adverbs.
Hemingway helped me get my intro down to grade 8 by shortening sentences, simplifying clauses and removing passive voice:
People over robots, every time
There are plenty of ways that SEO can augment your web accessibility … but remember, the two aren’t mutually exclusive!
Many SEO tutorials don’t consider accessibility, leaving us with websites that can be hard to navigate and content that can be so stuffed with keywords that it’s hard to read.
When in doubt, err on the side of user experience and prioritize people over robots. It might take a little bit longer to rank in search, but the people who find you will appreciate the thought you’ve put into their experience.