Optimizing for Accessibility + SEO: Site & Page Structure Overlaps

[Estimated read time: 9 minutes]

(header image photo by H.L.W. from the Blind Photographers Flickr Group.)

Happy Global Accessibility Awareness Day!

39 million people are blind. 285 million are visually impaired. 15% of the world’s population — over a billion people — have some form of disability.

Disabilities can come in many shapes and forms: physical, cognitive, visual, hearing. How does someone who is blind check their email? How does someone who can’t hear decipher any of the tens of millions of videos on YouTube? How do disabled students keep an upper hand when all of their classmates are using the Internet for research?

Many use assistive technologies to help with these tasks. Screen readers are like search engines in that they can’t see the content of a page, and instead rely on signals in the code to navigate the web and understand the content of a page.

In this, and in two follow-up posts, we’ll explore the overlaps between optimizing for search engines and optimizing for screen readers and assistive technologies. But first, let’s get a better understanding of what screen readers are all about.

In the video below, Kyle Woodruff navigates the web without his sight, quadriplegic web user Gordon Richins navigates the web without his hands, and Curtis Radford navigates the web without his hearing. You’ll see that they still face challenges because of the gaps between what assistive technology (AT) can do and what is actually built in a way that can be accessed and navigated by assistive technologies.

Because he’s so entertaining (even has his own Amazon series), I also must introduce you to Tommy Edison, The Blind Film Critic. See how he’s easily using Twitter and YouTube with the assistive technologies built into the iPhone.

Give it a shot

Here’s a simple way to try something like this out for yourself right now:

1. Open a Chrome browser
2. Install the screen reader extension ChromeVox and enable it.
3. For a better experience, utilize some of this ChromeVox help:
   1. ChromeVox tutorial (quick, easy, and highly recommended)
   2. ChromeVox shortcuts reference (print it and tape it to your monitor (if you’re sighted)).
4. Go for it. Navigate.

Optionally, you can also enable these more complex free screen readers on your device:

1. VoiceOver on Mac OSX, iOS. User Guide. Shortcuts.
2. NVDA free screen reader for Windows machines. User guide. Shortcuts.

Try any of these on your own website. How painful is it?

Do something about it

Consider going beyond simply being aware of accessibility (A11y) for Global Accessibility Awareness Day by utilizing some of your technical code optimization chops to help millions of disabled fellow humans have a better experience on the web.

Let’s be very clear though: learning web accessibility is no small task. This is a complex industry where assistive technologies go beyond just optimizing a bit of web code for screen readers.

But here’s where it’s simple for you to start: Some of the tasks of optimizing for web accessibility overlap with the things we look at for search engine optimization (SEO). At the most basic level, it’s important not to cannibalize the screen reader experience by over-optimizing for SEO by doing things like keyword stuffing. At a more advanced level, you’re top-notch if you can recognize the overlaps and consider how to optimize for both screen readers (AKA humans, in essence) and for search engines (bots).

In this post we’ll look at some simple structure overlaps. In next week’s post, we’ll dive more into overlaps in formatting and links, including what may be somewhat controversial: hidden text. And in the final post, we’ll look at accessibility and SEO overlaps optimizing video, images and non-text elements, including making infographics accessible.

SEO/A11y Overlaps: Structure

Markup on a page helps both search engines and assisitive technologies (AT) like screen readers to understand what elements are in a page. For SEO, different elements like title tags, headings, or some schema markup can have more weight or value than other markup. People using assistive technologies are reliant on these structural elements to navigate through the page without being able to see it or without being able to use a mouse.

We’ll start with some easy SEO + accessibility overlaps: structural elements that you might deal with in your every day coding or optimization. Consider the accessibility side of implementing and optimizing these elements to provide a better experience for disabled visitors while you also build for SEO.

Title tags

Title tags (not to be confused with title attributes) are important in search engine optimization for (1) providing context as to what the page is about when Google crawls it and (2) how the page appears in the search result display. Over the years, while SEO techniques have come and gone and fluctuated in perceived effectiveness, page titles have continued to be one of the more highly valued on-page tactics.

When considering accessibility, W3C provides these specific benefits of the page title for various disabilities:

• This criterion benefits all users in allowing users to quickly and easily identify whether the information contained in the web page is relevant to their needs.
• People with visual disabilities will benefit from being able to differentiate content when multiple web pages are open.
• People with cognitive disabilities, limited short-term memory, and reading disabilities also benefit from the ability to identify content by its title.
• This criterion also benefits people with severe mobility impairments whose mode of operation relies on audio when navigating between Web pages.

Here’s a sample of the ChromeVox extension announcing the content of several tabs in a browser window by reading the title tags (and page focus).

Title tag do’s and don’ts

• Do continue to follow page title best practices for SEO. This should work hand-in-hand with titling for accessibility.
• Do not keyword stuff. In case keyword stuffing is still your thing, consider how something like this reads (“Buy Soap Dispensers, Pump Soap Dispensers, Sensor Soap Dispensers & more | MyStore”) versus “Soap Dispensers from MyStore.” Keep it simple and relevant (and split content into separate pages if you need to).

Headings

In search engine optimization, there’s a lot of focus on the H1 tag, and much less on nested H2–H6 headings. An H1 heading indicates the main topic of a page, while H2–H6 indicate subtopics or page sections. SEOs will sometimes use multiple H1 headings in an attempt to give more emphasis to more of the keywords and content on the page. SEOs will also sometimes tag other text on the page or in the footer as an H1 heading, in an attempt to get more keyword-rich H1 text in front of search engines. This can really mess with screen readers, and here’s why.

Headings allow assistive technologies to quickly navigate a page. Headings define the structure of the page and a screen reader user will oftentimes use these as the first method to move to a particular module or region of content.

Here’s an example of tabbing through headings using ChromeVox on the Santa Cruz Good Times news website:

Compare that to the Lehighton Times News, where only one heading was used, and it’s on the Calendar.

Heading do’s and don’ts

• Do use headings. It’s important not to skip headings altogether, like in the Times News website example above.
• Don’t use more than one H1 heading: HTML5 allows for multiple H1s, but this is not well-supported by browsers/assistive technology.
• Do use headings to define sections of content. For example, use H2 headings for subheader or key sections of the page and H3 headings for content modules.
• Don’t use headings if there’s no following content. Headings define sections of content, so if there is no content section, it shouldn’t have a header.

HTML5 elements and schema markup

HTML 5 introduced more detailed tagging of page elements, like