Claire Brotherton, A Bright Clear Web

How website accessibility can positively impact SEO


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.


Did you know? Website accessibility can positively impact 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!


Google Lighthouse audit with scores


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.


Meaningful title tag

How does a meaningful title tag help accessibility?

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.

Delia Smith recipe titles in Chrome browser

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.
 

How does a meaningful title tag help SEO?

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.


Learning to drive in Spain in Google search results


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

How do headings help accessibility?

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:
  • <h1>Main heading</h1>
    • <h2>Section heading</h2>
      • <h3>Subsection heading</h3>
        • <h4>Sub-subsection heading</h4>
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.

Newborn care - BabyCentre UK headings structure


How do headings help SEO?

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.
 

Lists

How do lists help accessibility?

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. 

Best family cars to buy in 2020


How do lists help SEO?

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.)

top rated family cars 2020 - Google Search

Descriptive links

How do descriptive links help accessibility?

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.

Click here links on NVDA

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.
 

How do descriptive links help SEO?

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. 

Stonehenge Lighthouse audit - links do not have descriptive text


See the list of generic link text that fails the test.

SEMRush have some good advice on writing optimal anchor text.


Breadcrumbs

How do breadcrumbs help accessibility?

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.


Fortnum & Mason birthday hampers breadcrumbs


On this page for birthday hampers, breadcrumbs go to:
  • the home page
  • a general page on hampers
  • the product listing of all hampers
  • the selection of gift idea hampers


How do breadcrumbs help SEO?

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.

Phillips screwdriver search results showing breadcrumbs


Text equivalents for images and other non-text content

How do text equivalents help accessibility?

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.


Tips for good alt text

  • Do not include “picture of” or “image of” in your alt text
  • For static images, describe the important aspects of an image, for example;
 <img src="shell-ladle.jpg" alt="A long-handled silver and copper ladle with a shell-shaped bowl" > 

A long-handled silver and copper ladle with a shell-shaped bowl

(Image source: Smithsonian Institution)
  • For image links, let the user know the destination of the link. For example;
<img src="envelope.png" alt="Email us" > 
  • Images that are just on the page for decoration should have a null alt attribute i.e. alt="" because they don’t convey meaning. For example;
<img src="decoration.png" alt="" > 
  • Better still is adding decorative images as background images. Background images don’t need alt text. You can add a background image by specifying the image’s URL for the area you want it to display. In case the image doesn’t load, you can specify a fallback background color. For example; 
.bg {
  background: url(https://www.example.com/background.png);
  background-color: blue;
}


How do text equivalents help SEO?

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.
 

Transcripts and captions

How do transcripts and captions help accessibility?

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.


How do transcripts and captions help SEO?

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”.

Learn English podcast Episode 1 with transcript


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.
 

How to set up a YouTube channel video search results

Here is one of them:

How to start a YouTube channel video with English captions - Gillian Perkins
 

Summary

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?

------------------

About the author

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.

Profile photo of Claire Brotherton
 

Comments

Blog post currently doesn't have any comments.
SHARE

Search

Submit

Subscribe To Blog

Google reCaptcha: