The intersection between SEO and accessibility

Put simply, digital accessibility involves making your website easy for everyone to use. That includes the 1 in 5 people in the UK who experience disability and those with permanent, temporary, or situational impairments.

To do this, it’s important to understand the different ways disabled people may access digital products. For example:

• using a screen reader
• needing plain English to understand information
• using captions for videos

Here we predominantly focus on screen readers (drawing on research conducted for RNIB). But it’s important to keep in mind that accessibility goes beyond designing for just one impairment or condition. It’s about designing inclusively to meet a range of needs, and there are other benefits too

The spending power of disabled people and their households is estimated to be worth £274 billion per year to UK businesses. But organisations are missing out on these consumers due to poor accessibility - both physically in-store and digitally online. It has been found that 4 million people abandon a retail website because of the barriers they find, taking with them an estimated spend of £17.1 billion. These figures indicate that overlooking digital accessibility has a real impact on profits for businesses.

In addition, web accessibility is also a legal requirement for most public sector bodies, as of September 2018. Public sector bodies are also required to include and update an accessibility statement on their website. Typically you’ll be able to find accessibility guidance that these public sector bodies follow, which can be a useful resource for content creators in different sectors to follow.

A screen reader is a technology that helps people who have sight difficulties or impairments to access and interact with digital content via audio or touch. Screen readers make the content from a digital device accessible, meaning that a blind or partially sighted technology user can access the internet without barriers or obstacles. Put simply, screen readers turn on-screen content into speech or braille display.

From my experiences of testing screen reading software, it is not particularly easy to use. There are some basic shortcuts to learn, but becoming an advanced user who is able to interact confidently does require time and effort.

Here at Torchbox, we have conducted a huge amount of user research with blind or partially sighted people for our work with RNIB. We had initially assumed that people using screen readers would be expert users, however, that was not the case.

For example, there was a subsection of users who only used screen readers occasionally. Among this subsection were people whose vision changes daily, meaning they aren’t reliant on screen readers all the time. Therefore, they hadn’t developed the skills to be expert users of screen readers.

Given that screen readers are tricky to use, and not all users have advanced skills, it is hugely important to create a site that provides a clear output for screen readers in order to avoid frustrating experiences for users.

Well, screen readers and search engines are actually quite similar. Both rely on content structure and text alternatives, with search engines using this to determine the relevance of content, and screen readers using this to present content. In the same way that Google is a bot, crawling your website for information, screen readers can also be seen as bots that read the HTML and present that to users.

Therefore, when we talk about SEO best practices, we’re also talking about accessibility best practices. So let’s run through some of the ways in which SEO and accessibility intersect.

Avoid using ambiguous phrases

Having generic anchor text, such as ‘click here’ or ‘read more’ won’t be useful to search engines or to users of screen readers. From an SEO perspective, it is a missed opportunity to provide search engines with signals as to what the target page is about.

From an accessibility point of view, some screen reader users use a function that lists out all links on a page. For example, this may be the case when users are looking for specific resources on a page. Therefore, using ambiguous anchor text will be frustrating for visually impaired users who won’t have the context of where a link leads.

Don't use URLs as anchor text

For SEO purposes, it’s recommended you describe a link instead of using a naked URL. As we know, almost all internet searches are for keywords that describe what a user is looking for - people don’t tend to search for specific URLs. Therefore, using naked links internally is a wasted opportunity to improve the performance of pages on your site.

From an accessibility perspective, when linking a URL, consider users who listen to a screen reader to announce it. That could be a very frustrating and jarring experience, as well as not actually providing enough clear information about the destination of the link.

Avoid using the same anchor text for two different pages

In the same way that search engines will be confused if the same anchor text is used for two different pages, so will users of screen readers. Users, as well as search engines, may conclude that web pages contain information on the same topic.

For SEO, this may lead to potential issues with cannibalisation whereas, for screen reader users, the consequences might be that they are not getting the full information they need or want.

Page titles should be unique

Well-written page titles are critical to users with visual disabilities. They are always the first page element announced by screen-reading software. For this reason, each page should have a unique page title to avoid confusion for people using screen readers. Similarly, having multiple pages with the same title can be confusing to search engines.

Page titles should be concise and descriptive

SEO best practice is for titles to be 60 characters or less - the number of characters that Google displays on the SERPs. And having concise titles is also important for accessibility.

Screen readers immediately announce the page title when a user goes to a new webpage, so it’s crucial to keep titles concise and descriptive. This helps users know exactly where they are on a website and when they move between pages in their browser.

Describe the page and follow with the brand name

Page titles should be structured as a description of the page, followed by the brand name. The exception of course is for your website’s homepage.

