Website accessibility and SEO go hand-in-hand when it comes to technical code considerations. In this resource, we’ll show you how to make your website accessible, ADA compliant, and optimized for SEO.

One of the first things to consider when it comes to accessibility is ensuring your website can be read by screen readers. Screen readers work by looking at the code of an interface—whether that’s a program on a computer or a website—and then translating that into audio that the device reads aloud to the user.

The good news is, coding for search engine optimization (SEO) is very similar to coding for screen readers.

Google and other search engines crawl the internet with robots, and screen readers and other assistive technologies are just that. So if you’ve already optimized your website for search, you’re already on the right path. If you haven’t, you can feed two birds with one seed by using accessible code.

Here are 5 code optimization tips you can use to tackle SEO and accessibility at the same time.

Use Semantic HTML For Website Accessibility and SEO

HTML elements provide context around content. This context, or semantic meaning, helps users navigate and consume content more easily. It also aids search engines in indexing your content.

Strive for proper semantic structure in your HTML by utilizing HTML elements for their intended purpose.

Headlines should use heading elements, which include h1, h2, h3, h4, h5, and h6 in HTML. The h1 element is reserved for the most important headline or title of a document, with each subsequent heading decreasing in importance.

Other elements include address, header, footer, nav, p (paragraph), img (image), block quote, button, and many more. Reference Mozilla’s HTML elements reference page for more details.

Include A Skip Navigation Link For Website Accessibility and SEO

Screen readers function by reading what they find in the code of a website to the user. Imagine a robot reading the text of a website aloud to you. The first thing it would read is the navigation/menu items.

Including a skip navigation link (which is typically hidden from view to sighted users) will allow the user operating the screen reader to skip this and move on to the actual content. This is especially important as users navigate to multiple pages—they don’t want to hear the entire menu of pages read aloud each time.

<a href="#main" class="visually-hidden">Skip to main content</a>

Use Alt Text For Website Accessibility and SEO

Always include alternative text for images, videos, and audio files to website accessibility and SEO.

An alt tag, also known as “alt attribute” and “alt description,” is an HTML attribute applied to image tags to provide a text alternative. This alternative text describes your images and provides critical missing context for users who can’t see them.

Alt tags are important for both screen readers and search engines. They allow users (or Google) to read or hear alternative descriptions of content that they might not otherwise be able to view. Alt tags describe the object itself and, generally, the purpose it serves on the website.

alt="alternative text goes here"

Images are typically used on websites for a few different reasons:

1. Informative images provide additional information to users, supporting copy surrounding them.
2. Active images prompt a user to take some action—essentially a call to action.
3. Decorative images are there solely for visual design and don’t provide any additional information to users.

Only provide alt text to informative and active images. Providing alt text for decorative images adds unnecessary information when read aloud by screen readers, potentially resulting in frustration and confusion for users. For decorative images, simply leave the alt tag blank.

<img src="informative-image.jpg" alt="description of image">

<img src="active-image.jpg" alt="call to action">

<img src="decorative-image.jpg" alt="">

Alt Text Guidelines

Use the following guidelines, adapted from Litmus’ Ultimate Guide to Email Accessibility, to help keep your images and website accessible and usable:

• Alt text for informative images should describe the information in that image and repeat the text in the image if there is any. Avoid repeating information if the surrounding copy states the same thing as the image.
• Alt text for active images should describe the result of the intended action. Think of them like buttons or text links.
• Include an empty alt attribute (e.g. alt=””) for decorative images. Failing to do so will result in most screen readers reading the entire image source URL, creating a confusing and frustrating experience for users.
• Avoid calling attention to the fact that it is an image. Don’t use language like, “This is a picture of…” or “Here’s an image of…” Calling out imagery doesn’t add any value to the user and only serves as a reminder that they can’t see your images.
• Don’t use alt text as a prompt for users to download or enable images, as not all users will have this ability or benefit from it.
• When in doubt, read your alternative text aloud along with the rest of the surrounding content. If it sounds natural to you and provides the intended value, your alt text is doing its job.

Create Text Transcripts For Video and Audio Content

Text transcripts help hearing-impaired users understand content that would otherwise be inaccessible to them. They also provide searchable content for search engines to crawl and index, providing valuable context that otherwise wouldn’t be understood by search engines.

Think of closed captions on television and movies. These captions were developed for deaf and hard of hearing viewers. The same need is present on the internet, where websites now contain rich video and audio content.

Closed captioning is also a great practice because many users view video and audio content at work or in locations where audio may not be desired or may not load due to internet connectivity.

Incorporating transcription and closed captioning into your video and audio content will broaden your audience and assist those with both physical and situational disabilities while creating searchable content at the same time.

Identify The Website’s Language In The Header Code

A global audience views many websites, so it’s important to use the HTML language attribute when coding for website accessibility and SEO.

The language attribute tells any assistive technology which language profile to use for the content. It will adjust accordingly and use the correct pronunciations and accents, resulting in a much better experience for your users.

It’s important to note that the language attribute doesn’t translate content for you. It simply ensures the content sounds natural in the appropriate language.

<html lang="en">

Check Your Website’s Accessibility Score

Google Lighthouse is an open-source, automated tool for improving the quality of your website. The tool provides various scores, with one specifically for accessibility.

Our free Page Speed Audit tool utilizes Google Lighthouse’s scores and presents them at a glance for both desktop and mobile.

Help Build A More Inclusive Internet

Adhering to the development guidelines outlined here when creating or updating your website will put you on the path to both SEO as well as accessibility and ADA compliance. 

Accessibility comes down to putting the user first. When you serve your audience by providing a great user experience on your website—in creating a website accessible to people of all abilities—you end up serving your business interests too with a website that is search engine friendly as well.

When you evaluate the potential impact, both of a customer’s experience and your organization’s bottom line, it is clear accessibility is an effort worth making.

If you’re looking for more resources about website accessibility and ADA compliance, check out Noble Intent Studio’s accessibility ebook and resources here.