A presentation at #a11yTO Conference in in Toronto, ON, Canada by Carie Fisher
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.
My name is Carie Fisher I’m a Sr. Accessibility instructor and developer at Deque.
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.
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.
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.
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.
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.
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.
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.
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.
Now that we have some of the background out of the way…let’s explore the ways SEO and accessibility can overlap.
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?
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
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.
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
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.
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.
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.
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
Search Engine Optimization (SEO) and website accessibility are not the same thing. There are different rules to follow, different audiences to target, and different ways to test the effectiveness of each. Optimizing your website for search engine bots does not mean it will be automagically accessible to real people too. Some SEO practices may even hurt your website’s accessibility. However it is not all bad news, there are some areas where the two worlds overlap. If you have a limited budget and/or timeframe for a project, targeting these overlapping areas may simultaneously boost both SEO and website accessibility.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Link to the actual event.
for free. You
can too.