What is ADA Website Compliance?

The Americans With Disabilities Act (ADA), a civil rights law, was passed in 1990 prohibiting discrimination against individuals with disabilities. It ensured equal opportunity in employment, state and local government services, public accommodations, commercial facilities, and transportation.

But the way we access goods and services has come a long way since 1990. So much of our daily lives happen online, making website access a necessity for many. Because of this, websites have their own ADA rules. Because the 1990 ADA law does not include standards for the web, the Department of Justice uses Web Content Accessibility Guidelines (WCAG) 2.1 AA as the primary legal basis for compliance.

If you think your website is missing the mark on accessibility, there are many ways to remedy this.

What is the purpose behind website ADA practices?

Not everyone can interact with websites in the same way. Many people rely on assistive technology like screen readers, screen magnifiers, voice recognition software, or eye-tracking software to help them utilize the internet and understand website content. These tools can’t interact with every website by default, and steps must be taken during the development process to make sure that your website is compatible with assistive technology.

What are some common ways to improve your website’s ADA compliance?

If you are like most businesses, your website probably doesn’t meet all ADA standards. While a thorough ADA audit from a developer can identify problem areas, there are some common issues you can address on your own to make your website more user friendly for people with disabilities.

Include Alt Text for All Visuals

Alt text is a concise description that gets added to the code attached to images and graphics. If someone is visually impaired and relies on a screen reader to interact with a website, alt text ensures that they are still able to understand what is being communicated by the visual elements of a page. By describing a visual, such as “a man in a red shirt sitting on a bench,” you allow users to fully understand the content through the use of a screen reader.

But, alt text should be used for more than photos; all non-decorative visual elements including icons, buttons, banners, logos, and sketches need descriptive text. Without it, a user relying on assistive technology cannot understand whether a visual is a link, a brand logo, or a stock photo. A litmus test for deciding whether or not alt text is necessary for a visual element is to ask yourself the following: “If I were to remove this element from the page, would something be missing from what I am trying to convey?” If the answer to that is “yes,” then add alt text that actually describes what is going on.

If an image is purely decorative, it doesn’t require descriptive text; however, you must use the proper alt attribute to signify a decorative image.

If your website uses a CMS, you can likely add alt text yourself. If you need help writing descriptive alt text, consider asking an AI model like Claude or Gemini, though always double check for accuracy.

Implement Keyboard Navigation

Keyboard navigation helps users to navigate an entire website using only a keyboard, eliminating the need for a mouse. For users with visual or motor impairments, all interactive elements including links, buttons, forms, and tabs must be accessible via simple keystrokes (such as Tab or Enter) rather than complex mouse movements. Making your website navigation keyboard accessible is a great way to ease the digital experience for all.

If you don’t know whether or not your website is keyboard navigable, start by opening up your homepage and hitting the tab key to see if you are able to select the links on the page. If you are noticing some problems, then it’s time to consult with your developer.

Check Your Color Contrast

Proper color contrast on websites is crucial for those with visual impairments. The contrast between the foreground and the background must be sharp enough that buttons and text can pop. For example, white text on a light peach background would likely fail the ADA test due to insufficient contrast.

A website that wants to remain ADA compliant should maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. If this doesn't mean anything to you, don’t fret. There are plenty of free ADA color checking tools available online. Find one and make sure your brand’s colors aren’t making website use harder for those who are colorblind or visually impaired. If they are, then talk to your designer about rethinking how you are using those colors on the site.

Structure Content with Headings

Using the proper HTML header tags (h1, h2, h3, etc.) creates a logical structure for your website’s content that screen readers can then use to properly communicate. If your website looks great but lacks proper HTML formatting, users that need screen readers will not be served well.

Proper HTML structure allows users to identify the difference between intro text, headings, image captions and more. Make sure your pages are titled in a way that relevantly describes the content on the page. Screen readers will scan from the top of the page to the bottom. Keep this in mind when deciding the order of content on your website.

Add Captions and Transcripts

To ensure full ADA compliance, it is essential to provide accurate captions for all video content and descriptive transcripts for all audio materials. Captions allow users who are deaf or hard of hearing to follow along with video dialogue, while transcripts provide text for those who prefer reading or use screen readers.

Test Your ADA Compliance

To test if your website is ADA compliant, you can run a few evaluations. Some are automated and others are manual. Certain plugins can be used to run diagnostics, but these are not always reliable. It’s helpful to work with an agency that has development capabilities and can conduct a thorough review, making changes where necessary.

If you’re looking to update your ADA compliance, reach out to our team at USDP for a consultation. We’d be happy to get you up to speed!