The Synergy of Search Engine Optimization and Web Accessibility

Search engine optimization and web accessibility are complementary processes. Focus on one and you likely positively affect the other without additional effort. First, let us define these terms:

Search Engine Optimization is making your site discoverable by search engines and ranking as high as possible for various keywords and phrases.

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.

On the surface, they may appear to be completely unrelated. Let us look at why that is not the case.

Overlap between SEO and Accessibility

Users with disabilities often need to access websites in different ways.

A person who is deaf cannot hear videos with audio or podcasts and needs to have captions and transcriptions in order to consume them.
A person who does not have the full use of his/her hands cannot use a mouse and must be able to click on a link or button with the keyboard or with additional assistive technology such as a sip and puff device or a switch.
And a person who is blind cannot use a mouse and cannot see the screen so must use screen reader software that reads a web page back to her.

What does this have to do with search engines? Well, Google has many of the same limitations in accessing sites as people with various disabilities do.

Google cannot hear the audio in a podcast or “watch” a video. It needs a text version in order to access the content. Google cannot click with a mouse. If a link or button or widget cannot be activated without a mouse, Google does not have access to it either. And if content is not in text format or marked up properly, Google cannot parse it. Essentially, you can consider Google to be a user who is blind, deaf, and mouseless.

In a nutshell, both SEO and web accessibility hinge on the ability to access a site’s content and make sense of the content through its structure and the relationship between the individual bits of content. Let us look at each of these:

Accessing a site’s content

Google recommends checking your site with a text browser like Lynx because it is about how search engines would see it.

In order for a search engine or user who is blind or deaf (and various other disabilities) to access a piece of content, it needs to be in text format. Embedding text in an image or video or putting the content in audio format makes it inaccessible. Google cannot parse and index it if it is not text the same way a user with a disability cannot hear or see the content to access it.

Making sense of content through its structure and relationship

Getting the content into text is a step in the right direction but another step is needed in order to make the content truly meaningful. The content must be marked-up properly. Imagine taking a web page that has a lovely visual display, copying the words out of it and throwing them in a Word doc without any layout or formatting. For example, take a look at this demo page. Here is what we would see:

This is the web page with visual layout and styling: A sample website with styling

This is similar to what a search engine or person who is blind might get from the page if it were poorly marked up...one big blob of largely meaningless text: A sample site viewed without styling

It is difficult to make sense out of each piece of text. If I am looking for the concert date and ticket price of The Obelisks, how do I find it in that mess of text?

On the other hand, if the page were properly marked up, Google and the blind user would be able to discern what the main navigation is, what the topic of the page is, what the main content of the page is, what is superfluous information, what information the tables contain and what the contents of each cell in the table means. It is proper markup that gives search engines and screen readers the context they need to make sense of the text.

If the main menu is wrapped in a nav tag and contains a heading, this clearly communicates that the list of links is the main menu of the site. And as a blind user, I could easily click on the Tickets link in the main nav and expect to find the information I was after.

<nav>
 <h2>Main menu</h2>
 <ul>
   <li><a href=”#”>Home</a></li>
   <li><a href=”#”>News</a></li>
   <li><a href=”#”>Tickets</a></li>
   <li><a href=”#”>Survey</a></li>
 </ul>
</nav>

If headings are used properly, Google and the blind user can get a sense of the hierarchy of the page and what information is most important and how the bits of information relate to each other.
When the tables have a caption, their purposes are more clear and if the table rows and/or columns have headers, it is much easier to understand the contents of each cell. Here is a visual of what a screen reader user would have read to them when they bring up a list of tables on the page from our sample page:

They could then navigate around in the table cells and find the information they were looking for thanks to the properly labeled headers in the table. Google is also more likely to be able to make sense out of the data.

Benefits Beyond SEO and Accessibility

Accessible and SEO friendly sites also have additional benefits:

We can build sites that automatically rank better in searches just by paying attention to the markup we use, which also translates to a more accessible site.

Not only are sites easier to understand and use by search engines and users with disabilities, they are easier to use and understand by everyone! For example, users whose native language is not that of the site’s language, people with limited bandwidth connections, and people accessing the site on mobile devices all benefit.
Sites are also easier to consume in other formats. For example, having your phone read a website back to you while you are jogging or navigating a website while you are driving your car and interacting with the website via voice command - and touch and talking UIs are just the tip of the iceberg. More UIs are on the horizon in which people access your site in new ways. Building sites that are accessible and machine friendly makes it more likely that they will be compatible with those new ways.
Transcripts can be scanned faster than watching a video. This provides a better user experience which can translate into higher visit durations and more authority with Google. Transcripts and captions also help with on-page SEO by increasing density of targeted keywords and increase relevancy.
Accessible content also means better shareability on social networks. Sites become more meaningful and easier to parse for social networks.

SEO and Accessibility Techniques

So how do we make sites search engine friendly and accessible? Consider these techniques:

Technique	SEO	Accessibility
Follow W3C web standards. Validate your HTML. Validate your CSS. Validate your Feed.	Makes sites easier to parse.	Sites can be parsed more accurately.
Use semantic markup for structure and programmatic clarity of content. For example, <main>, <header>, <nav>, <footer>, <aside>, <cite>, <abbr>, <small>, <blockquote>, etc.	Makes sites easier to understand and gives context and relationship to content.	Makes sites easier to understand and gives context and relationship to content.
Set the page’s language in the html tag. For example: <html lang=”en-US”> This sets the language to U.S. English.	The page will be indexed based on this language,	Browsers can detect the language and offer to translate, and screen readers will read the text back in correct language with proper pronunciation.
Use unique page names in the <title> tag. Best practice is to list a unique page title followed by a separator and then name of the site.	Given a lot of importance in rankings and is what is used in the search engine listing. It can be customized to target specific keywords or queries.	What is shown in the page’s browser tab, and is the first thing read out by the screen reader to tell a user what page they are on.
Use headings to provide organization, structure, and relationships Use headings to denote the start of a new section (hide from visual display if necessary but keep available to screen readers).	Helps define page structure and relationship between content and makes page easier to understand and digest.	Defines programmatic start and ending of sections of a page and makes page easier to understand and digest. Also provides a way to navigate quickly around the site as screen reader users can bring up lists of headings and jump directly to the individual headings.
Use lists to properly mark up ordered and unordered lists of items.	Search engines see list items as related and sequential	User can bring up a list of links to get a sense of the page content and also to use to navigate around the page quickly.
Use alternative texts for images	Search engines can not “see” images and rely on the text version of the image to be conveyed in the image’s alt attribute.	Users with visual impairments can not always see the images and rely on the text version of the image to be conveyed in the image’s alt attribute.
Video with audio	Captions and audio descriptions make the video content indexable and the additional content can affect rankings.	Captions and audio descriptions make the video more consumable by users with hearing disabilities.
Audio alone	Transcriptions make the audio indexable and the additional content can affect rankings.	Transcriptions make audio files available to users with hearing disabilities.
Create readable and descriptive URLs	Search engines consider the url in their ranking algorithms. Make the URL readable and relevant to the page.	When other accessibility fails, the url can help a person determine the purpose of a link. For example if another site links to your site improperly (using “click here” or “read more”), the user may be able to determine the content of the page from the link url instead of the link text.

Summary

In summary, both SEO and web accessibility are closely intertwined when it comes to your site’s content and structure. Sites that are optimized for both factors opens the gates to a broader audience as they become easier to understand and use by search engines and users with disabilities. As new technologies are developed, this connectivity between SEO and accessibility will only increase, so it is important to take the steps necessary to make your site as accessible as possible.

Services

Digital Strategy