ADA compliance doesn’t just affect the people who use a website, it can affect site owners as well -- in a positive way. Just as designing for accessibility can help create a better experience for users of all abilities, ADA compliance can bring some SEO benefits to your site.
When working on ADA compliance projects, our SEO team works to improve things that are both visible and invisible to visitors to a site. Many of the things that can be done to make sites more accessible to users with disabilities have the added benefit of providing search engine crawlers with information they look for.
Common ADA Compliance Issues & SEO
Alt Text Optimization
Even though alt text isn’t something people typically see on a webpage, it plays a very important role in ADA compliance. In our article about ADA compliance issues for web developers, we talked about how it’s a major target in compliance lawsuits because screen readers use it to describe images for users with impaired vision, but that’s not the only purpose it serves. If an image isn’t able to load, alt text can be visually displayed to help sighted people understand the intent of the image. Alt text is also important for SEO because it helps search engines understand the purpose of an image.
Best Practices for Alt Text
When writing alt text, you ideally want to balance SEO with user experience. Including a targeted keyword in alt text has SEO benefits, but throwing in too many keywords just for the sake of targeting keywords can come across as spammy and be frustrating for people using screen readers.
The best way to approach alt text is to simply describe it like you would to someone who isn’t able to see the image, being sure to put the image in the context of the page. For example, a picture of two people working at desks in an office could have different meaning depending on if it’s being used on a page about workplace design or if it’s used in an article about the show The Office. When images serve a functional purpose, like an icon or a button, alt text should describe the function, not the image itself.
When alt text is complete, end it with a period so that the screen reader will know to pause briefly before moving on. There’s no need for alt text to include the words “image of” because screen readers tell users when something is an image. If an image is a link, you also don’t need to include the words “link to” because that’s another thing that screen readers already indicate to users.
As far as length goes, WCAG guidelines recommend alt text be 100 characters or less. If alt text needs to be displayed visually, it will appear in the space where the image would appear, and if it doesn’t fit in the available space, it might not display at all or get cut off, unless the CSS overflow property is used.
Not every image on a page necessarily requires alt text. Think about the purpose an image serves in the context of the page. Decorative images like spacers, borders, and CSS background images don’t need alt text since they don’t add meaningful value to the content of the page. When an image has information that’s repeated in neighboring text, it can be considered a decorative image. If an image has visible captions, alt text isn’t needed since it would be redundant for people using screen readers.
In the case of infographics, alt text should be approached in the same way it would be for other types of images. Sometimes, you might find infographics that have a transcription of the infographic in the alt text, but this can cause problems for people using screen readers. Instead, a transcription or HTML version of the infographic should be available.
Link Anchor Text
Anchor text, the text used to create a link, is another thing that serves several different purposes. From an SEO standpoint, it gives search engines information about the page being linked to. Information from anchor text can also be helpful for people using screen readers, which can let users listen to a list of links on a page. Since speech recognition allows users to speak the text of links they want to select, it’s important for them to have clear anchor text.
Bad anchor text is definitely one of the most common compliance issues you’ll see on the internet. Many sites have pages that include links with anchor text like “click here” or “read more.” Not only does this type of anchor text provide no SEO value, it can be frustrating for people using assistive technology. Imagine a page has multiple links that all use “click here” as anchor text in sentences like, “Click here to contact us,” and, “Click here to read more.” When people are listening to a list of links through a screen reader, they might not hear anchor text in the context of the sentence it’s used in; they could just hear “click here” repeatedly. Someone using speech recognition software would also have a hard time indicating which link they want to select.
When writing anchor text, it’s best to keep it concise, focusing on the most relevant keywords. There aren’t any official limits on anchor text length, but keep in mind that screen readers will read the entire text of a link, so you don’t want to turn entire sentences or paragraphs into links. Long anchor text is also difficult for people using speech recognition software to interact with. Long anchor text should be avoided, but at the same time, you should make sure that your link isn’t so short that it could be difficult for someone with mobility issues to click on, such as a single letter or a number.
URLs should only be used as anchor text if it’s a very brief and clear URL. Screen readers read URLs character-by-character, so even if you’ve never used a screen reader before, you can surely imagine how frustrating it would be to have to listen to a long URL full of numbers and odd characters. If a person needs to use speech recognition software, trying to select that same link would likely be too difficult to be worthwhile.
It’s also important to be careful with capital letters. Some screen readers read all-caps anchor text aloud letter-by-letter, so unless you’re linking to an organization whose name is an acronym, this can cause confusion.
Page Title Tags
Search engine algorithms exist in a constant state of change, but page title tags have consistently remained a valuable part of SEO. Title tags help search engines understand the intent of a page, so if we review a client’s site and find pages with title tags that don’t accurately describe the purpose of a page, that would be something we’d want to address right away. For example, if a page about lamps has a title tag about bookshelves, it’s probably reaching the wrong audience and getting negative SEO signals as a result.
Accurate, descriptive title tags also help people with cognitive disabilities who need to be able to clearly identify content when they have multiple browser tabs open. Since screen readers can read page tabs aloud for users, clear title tags help people with impaired vision as well. Following basic best practices for writing title tags, like avoiding keyword stuffing, is a simple way to make sure they’re both ADA and SEO friendly.
Section Headings & Content Organization
Well-organized content helps create a better experience for users of all abilities. People love it when content includes section headings that make it easy for them to jump right to the information they need. Screen readers also depend on headings to interpret content in the correct order and to help users navigate between sections. Keywords contained in section headings offer some SEO benefits, too.
Heading levels range from H1 to H6, H1 typically being the biggest in size and H6 being the smallest. But heading levels shouldn’t be chosen based purely on the way they look. Heading levels 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 could be further broken down with lower level headings. Very often, content doesn’t need to go beyond H2 or H3 heading levels.
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:
In the above example, it’s okay to go from an H3 heading to an H2 heading since the H3 section 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. Bolded text might be fine for sighted users, but a person with impaired vision could have a hard time distinguishing the bolded text from the rest of the content. Screen readers also won’t be able to use the bolded text to help people jump to different sections.
Transcripts for Audio & Video Content
In our article about common ADA compliance problems for web developers, we talked a little bit about the importance of providing transcripts for audio and video content. Not only is this helpful for people with disabilities, and sometimes for people without disabilities, it can be helpful for SEO. Including a transcript for video content or audio-only content like podcasts is a way to naturally include highly relevant keywords on a page, making it easier for people to discover the content. Search engines algorithms are very sophisticated, but they aren’t advanced enough to automatically scan audio and video media to figure out what it’s about.
Need Help Making Your Site ADA Compliant?
Have more questions about ADA compliance for websites? We offer ADA compliance auditing and remediation as part of our web development services. Contact us and we’ll take a look at your site.