What You Should Know About Accessibility + SEO, Part I: An Intro

[Estimated read time: 4 minutes]

Do you know anyone who is visually impaired? Maybe they have low vision or color blindness, or are fully blind. Think about how they use the Internet. Close your eyes, or at least squint really hard, and try to find today’s news or interact with your friends on Facebook. It’s a challenge many of us don't think about every day, but some of what we do in SEO can affect the experience that people with visual impairments have when visiting a page.

Accessibility and the Internet

Visually impaired Internet users are able to navigate and use the web using screen readers like VoiceOver or Jaws. Screen readers, much like search engine crawlers, rely on signals in the code to determine the structure and the context of what they’re crawling. The overlap in what search crawlers look for and interpret versus what screen readers look for and interpret is small, but the idea is the same: Where are the elements of this page and how do I understand them?

The SEO overlap

While it’s important to understand where SEO and accessibility (a11y) overlap in order to optimize correctly for both, it’s also important to note that optimizing for one is not necessarily akin to optimizing for the other. In other words, if you’ve optimized a page for search engines, it doesn’t mean you’ve necessarily made it accessible — and vice versa.

Recently, web accessibility expert Karl Groves wrote a post called The Accessibility & SEO Myth. Mr. Groves knows the world of accessibility inside and out, and knows that optimizing for accessibility, which goes far beyond optimizing for the visually-impaired, is very different overall, and much more complex (strictly from a technical standpoint) than optimizing for search engines. He’s right — that despite the ways SEO and a11y overlap, a11y is a whole different ballgame. But if you understand the overlap, you can successfully optimize for both.

Here are just some examples of where SEO and accessibility can overlap:

• Video transcription
• Image captioning
• Image alt attributes
• Title tags
• Header tags (H1, H2, etc)
• Link anchor text
• On-site sitemaps, table of contents, and/or breadcrumbs
• Content ordering
• Size and color contrast of text
• Semantic HTML

If you’re developing the page yourself, I would challenge you to learn more about the many things you can do for accessibility beyond where it overlaps with SEO, like getting to know ARIA attributes. Take a look at the W3C Web Content Accessibility Guidelines and you’ll see there are far more complex considerations for accessibility than what we typically consider for technical SEO. If you think technical SEO is fun, just wait until you get a load of this.

Optimizing for accessibility or SEO?

Chances are, if you’re optimizing for accessibility, you’re probably covering your bases for those technical optimizations where accessibility and SEO overlap. BUT, this doesn’t always work the other way around, depending on the SEO tactics you take.

Thankfully, the Converse site has a pretty descriptive alt attribute in place!

Consider a screen reader reaching an image of a pair of women’s black Chuck Taylor All-Star shoes and reading its alt attribute as "Women’s black Chuck Taylor All-Stars buy Chucks online women’s chuck taylors all-stars for sale." Annoying, isn’t it? Or compare these page titles with SEO and accessibility in mind: "Calculate Your Tax Return" versus "Online Tax Calculator | Tax Return Estimator | Tax Refund/Rebate." Imagine you just encountered this page without being able to see the content. Which one more crisply and clearly describes what you can expect of this page?

While it’s nice to know that proper technical search engine optimization will affect how someone using a screen reader can contextualize your site, it’s also important to understand (1) that these two optimization industries are, on a bigger level, quite different, and (2) that what you do for SEO where SEO and a11y overlap will affect how some visitors can (or can’t) understand your site.

Marking the 5th Global Accessibility Awareness Day https://t.co/QiJyAM8xGW 05/19? Let us know how Globala11yawarenessdayAtGmailDotCom #gaad
— GblA11yAwarenessDay (@gbla11yday) March 14, 2016

For Global Accessibility Awareness Day on May 19, I’ll be collaborating with some experts in a11y on a post that will go into more details on what aspects of SEO + a11y to be keenly aware of and how to optimize for both. I'll be sure to find as many examples as I can — if you've got any good ones, please feel free to share in the comments (and thanks in advance).

Blog posts in this series:

1. Optimizing for Accessibility + SEO: Site & Page Structure Overlaps
2. Optimizing for Accessibility + SEO: Formatting & Link Overlaps
3. Optimizing for Accessibility + SEO: Images, Video and Non-Text Elements

Educational resources & tools

In the meantime, to learn more about accessibility, check out a couple of great resources:

• W3C Techniques for WCAG 2.0
• ARIA attributes
• Web Accessibility Evaluation Tools List
• Web Accessibility Tools & events from the Paciello Group, a well-known accessibility agency
• Also check out The Paciello Group’s blog. It’s digestible bits of good info
• Ted Drake’s “css toys for professional web developers“ blog, heavy on accessible dev & accessible infographics!