SEO best practice says that your target keywords should always come before your brand name, as this is what will appear first on the SERPs. As the page title is the first thing read out by screen readers, it’s important that the page context page is read out first, to aid orientation for screen reader users.

Divergence: Page title length

A small but interesting difference between page titles relates to their length. While writing concise titles is important for human readability and comprehension, Google’s spiders will take into account the entire title tag (within reason) when they crawl the page, even if it is not displayed in full in the SERPs. However, screen readers reading from SERPs only read out what is displayed on the SERP, so exceeding the 60-character limit will cut your title off, providing little context to users. Therefore, when writing title tags, consider users of screen readers and ensure page context is given within the 60-character recommendation.

Every page needs a single H1, clearly explaining what the page is about

Having multiple H1s can dilute the power of a single H1. Accessibility criteria also outline that pages must have one H1 element to provide an important navigation point for users of assistive technologies, allowing them to easily find the page's main content.

As we SEOs know, having an enticing, keyword-informed H1, which clearly describes the content of the page is very important. Accessibility best practice is also for the H1 to clearly describe the main content of the page.

Divergence: H1 and title tag matching

An interesting divergence between SEO and accessibility relate to whether the title tag and H1 element need to match. Often, SEOs see the H1 as an opportunity to optimise for a keyword variant and therefore, the title tag and H1 can end up being quite different. However, accessibility criteria state that the H1 must match at least part of the title. The criteria does however also state that the H1 element must identify the page content in the same or similar way as the title element. So, it depends on how literally you want to take the accessibility guidelines.

Thinking about headings more generally, both SEO and accessibility best practice is for headings to follow a nested, hierarchical structure. Meaning that headings are ranked from H1 to H6, and headings ranks should not be skipped.

But we’ve noticed that there are a couple of misconceptions about heading ranks. H3s are not just less important than H2s. If a H3 is used, it needs to be related to the H2 above it, the same goes for H4s etc. Also, we’ve seen people using headings which fit how big they want the heading to look on a webpage. Both of these things don’t fit with SEO best practice, meaning Google won’t be able to understand the intended structure of the page.

For screen reader users, making these mistakes will provide a frustrating user experience. By using poor heading structures, screen reader users may not get a feel for how the content flows or whether it provides them with what they need.

Every image on your site should have an alt attribute

But when we say alt attribute, that doesn’t mean alt text. The alt attribute is where alt text is added. It is, sometimes, acceptable to leave the alt attribute empty.

When deciding on the alt text for images, consider whether important content would be lost if the images were deleted. If the image is purely decorative, it can be better to leave the alt attribute empty. A decorative image is one that does not present important content. Instead, it is used for layout or non-informative purposes and does not have a function such as a link.

Therefore, the best practice for both SEO and accessibility is to ensure that alt text is in place on all images that are functional to the page and provide useful information for search engines and for users.

For example, stock images don’t necessarily need alt text, but proprietary images should have alt text and will likely be more functional in the context of the webpage. Web Accessibility Initiative's alt Decision Tree is a useful resource that outlines how to use the alt attribute of the <img> element in various situations.

Although technology is getting better at recognising what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. Therefore, it’s important to write alt text that is framed within the context of a page. From an accessibility standpoint, alt text serves as a cue that people with visual impairments use to orient themselves in the content - so context is essential.

In addition, it's unnecessary to include ‘picture of’ or ‘image of’ within alt text. Since screen readers announce "graphic" along with the alt text and Google identifying it as an image from the article's HTML source code. So, go ahead and jump straight into the image’s description.

A slight difference between best practice for SEO and accessibility is around alt text length. Google will read up to 16 words of alt text, whereas screen readers will stop reading at 125 characters. So, keep alt text under 125 characters to banish frustrating experiences.

As SEOs, we’re making websites accessible for search engines and search engines are providing the best (most accessible) content to users. This includes users who are disabled and rely on screen readers. But, there is still a long way to go in making websites accessible for everyone.

The WebAIM million report assesses the accessibility of the top 1 million homepages on the internet. The report found that:

• 20% of homepages have more H1
• 10% of homepages had no headings present at all.
• 23% of homepage images had missing alt text
• 10% of images with alternative text had questionable or repetitive alternative text—such as alt="image" or "graphic".
• 18% of pages had ambiguous link text

These findings show that there is still a long way to go to ensure that websites are as accessible as they can be.

We’d recommend downloading a screen reader and navigating your site using the software so that you can discover first-hand if there are any barriers.

If you’d like to chat about accessibility and SEO further, please connect with me on Linkedin or email me at [email protected]. I’d love to continue the conversation with you.

You can also find out more about our work here: SEO services for charities & nonprofits.