Nine Ways to Make Your Website More ADA Compliant

Blind man at desk holding cane

Making your website ADA Compliant (also known as making it “accessible” to visitors with disabilities) is the compassionate thing to do. Accessible websites allow disabled individuals to enjoy and benefit from the internet’s vast informational, educational, entertainment, and shopping opportunities.

However, there are also legal motivations for making your website ADA compliant. There are law firms and “professional plaintiffs” that crawl the web and look for non-ADA-compliant websites…and when they find one, they file a lawsuit against the website’s owner. Fortunately, there are ways you can make your website more ADA compliant.

The Importance of Web Content Accessibility Guidelines

A critical part of ADA compliance involves following the Web Content Accessibility Guidelines (WCAG). These guidelines are an internationally recognized technical standard developed and maintained by the World Wide Web Consortium (WC3) to enhance web accessibility for all users. And, it’s the standard by which websites are measured for ADA compliance. So, talking about whether a website is “WCAG Compliant” is the same as talking about whether it is “ADA Compliant.” 

Like any standard, the WCAG changes over time, with version WCAG 2.2 having just taken effect on October 5, 2023. WCAG 2.1 contains over 90 guidelines, while WCAG 2.2 contains 13 additional guidelines and introduces 9 additional success criteria. So, as you work to improve ADA compliance, ensure you or your developer follow the most recent guidelines.

Ways to Make Your Website More ADA Compliant

The question becomes, “Do you need to follow 100% of the guidelines to protect your company from the attention of malicious professional plaintiffs?” We’ll refer you to your legal team for an answer on that, but, as web developers, we can give you ways to make your website more ADA compliant than it already is. These few things may just enable some disabled visitors to your site to buy from you, and perhaps even dissuade some professional plaintiffs.

The good news is that if you built your site yourself, these recommendations are easy to implement. If you didn’t build your site, give this list to your web developer — they should be simple for him or her to do. If you don’t have a web developer or your web developer can’t do these, then contact us for help. We’ll do all of these, plus others you need.

Add Alt Text to Images

“Alternative Text” (aka “Alt Text”) is a text equivalent for the images on your website and provides a couple of benefits for your website. In the context of ADA compliance, these descriptions enable screen readers to describe the picture, graphic, or diagram to visually impaired visitors. And, if ranking high on Google is a goal of yours, Alt Text can also help your page, and the images on it, ranked higher. 

To do: Ensure your images have Alt Text to make your website more ADA compliant. Note: No need to add alt text for purely decorative images, like separators, filigrees, and background images.

Medium to High Contrast Text Helps Make Your Website More ADA Compliant

Users of your site with less-than-perfect vision will find the combination of dark text on a dark background or light text on a light background hard to read. To avoid this, use a minimum contrast ratio of 4.5:1 between any text and its background color. Headings should have a contrast ratio of 3 to 1.

If you know the color codes for your text and background, you can use the WebAIM Contrast Checker to learn the contrast ratio. Adjust the foreground or background colors until the Contrast checker reports a contrast ratio of 4:5 to 1 or greater.

To do: Review your website for low/poor contrast sections and use a tool like WebAIM Contrast Checker to change them to the required ratio.

Make Your Forms Accessible

Two kinds of text explain the purpose of a form field: The first is the field “Label,” which is the text above or to the left of the form field (indicated by the red arrow in the image). The second is a field “Placeholder” (indicated by the green arrow), which typically disappears once you start typing in the field.

Screenshot explaining the difference between a form label and form fields placeholder text
Field Label and Placeholder Text

WCAG guidelines do not require the use of placeholder text in form fields but do require that there be a form label for every field.

To do: At a minimum, ensure your forms have a label for every field. Adding field placeholder text can make forms easier for people with disabilities, so please consider adding them too.

Create a Logical Structure

The proper use of HTML tags for content structuring (like <H1>, <H2>, <p>, etc.) is a significant benefit to disabled site visitors. In the same way people with full vision scan the page’s headings for content of interest, HTML heading tags help screen reader users interpret and understand the structure and navigate sections easily.

Headings should be structured like an outline, starting with one and only one H1 heading on a page, with one or more H2 tags on the page. Below any H2 can be one or more H3 tags, and so on. Please note that it’s not OK to jump a level. For example, going from H1 to H3 is not ADA compliant.

