A presentation at DrupalCorn Camp in in Des Moines, IA, USA 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 five areas we will go over today will help boost both your SEO and website accessibility at the same time.
I am your guide for today. My name is Carie Fisher and I’m a Sr. Accessibility Instructor and developer at Deque.
Deque is a company that specializes in digital accessibility. We help other companies make their websites and mobile applications more accessible to people with disabilities by providing educational resources, accessibility audits, and a suite of tools to help automate accessibility reviews. You may be familiar with our open sourced tool called Axe, which is now built into Firefox and google’s accessibility inspector and also are available as independent add-ons. We have helped thousands of companies from technology leaders like Google and Microsoft, the top US banks, insurance companies, retailers, airlines, hotel chains and the biggest government agencies.
So before we jump right into the different ways to improve your website, let’s do a quick review about SEO and accessibility. First off - how many SEO or marketing experts do we have out there? Accessibility gurus? OK you all might know some of this already, but it is important to review it so we all start on roughly the same level.
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 is 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.
If you added up all of those numbers, US companies spent over six hundred fifty billion, nine hundred twenty million dollars between 2008-2020 on only SEO. That is a lot of money dedicated to one small aspect of marketing.
Accessibility - A11y - 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, app, or electronic document in a meaningful and equal way.
Now let’s talk about the numbers for accessibility. According to the World Health Organization, 1 Billion or 15% of the world’s population identify with having some sort of disability.
That original number is deceiving because that if you consider people who don’t identify as having a disability but who could benefit from accessible websites, such as people temporarily disabled (broken wrist), situationally disabled (glare on a device screen), mildly disabled (hard or hearing, color blind), English as a second language, and the older generations that number jumps up way higher. It is estimated that about 30% of the world’s population can benefit from accessible websites…and that number will continue to grow as people live longer and technology becomes even more prevalent and important to our daily lives.
If we are talking about the US alone, there are 56.7 million people, roughly 19% of the population, who identify as being disabled. This is the same as the entire population of California + New York (~56 million). There are 39.6 million people, roughly 13% of the population, who are over the age of 65 and could benefit from accessible websites. This is the same as the entire population of Texas + Illinois (~38 million). With advancements in medicine and people living longer, this number is expected to double in the next 20 years. In total accessibility cover over 96.3 million or 32% of the US population alone. If you are ignoring this collective demographic, you are losing up to 32% of your potential users.
So you might understand that disabled and older people equals about a third of the population, but did you know that they also have a lot of money to spend? People with disabilities in the U.S. alone control an aggregate annual income of > $1 trillion and have over 200 Billion of that to spend as they see fit. Bureau of Labor Statistics states that people over 65 are spending abound 81 million US dollars each year, with that number expected to rise dramatically over the years due to people living longer and pushing back retirements. That number almost doubles when you include the Baby Boomer age group who are 55-64 year olds. So long story short, if your company is spending money on SEO but not addressing accessibility needs, they are missing out on both users and their money.
If you need further proof of why - besides more potential users and revenue - should marketers and business leaders be concerned about accessibility for their website? According to W3C: better search results, reduced maintenance costs, and increase in audience reach and retention.
So to recap, Search Engine Optimization (SEO) and digital accessibility (a11y) are not the same thing. There are different rules to follow, different audiences to target, and different ways to test the effectiveness of each. Some people think that optimizing a website for search engine bots means it will also be accessible to real people too. That is not the case. Some SEO practices may even hurt a website’s accessibility. The reverse is also true. Some changes you make to a website for accessibility will not help your SEO. But there is a sliver of overlap (as shown in the salmon section of this slide) between the two fields. The main focus of this presentation is on the areas of overlap. Each specific task in each section we review may target SEO more, some tasks may target accessibility more, but all tasks will be either neutral or helpful, not harmful to your overall SEO and accessibility goals.
Now that we have some of the background out of the way…let’s explore the ways SEO and accessibility can overlap.
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? You need to make finding pages and interacting with the website as easy as possible.
Best Practices ● Construct your navigation and page layout in a clear and consistent way. If your website is difficult to navigate or use, it may affect your user analytic stats including — time on a website, pages viewed and bounce rate. This may, in turn, hurt your SEO ranking. At the very least, it will irritate your users. ● Have multiple ways of finding content (ex. Search bars, sitemap, table of contents). Search engine bots like well-organized website architecture, which leads them to index your content in a more meaningful way. ● Avoid using CSS or other stylistic markup to convey meaning. You should never “fake” an element that should be using HTML markup instead. ● 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.
Hadi Rangin is an expert user of screen reader software from the University of Washington. In this video, he demonstrates the elements of a well designed web page and how they sound to someone who is blind. In this snippet Hadi is showing the difference between a site with good semantic markup and one without. Pay attention to the screen reader at the beginning of the video which he is is running at normal speed. For the demo he slows it down considerably.
Your website content can essentially be boiled down to HTML markup, including tags that are used for your page’s headings (not to be confused with <header> tags). Navigating through the <h1> and <h2> headings can give a user or search engine bot an overview of a page and how its content is structured while the <h3> through <h6> headings provide a quick understanding of the details in each section. It is important for both website accessibility and SEO to get these headings right.
Best Practices ● Keep heading tags consistent and do not just style text to give the visual appearance of headings — use actual tags. Otherwise, search engine bots and users will not know which content is most important. ● Heading tags should be in order. That means an <h1> is followed by an <h2>, an <h2> is followed by a <h2> or <h3> and so on. ● Avoid skipping heading tags when going down in order on a website page. For example, do not skip from a <h2> to a <h5>. Note: it is ok to skip heading tags when going up in order (<h5> to <h2>), if you are starting a new page section. ● I know some might disagree with me, but it is best practice to just have one <h1> heading per page. Think of <h1> tags as essentially “second page title tags” that send a relevancy signal to search engine bots.
Here is Hadi Rangin again showing how headings help him understand a page without having to go through every single sentence on a page.
Links can make or break a website for both search engine bots and people using assistive technology devices, like screen readers. After reviewing the page structure and headings, links are the next major element that users and crawlers most often take note of, so it is essential that your links are as perfect as possible.
Best Practices ● Make sure you have no broken links. This 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. ● Use internal tagging-type links. Studies have shown it improves your SEO by relating one piece of content to another, and more specifically a group of posts to each other. It also allows users easy access to similar content with one click. But don’t overdo it. ● Skip adding descriptive title attributes to your links (that text that appears when you hover over a link). It is not necessarily wrong to add link titles, but is arguably not very helpful for either SEO or website accessibility. ● 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. We are going to demo that now.
People with visual disabilities (ex. seizure disorders, blind), auditory disabilities (ex. deaf, hard of hearing), situational/temporary disabilities, people with poor bandwidth connections, and many others can benefit greatly from media that is displayed in an accessible way. Similarly, search engine bots are “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 is depicting. Having these elements in place is essential both for supplementing the surrounding content and for the overall user experience.
Best Practices ● Less is more. Think twice about keeping non-essential media. If you DO need complex media, at least be sure to include a play/pause button — and please never autostart anything. Ideally, all of the media controls should be accessible. ● Provide alternative ways to access your media. For example, have transcripts and/or captions for videos; create a transcript for an audio-only file; add a braille formatted file to your media. There are many different types of alternative formats available for your use. Both users and search engine bots can benefit. ● Add clear, complete, and concise text descriptions and markup to essential media. For example, do not name your file “brown-puppy.jpg” or worse “file1234.png” for a photo of an orange tabby cat. ● Keep your alternative text to under 125 characters. If you need more characters, use caption text or further describe the image in the main text area on the page. ● Write alternative text like a human and not a robot. Keyword stuffing does not help anyone — people using screen reader will be annoyed and search engine bots will penalize you. Just don’t do it.
An image conveys much more than information…it conveys emotion.
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. What works for some users on some websites, might not work for you and your site. But regardless of your website’s topic, there are some general commonalities.
Best Practices ● Do not duplicate your content. Search engine bots will notice and penalize you. Your users will just be confused. ● Do not use bold and italic tags for highlighting words, instead use strong and emphasis. Visually they will look similar to each other, but screen readers (in the right mode) will add emphasis to words surrounded by <strong> and <em> tags while they will completely ignore or only slightly alter <b> and <i> tags. Small change that will help convey meaning to users. ● Bullets, lists, and white space help break up your content for readers, making them more user-friendly. Bonus: some research indicates that search engines bots prefer content with bullets and numbers over plain text. Whereas white space helps people with attention deficit disorder and dyslexia be able to focus on your content ● Limit the length of each paragraph to roughly three sentences and target a reading grade level consistent with your audience. Ideally, for both website accessibility and SEO purposes, you should aim around the 9th-grade level.
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.
Now our journey is complete! We found five areas where both SEO and accessibility can overlap and co-exist harmoniously- structure, headings, links, media, and content.
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 five areas may simultaneously boost both SEO and website accessibility.
The following code examples from the presentation can be tried out live.
for free. You
can too.