10 Accessible and ADA-Compliant Website Examples

An accessible website works for everyone, particularly those with disabilities. The concept promotes inclusivity and ensures everyone has equal access to digital environments. Plus, an accessible website helps to protect you from litigation.

Under the Americans with Disabilities Act(opens in a new tab) (ADA), organizations cannot discriminate against individuals with disabilities in public accommodations, including online spaces. The ADA requires organizations to create accessible digital content that follows the standards included in the Web Content Accessibility Guidelines(opens in a new tab) (WCAG) or risk legal consequences.

The good news is that creating a website that is both ADA-compliant and visually stunning is doable. Below, we’ll show you 10 examples of ADA-compliant websites created by various organizations.

Before we look at accessible UX design examples, a quick review of what makes a website ADA-compliant.

Understanding ADA Website Compliance and Requirements

The ADA requires organizations to follow the technical standards included in WCAG to be considered compliant. These guidelines help to ensure web content is perceivable, operable, understandable, and robust (known as the POUR principles). Following these principles help organizations create a better, more accessible experience for individuals with disabilities.

More simply, organizations need to ensure content is accessible by and accommodating to users with disabilities. To ensure your website is compliant with the ADA, it should include the following:

• Well-written alt-tags for all images, videos, and audio files

• Clear and accurate transcripts for video and audio content

• Up-to-date site language in header code

• Text alternatives when users experience input errors

• Consistent, organized layout that promotes readability

• Follow proper color contrast ratio recommendations and accessible color palettes

Though this is not an exhaustive list, these capabilities do help people with disabilities interact with web content to their specific preferences (you can find a more exhaustive list of WCAG criteria here).

For example, users with low vision or other visual impairments can increase font size or change color schemes to their preferences. Multiple navigation options, including keyboard navigation, provide users with multiple ways in which to navigate your site. Both practices ensure users have equal access to your content.

10 Websites that are ADA-Compliant

1. Scope: Create Visual Impact with High Contrast

Scope(opens in a new tab) proves that businesses don’t need to sacrifice a slick brand identity to meet requirements for color contrast ratios. According to WCAG Success Criterion 1.4.3: Contrast (minimum)(opens in a new tab), the minimum contrast ratio is 4.5:1. Scope’s site has a high color contrast ratio of 9.66:1 between its logo and page background, exceeding what’s required by WCAG. Because of this, it’s much easier for users with visual impairments or color blindness to distinguish between various web elements.

Scope - Equality for disabled people homepage screenshot

Curious about your brand’s accessibility? Use our free color contrast checker to see if your brand colors meet the latest WCAG requirements.

2. BBC News: Take Control with the Keyboard

WCAG Success Criterion 2.1.1: Keyboard(opens in a new tab) requires all websites to be operable with the use of a keyboard alone. The BBC News Website(opens in a new tab) is an excellent example of how to implement this functionality while still providing a good user experience. For example, users can hit the ‘Tab’ button on their keyboard and cycle through every element on the page without needing a mouse. The site also features a clear, easily distinguishable focus element, letting users know exactly where they are on the page.

This capability is particularly useful for users with limited mobility or difficulty with fine motor control. They can maneuver through the BBC website via a keyboard emulator such as speech input software, sip-and-puff software, on-screen keyboards, and more.

BBC - Accessibility Help webpage screenshot

3. Vasa Museum: Leave a Trail of Breadcrumbs

The Vasa Museum(opens in a new tab) in Sweden ensures users with short attention spans or other cognitive disabilities can complete a long series of navigation steps. They do this through the use of breadcrumbs, which provide a series of links at the top of each page. These links break down how the content fits within the entire site.

Including breadcrumbs on your website enables users to visualize how content is structured, quickly navigate to a related page, and understand where a page sits within a set of pages. This also satisfies WCAG Success Criterion 2.4.8: Location(opens in a new tab), which requires a user’s location within a set of web pages to be readily available(opens in a new tab).

A series of breadcrumbs that read Home > Visit > Kids & families > Discover Vasa together! above a photo of an old wooden ship

4. Metropolitan Transportation Authority: Suggest Corrections if Users Get it Wrong

In New York, the Metropolitan Transportation Authority(opens in a new tab) has created a responsive search experience that makes it easier for users to find information. The search function still provides relevant search results even if information is spelled incorrectly or in the wrong format.

For example, if an address is spelled incorrectly, the search bar can provide suggested addresses beneath the search bar. These recommendations ensure users can find information and get to where they want to go — even if they’ve misspelled words or entered the wrong information.

The trip planner for the Metropolitan Transportation Authority (MTA). The user-entered address "Bashwick Ave" is misspelled, with suggested addresses below

5. RNID: Let Users Scale Text to Their Needs

