Table of contents
01
ADA compliance overview
02
Key components
ADA compliance overview
The Standards for Accessible Design included in the Americans with Disabilities Act (ADA) apply to both the physical world and digital spaces. That more than likely includes your website. ADA compliance is a smart business move for many reasons, whether or not you’re legally obligated to maintain it.
In addition to avoiding potential fines, lawsuits, and negative press, it helps you provide a more seamless experience for everyone trying to access your website. As an added bonus, the same practices that help deliver that experience give search engine crawlers more of the information they look for, ergo, better SEO.
Key components
In the same way designing for accessibility often creates a better experience for all users, ADA compliance happens to come with a variety of SEO perks. Use the overlap to your advantage by considering these key website components.
Alt text
“Focus on the most relevant keywords...”
Alt text is used by screen readers to describe images to people with vision impairment or low vision. But that’s not the only purpose it serves. If an image can’t load, alt text is sometimes displayed to help sighted people understand the content of the missing image. Search engines interpret this same alt text when determining how your content will be ranked.
With these factors in mind, try to keep the experience of your customers and the inclusion of SEO keywords equal priorities. Including targeted keywords can help increase your traffic. Too many can come across as spammy and may frustrate people using screen readers. A good approach to alt text is to describe each image as you would to someone over the phone. Highlight the main elements of the image and anything important for context, but keep it direct. The Web Content Accessibility Guidelines (WCAG) recommend alt text be 100 characters or fewer.
When images serve a functional purpose, like an icon or a button, your alt text should describe the function, not the image itself. There’s also no need to include things like “image of” or “link to” in alt text, because screen readers automatically indicate images and links. End alt text with a period so that screen readers will pause briefly before moving on.
Also, not every image on a page requires alt text. Decorative images like spacers, borders, and CSS background images don’t add meaningful value to the content of the page. No meaningful value, no alt text. If an image already has a text caption, adding alt text isn’t necessary either, or the same information would be repeated twice to people using screen readers.
What about infographics? While it seems logical to provide a transcription of the information in the alt text, that can be difficult for screen readers to interpret. Try including a summary as an image caption or provide an HTML version instead.
Transcripts for audio & video content
You guessed it. Transcripts are helpful for people with disabilities, people without disabilities, and SEO. Including a transcript for video content or audio-only content (like podcasts) is a way to naturally incorporate highly relevant keywords on a page, making it easier for people to discover it. Search engine algorithms are very sophisticated, but they aren’t advanced enough to automatically scan audio and video media to understand its meaning.
Anchor text
Search engines use anchor text (or link text) to gain information about the page that’s being linked to. People using screen readers also rely on anchor text to help them navigate your website. Both are good reasons to make sure your anchor text is clear and succinct.
Bad anchor text is one of the most common ADA compliance issues you’ll see on the internet. Many websites use anchor text like “click here” or “read more” repeatedly. Not only does this type of anchor text provide no SEO value, but it can also be frustrating for people using assistive technology-especially when listening to all the links on a page in list form. In that context, “click here to learn more” or “click to read more” provide no guidance about where the link will take them.
Focus on the most relevant keywords when writing anchor text. There aren’t any official limits on length, but keep in mind that screen readers say each word whenever the link is selected. This is why turning entire sentences or paragraphs into links is a bad idea. Long anchor text is also difficult for people using speech recognition software to interact with. At the same time, make sure your links aren’t so short that people with mobility issues have difficulty clicking on them. Don’t use a single letter or number.
A URL should only be used as anchor text if it’s very brief and clear. Screen readers read URLs character by character. Even if you’ve never used a screen reader before, it’s easy to imagine how listening to a long string of numbers and symbols gets old fast. A person using speech recognition software also has to say each character of a URL aloud, so it’s best to avoid them altogether if possible.
You should also think twice before using all caps. Some screen readers read anchor text in all caps letter by letter. Unless you’re linking to an organization whose name is an acronym, stick with title case.
And if you’re wondering about CTA button text, it has little to no SEO value. Just make sure you use actual text instead of image files, so that screen readers can communicate what your CTA buttons say.
Page title tags
While the algorithms are always changing, page title tags have remained a consistently valuable tool for improving SEO. They help search engines understand the intent of each page. If your title tags don’t accurately describe the purpose of the page they lead to, it’s something you want to address right away. For example, if you have a page about lamps and your title tag references bookshelves, it’s probably reaching the wrong audience and getting negative SEO signals as a result.
Accurate, descriptive title tags help people with cognitive disabilities identify content when they have multiple browser tabs open. Since screen readers can read page tabs aloud, clear title tags also help people with impaired vision. Following basic best practices for writing title tags (like avoiding keyword stuffing) is a simple way to make sure they’re accessible and SEO friendly.
Section headings & content organization
Well-organized content helps create a better experience for users of all abilities. People are naturally drawn to content that includes section headings, making it easier for them to jump right to the information they need. Screen readers rely on headings to interpret content in the correct order and help users navigate between sections. Keywords contained in section headings offer SEO benefits too. Noticing a pattern?
Heading levels range from H1 to H6. H1 is typically the biggest size and H6 is the smallest. Your choice of which levels to use shouldn’t be purely based on the way they look. They should reflect the importance of the content at each level.
H1 headings are typically reserved for main page headings, and there should only be one H1 heading per page. From there, content can be divided into different sections with H2 headings, which can be further broken down with lower-level headings. Most content doesn’t require heading levels beyond H2 or H3.
When section headings aren’t used appropriately, it can cause screen readers to interpret pages incorrectly. Let’s say a page is structured like this:
- H1
- H3
- H3
- H2
- H3
That out-of-place H2 section could cause a person using a screen reader to have a difficult time navigating the page. Here’s an example of what good heading usage looks like:
In this example, it’s OK to go from an H3 heading to an H2 heading because the previous H3 closes out an H2 section.
It’s important to note that headings need to be created with heading tags, not just by bolding regular text. Bold text might be fine for sighted users, but a person with impaired vision could have a hard time distinguishing it from the rest of the content. Screen readers also can’t use bold text to help people jump to different sections.
Final thoughts
The core reason for keeping your website ADA compliant is to ensure that everyone who visits it has an equally great experience. Improving your SEO just happens to be a really great perk.
At OneMagnify, ADA compliance is second nature for our designers and developers — one of the many ways we help businesses stand out online for all the right reasons.
Want more?
We offer ADA compliance and SEO auditing/remediation as part of our web development services.