Finding the Place Where Accessibility and SEO Happily Co-Exist

A presentation at #a11yTO Conference in October 2018 in Toronto, ON, Canada by Carie Fisher

Slide 1

Slide 1

Finding the Place Accessibility & SEO Happily Coexist

Welcome all! Today we are going to take a journey together to find that mythical place where both accessibility and search engine optimization happily coexist. But what does that mean in a practical sense? Well if you have a limited budget and/or timeframe for a project, targeting the areas we will go over today will help boost both your SEO and website accessibility at the same time.

Slide 2

Slide 2

Hello!

My name is Carie Fisher I’m a Sr. Accessibility instructor and developer at Deque.

Slide 3

Slide 3

Let’s plan our trip...

Some quick backstory…this SEO/accessibility roadmap came out of a conversation I had with a digital marketer a few years ago. At the time, she was new to the world of accessibility but could understand the importance of it on a personal level. But honestly, she was having a hard time trying to convince her client that they needed to spend time and money on accessibility. That was a lightbulb moment for me when I realized that the things that motivated me to work on accessibility tasks were not necessarily the same things that motivated others. Or even if an organization wanted to build accessibility into their company culture, sometimes that was very difficult to do without something tangible to build from. So I brainstormed a bit and came up with some ways to incorporate accessibility tasks into something most companies are already very familiar with - search engine optimization. But before we jump right into the different ways to improve your website, let’s do a quick review about SEO and accessibility so we are all on the same page.

Slide 4

Slide 4

SEO

First off let’s talk about search engine optimization or SEO. SEO is a marketing discipline that focuses on making strategic changes to a website to increase the overall search engine ranking. Which in turn hopefully drives users and sales to the site.

Slide 5

Slide 5

SEO Spending

SEO is big business. From 2008 to today, the amount in the billions spent each year on SEO alone is astronomical. The trend is always an increase in spending with projections into 2020 to reach 80 Billion US dollars.

Slide 6

Slide 6

SEO Total Spending

In fact, if you added up all of those numbers, US companies spent over six hundred fifty billion on SEO alone! That is a lot of money dedicated to one small aspect of marketing.

Slide 7

Slide 7

Digital Accessibility

Digital Accessibility (A-1-1-y) - is about designing and building your digital offerings in such a way that regardless of a person’s mental or physical ability they could still interact with your website or app in a meaningful and equal way.

Slide 8

Slide 8

Digital Accessibility Numbers

Now let’s talk about the numbers for accessibility. According to the World Health Organization, over 1 Billion or 15% of the world’s population identify with having some sort of disability. That number is deceiving though because if you consider people who don’t identify as being disabled BUT who could benefit from accessible websites, that number jumps up way higher. In fact, it is estimated that about 35% of the world’s population could directly benefit from accessible websites and apps…and that number will continue to grow as people live longer and technology becomes even more prevalent and important to our daily lives.

Slide 9

Slide 9

Digital Accessibility Numbers vs Users of the Internet

In comparison, this graph shows the number of users on the top web browsers over the past couple of years. If you look at the light gray section, that represents IE users at 143 million users. If you look at Android represented as the goldenrod slice, they are barely over 87 million users. So besides the big blue section of Chrome users who have the biggest piece of the browser pie (estimated at 1.93 billion internet users last year), every other desktop or mobile browser caters to less people than the population that identifies as being disabled. So why is it that companies still focus so much of their time and money making things look perfect on a specific mobile platform or some browser that will be obsolete in a couple of years? Maybe they think that people with disabilities don’t have money? According to the Bureau of Labor Statistics people with disabilities in the U.S. alone control an aggregate annual income of > $1 trillion dollars, so that can’t be it.

Slide 10

Slide 10

Overlap Between SEO and A11Y

So it stands to reason that if a company is spending $80 Billion each year on SEO, but not addressing real people’s accessibility needs, they are missing out on both users and their money. Of course, Search Engine Optimization (SEO) and digital accessibility (a11y) are not a one to one relationship. There are different rules to follow, different audiences to target, and different ways to test the effectiveness of each. But there is a sLiver of overlap between the two fields. If we focus on those areas of overlap, we can hopefully help clients achieve both their overall SEO and accessibility goals with less time, effort, and money.

Slide 11

Slide 11

Let’s explore...

Now that we have some of the background out of the way…let’s explore the ways SEO and accessibility can overlap.

Slide 12

Slide 12

Structure

First stop on our trip is structure! Do not underestimate the power of a good user interface (UI). Websites with clean, clear, and consistent UIs are particularly good for search engine bots and people using assistive technology devices or who only use a keyboard. Think about it — if a user or bot cannot find a page, how can they possibly read or interact with it?

Slide 13

Slide 13

Best Practices for Structure

  • Build your website architecture & navigation in a clear and consistent way - if your website is difficult to use or navigate, it may affect your user analytic stats including — time on a website, pages viewed and bounce rate. This may hurt your SEO ranking. But at the very least, it will irritate your users.
  • HTML page elements are important - so use them. When appropriate, use accessible HTML page elements, like <article>, <section>, <header>, <footer>. Those elements are more descriptive to search engine bots and assistive technology devices then plain <div> or <p> elements.
  • Think of <h1> tags as essentially “second page title tags” - that sends a relevancy signal to search engine bots and screen reader users, so make sure each page has at least one <h1> but don’t overuse them or you could be penalized.
  • Use real heading tags <h1> to <h6> - do not fake them with CSS styles. Having real heading tags help search engine bots and users know which content is most important on your website.

Slide 14

Slide 14

Best Practices for Structure - Demo

On the left is an image of a website marked up with HTML 4 vs HTML5. When you can, use accessible HTML5 elements since they are more informative to search engine bots and assistive technology devices than just divs with IDs or classes.

In this video snippet, Hadi Rangin who is an expert user of screen reader software from the University of Washington, demonstrates the way a well designed website would sound to someone using a screen reader. As you can see and hear, structure is very important to your overall SEO and accessibility goals.

https://www.youtube.com/watch?time_continue=141&v=7Rs3YpsnfoI

Slide 15

Slide 15

Links and Media

Next stop is Links and Media! People with visual and auditory disabilities, people with poor bandwidth connections or who watch videos without headphones for example, can benefit greatly from media that is displayed in an accessible way. Similarly, search engine bots could be called “disabled” in that they do not have eyes, ears, or hands, so they rely on image names, descriptions, and alternative text to tell them what the image or media or link is depicting.

Slide 16

Slide 16

Best Practices for Links and Media

  • Provide alternative ways to access your media. There are many different types of alternative formats available for your use. For example, have transcripts and captions for videos; create an audio-only file; add a braille formatted file to your media. Both users and search engine bots can benefit, plus this is essentially “free” content that can help boost your SEO rankings.
  • Be consistent & accurate with file naming. When media is missing alt text or descriptions, both SEO bots and screen readers can associate the file name to the surrounding content or link. So it is probably best not to name your file “brown-puppy.jpg” or worse “file1234.png” for a photo of an orange tabby cat.
  • Write alternative text like a human and not a robot. Some marketers use the alternative text field for keyword stuffing. But don’t do it! Keyword stuffing does not help anyone — people using screen reader will be annoyed and search engine bots will definitely penalize you.
  • Check your site for broken links. This is a fairly easy task that can have major benefits. Broken links can be seen as a sign of a neglected or abandoned website for SEO. It is also a bad website accessibility practice that can frustrate/confuse your users.
  • Provide descriptive link text. Avoid using phrases like “click here” and “read more”. If you prefer to use those phrases, you can keep them if you add additional link information using visually hidden or ARIA methods.

Slide 17

Slide 17

Best Practices for Links and Media - Demo

Here is a list of some phrases of text all with “read more” links. If we did not add additional content, a screen reader user would just hear: read more, read more, read more, read more and an SEO bot would index the links in a non-meaningful way. If we add additional ARIA or visually hidden information for the links, the screen reader experience changes dramatically and the SEO bot will index your links in a much more meaningful way.

So you can see and hear, that having these elements in place is essential both for supplementing the surrounding content and for the overall user experience. Demo of A11y Style Guide read more pattern, showing output, code, and screen reader: http://a11y-style-guide.com/style-guide/section-general.html#kssref-general-read-mor e

Slide 18

Slide 18

Content

