How to Boost Your Website’s Accessibility + SEO

SEO + A11y = <3

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 six areas* may simultaneously boost both SEO and website accessibility.

*Note: the focus of this article is on the areas of overlap. Each specific task in each area below may target SEO more, some tasks may target accessibility more.

---

Structure Matters

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, and have multiple ways of finding content (ex. search, sitemap, table of contents). Search engine bots like well-organized website architecture, which leads them to index your content in a more meaningful 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.
• 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 5 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.

---

Proper Use of Tags

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> tags can give a user or search engine bot an overview of a page and how its content is structured while the <h3> through <h6> tags provide a quick understanding of the details in each section. It is important for both website accessibility and SEO to get these tags right.

Best Practices

• Keep heading tags consistent and do not just style text to give the visual appearance of headings — use actual heading 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 <h1>), if you are starting a new page section.
• It is best practice to just have one <h1> per page. Think of <h1> tags as essentially “second page title tags” that send a relevancy signal to search engine bots.

---

Perfect Your Links

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 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, but do not overdo it. According to Yoast.com: “it improves your SEO is 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.
• 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.
• 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.

---

Image Optimization

Even though search engine bots and people using screen readers cannot “see” in the traditional sense, both rely on image names and alternative text to tell them what the image is depicting. Having these elements in place is essential both for supplementing the surrounding content and for the overall user experience.

Best Practices

• Be as consistent and accurate as possible when naming your images. For example, do not name your file brown-puppy.jpg for a photo of an orange tabby cat.
• Avoid using non-alpha characters (ex. 7, %, &, $) and use dashes between words, rather than underscores in your image names or alternative text. For example, write orange-tabby-cat.jpg and not 0r@nge_t@66y_c@t!.jpg
• 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 benefit anyone — people using screen reader will be annoyed and search engine bots will penalize you. Just don’t do it.

---

Supplement Your Media

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 this is an area where both SEO and website accessibility has some decent overlap.

Best Practices

• Less is more. Limit the use of complicated media components (ex. slideshows, videos) in your design whenever possible. No fear…there are alternative layout options.
• Add clear, complete, and concise text descriptions and markup to essential media. Think twice about keeping non-essential media.
• All videos and slideshows should have a play/pause button if it is auto-advancing —but please never autostart. Ideally, all of the media controls should be able 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.

---

Declutter Your Content

Last but not least, after addressing your website’s overall structure, heading tags, 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 website content from one website to the next. What works for some users on some websites, might not work for you and your site. The key is to write the best content you can and keep Google’s content creation mantra in the back of your mind:

“Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.”

Best Practices

• 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.
• 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.
• Do not duplicate your content. Search engine bots will notice and penalize you. Your users will just be confused.
• Bullets and numbered lists 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.