Small text can be a big hurdle for low-vision users. To overcome this issue, RNID(opens in a new tab), a national charity for hearing loss, enables users to scale text size up to 300% without disrupting the user experience.

This ensures low-vision users can still read content without losing any content or functionality. It also fulfills WCAG Success Criterion 1.4.4 Resize(opens in a new tab) text guidelines which require text to be resized without assistive technology up to 200% without impacting the user experience.

RNID homepage screenshot

6. National Federation of the Blind: Paint a Clearer Picture With Alt Text

In the United States, the National Federation of the Blind(opens in a new tab) (NFB) highlights some of the best practices around using alternative text (also known as alt text). Alt text is a written description of an image that screen readers can read out loud or convert to Braille. To help organizations create high-quality alt text, the Web Accessibility Initiative’s alt text decision tree(opens in a new tab) provides best practices for alt text.

The NFB’s website includes short, descriptive, and evocative alt text that’s also relevant to the surrounding context of the page, fulfilling WCAG Success Criterion 1.1.1: Non-Text Content(opens in a new tab). Because the site contains such well-written alt text, individuals who use assistive technologies can understand the entire content of a page, making the site more accessible and usable to people with disabilities.

National Federation of the Blind homepage screenshot with code

7. BMW: Let People Pause Scrolling Content

To ensure users with low vision or cognitive disabilities don’t get distracted by content, BMW’s(opens in a new tab) homepage includes a way to pause scrolling content. This functionality allows BMW to fulfill WCAG Success Criterion 2.2.2 Pause, Stop Hide(opens in a new tab) recommendation and increases users’ concentration.

Additionally, this enables web developers to fit a lot of information on a page without users getting overwhelmed. Take BMW’s carousel for example. Users can pause the scrolling carousel and consume content before moving on to the next slide.

A blue BMW SUV that is part of a home page carousel. The play-pause functionality button is currently paused.

8. Wikipedia: Set the Tone with a Table of Contents

Wikipedia(opens in a new tab) is a prime example of how a table of contents can streamline the browsing experience. The site has more than 6.5 million English pages, but enables users to navigate through web pages within a set of pages via a clickable table of contents.

This approach also satisfies WCAG Success Criterion 2.4.5: Multiple Ways(opens in a new tab) which recommends providing users more than one way to locate a web page within a series of web pages. Essentially, the idea is to provide users with more than one way to locate content to choose the best way for them.

Wikipedia - Americans with Disabilities Act of 1990 page screenshot

9. Federal Aviation Administration: Use the Correct HTML Tags to Identify Headings

Text-heavy websites like the Federal Aviation Administration (FAA) make good use of headings to help ensure that complex regulatory and safety information is available to all. More importantly, these headers are appropriately ranked, ensuring users who rely on screen readers can correctly navigate the page.

For example, the site’s ‘Data and Research(opens in a new tab)’ page is structured by topic (labeled as H1s) with subtopics listed below in H2s. This allows users to easily navigate the page and understand how content is organized, helping them find what they need more easily.

By correctly ranking headings, FAA site users can easily follow the company’s story. Additionally, this allows the FAA to fulfill WCAG Success Criterion 1.3.1: Info and Relationships(opens in a new tab).

Federal Aviation Administration homepage screenshot

10. World Wide Web Consortium: Write Compelling (and Accurate) Page Titles

As you’d expect, the World Wide Web Consortium’s (W3C)(opens in a new tab) website demonstrates some of the best practices for page titles. Each page title is concise, yet descriptive, and gives users a clear idea of what the page is about. For example, page titles such as ‘Planning and Policies Overview’ and ‘Web Accessibility Laws and Policies’ are clear and concise, helping users more easily decide if the page has the information they’re looking for. This is particularly beneficial for those who rely on assistive technologies to navigate the web.

A webpage on the W3C's Web Accessibility Initiative. The page title reads "Easy Checks — A First Review of Web Accessibility."

ADA-Compliance Testing: Find Out How Accessible Your Site Is

Creating an accessible, ADA-compliant website doesn’t require a complete overhaul of your existing digital content. Adding accessibility features like alt text, proper heading structure, captions for videos, and maintaining appropriate color contrast all enhance the accessibility of your content — and get you closer to ADA compliance.

To help you get started in finding and fixing accessibility issues, there’s AudioEye. We start with a free accessibility scan that finds common accessibility errors that our Automated Accessibility Platform can automatically fix. We go a step further, supplementing our automated testing with expert testing overseen by our team of human experts and individuals from the disability community. With additional accessibility tools like our Color Contrast Checker, Developer Tools, and Accessibility Training, you can find and fix accessibility issues and create compliant, inclusive, and usable digital content.

See how accessible your existing content is — enter the URL of your digital content below to get a free accessibility scan.