In this guest blog, Claire Brotherton, Founder of A Bright Clear Web, explores the link between web accessibility and SEO. Read and discover some simple measures you can take to increase your website’s accessibility, whilst positively impacting your SEO.
You may know that accessible websites are more inclusive, but did you know that improving accessibility can also help your SEO?
There’s a considerable overlap between features that enhance accessibility and SEO performance. By making your web pages accessible to everyone, you’re also boosting your chances of being found in search.
Google Lighthouse is a tool for improving web page quality. Accessibility is one of the metrics they check alongside performance, best practices, and SEO. You can be sure that if Google is measuring accessibility that it must be important!
The newest accessibility standard that accessible websites aim to meet is the Web Content Accessibility Guidelines (WCAG) 2.1.
So, let’s take a look at some best practices in web accessibility and see how they can benefit your site’s SEO.
The <title> tag is the name of the page which is shown in the top of the browser bar.
Providing a descriptive title satisfies Success Criterion 2.4.2: Page Titled in WCAG 2.1. This says that users should be able to understand a page’s purpose without having to read down it.
Good titles help users with multiple tabs open quickly identify the one they want.
Titles are read out to screen reader users when they first launch a page, so it’s especially important that they are accurate.
A typical format for a page title is to have the name of the article followed by the website name. This is fine providing the title is not too wordy.
The <title> tag is what’s shown in a search engine results page as a clickable link.
In the example below, you can see that most of the results shown include the exact search query (“learning to drive in spain”) in their titles.
Google’s guidelines on titles say that:
Page titles should be descriptive and concise. Avoid vague descriptors like "Home" for your home page, or "Profile" for a specific person's profile. Also avoid unnecessarily long or verbose titles, which are likely to get truncated when they show up in the search results.
You can use relevant keywords in your <title> so that search engines understand what your web pages are about. But don’t overdo it.
If your <title> doesn’t match the subject of your page, your page won’t be found so easily in search.
Do check that you are not using “Untitled Document” as your title. This used to be common with pages created in Dreamweaver.
Headings structure your pages into clear sections. This ties in with Success Criterion 1.3.1, Info and Relationships.
Screen reader users can navigate pages by headings. They can’t do this if text is simply bolded or made bigger.
Headings should follow a hierarchy, like so:
There are six levels from Heading 1 to Heading 6, but in practice Heading 5 and Heading 6 are rarely used.
If a page has skipped any heading levels, a screen reader user might think they have missed some content. The example below shows this, where headings go from Heading 1 to Heading 3, and Heading 2 to Heading 4 to Heading 6.
Search engines give some weight to the headings on a page.
According to a Moz study, search engines don’t seem to be too particular about headings – either the type or the number of them. Nevertheless, Moz recommends using a Heading 1 as the first heading on the page and following a heading hierarchy.
Using lists is another technique that helps with structuring pages.
When you use list markup you indicate a group of related items. Web developers commonly use lists in navigation menus for this reason.
Sighted users will recognize that bulleted or numbered list items are associated.
A screen reader will let someone know that there is a list and the number of items in it.
In this example, Auto Express have an ordered list of their best family cars for 2020. Each one links to a page with a full review.
Search engines know that lists are useful for certain queries. Google has rewarded the Auto Express page with a featured list snippet when someone searches for “top rated family cars 2020”. (Each car in the list also has a section with a heading, reinforcing the information.)
A descriptive link lets someone understand what a link’s purpose is before they follow it. This aligns with Success Criterion 2.4.4: Link Purpose (In Context) and Success Criterion 2.4.9: Link Purpose (Link Only).
“Click here” or “read more” links don’t give enough information out of context. On the left of the image below you can see two “click here” links. The right side shows how those links and others on the page would be read by the NVDA screen reader.
Some links further up on the same page, which are not pictured, also have unclear names. For example, EH_Stonehenge is a link to the Stonehenge Twitter profile, but you can’t tell that from the name.
Nielsen Norman group say you should link important words first, as many people only read the first couple of words.
Moz says that link text should be succinct and relevant to the target page. Good link text, which SEO pros call anchor text, helps search engines understand what a site is about.
Links that aren’t descriptive will fail Google Lighthouse’s SEO audit.
See the list of generic link text that fails the test.
SEMRush have some good advice on writing optimal anchor text.
Breadcrumbs are the digital equivalent of Hansel and Gretel’s breadcrumb trail, a series of signpost links for wayfinding on a website. In WCAG 2.1 they are a means of meeting Success Criterion 2.4.8: Location.
When you’re on an inner page, website breadcrumbs lead back through the page order to the home page.
You will often see breadcrumbs on ecommerce sites because they may have hundreds or thousands of products. Using breadcrumbs helps users explore a site further to discover new product lines or assists them return to the home page.
On this page for birthday hampers, breadcrumbs go to:
Search engines like breadcrumbs because they help them understand how a site is organized. To see breadcrumbs in the search results you need to add structured data to the links.
You can see that both articles and product pages with breadcrumbs can show up in Google search.
WCAG 2.1 Success Criterion 1.1.1: Non-text content says that all non-text content should have a text equivalent. This is primarily for the benefit of people who can’t perceive visual content, like images, animations or CAPTCHAs.
A text equivalent also supplies meaning for sighted visitors if content can’t be downloaded for any reason, like a patchy Internet connection.
For images, alternative text is typically used as an equivalent. Alternative text is often referred to as “alt text” or “alt tags”. In fact, it’s more correctly an alt attribute.
Many content management systems like WordPress allow you to add alternative text when you upload images.
<img src="shell-ladle.jpg" alt="A long-handled silver and copper ladle with a shell-shaped bowl" >
(Image source: Smithsonian Institution)
<img src="envelope.png" alt="Email us" >
<img src="decoration.png" alt="" >
Search engines recognize the information in alt attributes. It’s not a big ranking signal but it does contribute overall.
Keyword stuffing in alt attributes is bad practice for SEO, and bad for accessibility, too.
If you use audio or video content on your website, adding captions to video or transcribing the content helps you meet these success criteria in WCAG 2.1:
Captions and transcripts don’t just benefit people with sight and hearing problems. They can help other users such as people with a learning difference and people watching or listening in noisy environments.
Here are 15 benefits of using transcripts and captions for your media.
Using captions and transcripts can help your content get indexed more quickly and rank higher.
Moz cites a nonprofit who saw a 50% increase in organic traffic when they included transcripts alongside their podcasts.
The British Council’s Learn English podcast series has transcripts for all its podcasts. This may have helped it rank on the first page for “learn English podcast”.
According to Rev, adding video captions improves search engine visibility and engagement.
Two of the three videos that are listed on the results page for “how to set up a YouTube channel” have captioned their videos in English.
Here is one of them:
In this post, we’ve seen that accessibility and SEO go hand in hand. By working on one, we enhance the other.
Most of these enhancements are easy to implement. Captioning and transcription are the ones that can take longer to do, but there are plenty of low-cost service providers available.
If you need more help on making an accessible website, why not download one of Texthelp’s web accessibility guides?
Making sure your website is accessible not only positively impacts SEO, it ensures accessible experiences for your visitors - and that can help you tap into the £17.1bn 'click away pound'. Read more in our blog, all about supporting visitors with digital access needs.
Claire Brotherton is a WordPress web developer, blog writer and accessibility advocate based in Edinburgh, Scotland. She works with businesses, nonprofits and entrepreneurs who are passionate about access and inclusion, and blogs regularly on her website, A Bright Clear Web.