ADA Compliant Heading Hierarchy
An example of proper heading hierarchy from the WCAG website

To do: Check the structure of each page for proper use of headings. To do this, you can use the Chrome extension, HTML5 Outliner. Now, you can find and fix incorrect heading structures and make your website more ADA compliant.

Unambiguous Link Descriptions Make Your Website More ADA Compliant

It is a common practice to create links using words like “learn more” or “click here.” It’s easy for a sighted user to understand the context of the link or button, but a blind website visitor who uses a keyboard to navigate your site may be unable to understand the context and would, therefore, not be clear on where the link leads. 

To support visually impaired visitors, you should use descriptive link texts that make contextual sense. For example, instead of “click here,” links should explain their destination or function, like “Read more about ADA compliance” or “Click here to subscribe.” 

To do: Change the wording of generic hyperlinked text to describe where they lead or what they do.

Captions and Transcripts for Improved Accessibility

Videos and audio recordings are powerful ways to deliver content. To ensure any disabled site visitor can access this content, provide captions for videos and transcripts (aka “Media Alternatives”) for video and audio content. Using these two enhancements is crucial for users who are blind, deaf or have hearing impairments.

To do: Make certain your embedded and linked audio and video files have transcripts and captions, as appropriate.

No Automatic Starting of Media

Avoid content that starts automatically, such as videos or audio, as this can be disorienting or disruptive, especially for users with cognitive disabilities. If auto-play is necessary, provide a clear and easy option to pause or stop the media. Changing auto-start/run settings or adding controls help make your website more ADA compliant.

To do: Disable auto-start/run functionality wherever possible. Add or enhance the visibility of controls to stop media playing where the automatic functionality is necessary.

Add an ADA Compliance Statement

Websites come with different regulatory-driven statements, including those about privacy and uses of data. An ADA compliance statement, called an Accessibility Statement, makes a great addition to your website. The content of this statement varies, and you should talk with your legal counsel about the exact wording. But, in general terms, your statement should cover the following:

  1. Express your commitment to accessibility
  2. Specify the technical guidelines you follow, like WCAG, mentioning the level of performance
  3. Provide examples of the accessibility barriers your site addresses (those we present in this article, for example)
  4. Include contact information such as email addresses and ADA-Compliant forms to allow site visitors to report an issue or request an accommodation for a specific disability
  5. State the fact that you regularly review and update your website for accessibility improvements
  6. Include a disclaimer stating that while you strive for accessibility, no website is perfect, so please get in touch with you if there are issues

To do: Work with your legal counsel to draft an ADA compliance statement and post it on your website.

Incorporating Keyboard Navigation for Improved Accessibility

Keyboard navigation is important because some visitors to your website cannot use a mouse…mostly because they can’t see the tiny white mouse pointer. Many disabled individuals rely on their keyboard to move around a website, usually pressing the TAB key to go from one element to another. 

How do people who navigate with a keyboard know which element they are “on”? The answer is called a Focus Ring. That’s a rectangular box around the element that currently has “focus,”…which is the technical word that indicates where you are “on” the page.

For improved accessibility, ensure all interactive elements (links, forms, buttons, and custom controls) can be navigated to and operated by a keyboard. Incorporating keyboard navigation is another great way to make your website more ADA compliant. However, implementing it can be a technical challenge, which means you should talk to your developer (or to West Hills Web if you do not have a developer) for assistance.

To do: Check your website for keyboard navigation and Focus Ring functionality. Explore how to add these capabilities to your website by talking with your developer.

Actively Supporting the Need for Accessibility

As dependence upon the Internet for essential, personal, entertainment, educational, and health services grows, so will pressure for all websites to provide accessibility to disabled users, especially those with visual and hearing impairments. 

Since the risk of malicious compliance litigation isn’t likely to go away, you must take steps to provide equal access and protect against legal actions. Being proactive benefits disabled web users and provides a degree of litigation risk management.

Let Us Make Your Website More ADA Compliant

If you’d like help implementing these simple changes and others your website may need, contact us by phone at 818-592-6370, by email at info@westhillsweb.com, or by using our online contact form to learn how we can make your site more ADA compliant.