Last but not least, after addressing your website’s overall structure, headings, links, images, and other media, the next step is to focus on the actual content. Since each website is a unique snowflake, there is a lot of variability in the actual content from one website to the next. But regardless of your website’s topic, there are some general commonalities.

Slide 19

Slide 19

Best Practices for Content

  • Do not duplicate your content. Search engine bots will notice and penalize you. Your users will just be confused.
  • Have multiple ways of finding content (ex. Search bars, sitemap, table of contents). Search engine bots like having lots of ways to get to your content, which leads them to index your content in a more meaningful way. Users like having options as well.
  • Incorporate bullets, lists, and white space to help visually and semantically group your content together, making them more user-friendly, especially for people with attention deficit disorder and dyslexia. Research indicates that search engines bots prefer content with bullets and numbers over plain text as well.
  • Use internal tagging links to group content. An example of this is linking different blog articles on the same general subject together - maybe design, development, ARIA, etc. Studies have shown it improves your SEO by relating one piece of content to another. It also allows users easy access to similar content with one click.
  • Aim around the 9th-grade level for copy. Studies have shown this is the optimum level of readability for the majority of users. How easy or difficult your content is to read factors into how much time people will actually spend on your site, whether they visit other pages, or bounce; which are clearly important to overall SEO rankings.

Slide 20

Slide 20

Best Practices for Content - Demo

In 1996 Bill Gates wrote an essay on the emerging internet and predicted that “Content is where I expect much of the real money will be made.” For SEO and users of your site in general, content is still the foundation of everything. It does not matter how good your social media presence is, or how clean your links are, or how awesome your keywords might be if your content isn’t both relevant and easily consumed - people will leave your site quickly. To make sure that your content is ready for prime-time, there are many tools that analyze different aspects of readability - spelling, grammar, sentence length, character count, etc. For SEO, one of the most important aspect to pay attention to is the Flesch-Kincaid score. The Flesch-Kincaid score looks at the average sentence length (ASL) vs the average number of syllables per word (ASW) and formulates an overall readability ease and grade level. For SEO purposes, content that scores between 40 and 70 (which is equivalent to 7th grade to entering college) rank best. So today I’m showing a quick example of two different real-life passages from the The National Weather Service using a free tool called the Readability Analyzer. A big thanks for Ashley Bischoff from the Pacellio Group for letting me know about this tool. So the first one we are testing is from The National Weather Service on Oct 1, 2015 about hurricane Joaquin and it included some very complex words.

“We are becoming optimistic that the Carolinas and the mid-Atlantic states will avoid the direct effects from Joaquin. However, we cannot yet completely rule out direct impacts along the East Coast, and residents there should continue to follow the progress of Joaquin over the next couple of days.” This alert ranked 13.47 and confused a lot of people who heard it. In fact, many people stayed in their homes when they should have left because they didn’t understand what the warning meant. The second one we are testing is from The National Weather Service on Oct 10, 2018 for hurricane Michael which repeated some words for emphasis and clarity. “Michael is expected to bring life-threatening storm surge to portions of the Gulf Coast, life-threatening flash flooding due to heavy rainfall, and life-threatening winds Tuesday evening into Wednesday. Michael is forecast to move quickly into the Southeast U.S., bringing with it the threat of more inland flooding on Wednesday and Thursday” This alert ranked 8.22 and is much clearer and easier for people to understand. The difference between these two alerts is over 5 grade levels which is a decent divide on its own, but that divide can be amplified when people are in extreme circumstances - like when people are worried about their safety. So when people are deciding whether to invest their time in your company or buy a product don’t alienate them with big complex words when simple words could work.

Slide 21

Slide 21

Now our journey is complete!

We found some areas where both SEO and accessibility can overlap and co-exist harmoniously- structure, headings, links, media, and content.

So going back to my digital marketer friend…I’m happy to report that she was able to convince her client to focus their SEO budget a bit more on some of these areas of overlap and was able to increase the overall accessibility of their site while still improving their search result rankings. So everyone was happy.

Slide 22

Slide 22

Thanks! Any questions?

You can find me on: Twitter: https://twitter.com/cariefisher Medium: https://medium.com/@cariefisher GitHub: https://github.com/cehfisher Drupal: https://www.drupal.org/u/cehfisher