10 Web Accessibility Examples for ADA Compliance

The Web Content Accessibility Guidelines (WCAG) have become the de facto international standard for digital accessibility. In fact, WCAG is almost universally cited in ADA lawsuits and settlements — and legal precedents show that adhering to WCAG is key to ADA compliance.

In this post, we take a look at 10 websites that follow WCAG 2.1 to great effect — delivering user experiences that are both engaging and accessible.

When it comes to designing and developing your website, it's wise to check for accessibility issues based on WCAG.

1. Create Visual Impact With High Contrast

Plenty of designers take a less-is-more approach to web design, especially when it comes to color. And while that can result in striking, minimalist designs with subtle color palettes, it’s not all that accessible for people with low vision.

WCAG Success Criterion 1.4.3: Contrast (Minimum) recommends a contrast ratio of at least 4.5:1 between foreground text and background colors.

Scope proves that businesses don’t need to sacrifice a slick brand identity to meet this requirement, wit a high contrast ratio of 9.66:1 between its logo and page background.

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

2. Take Control With the Keyboard

For people with limited mobility or difficulty with fine motor control, it can be hard — or outright impossible — to navigate a website using a mouse. WCAG Success Criterion 2.1.1: Keyboard requires that all content on a page is operable with the use of a keyboard alone (or a keyboard emulator such as speech input software, sip-and-puff software, on-screen keyboards, and more).

The BBC News website is a prime example of how to implement this functionality. By hitting the Tab button on their keyboard, users can cycle through every element on the page without needing a mouse.

3. Leave a Trail of Breadcrumbs

For people with short attention spans, it’s easy to get confused when following a long series of navigation steps to a page. For that reason, WCAG Success Criterion 2.4.8: Location recommends making information about a user’s location within a set of web pages readily available.

Adding a trail of breadcrumbs to each page helps users visualize how the content is structured, quickly navigate to a related page, and understand where a page sits within a set of web pages.

The Vasa Museum in Sweden is a great example of this, with a series of links at the top of each page that break down how the content fits within the entire site.

4. Suggest Corrections if Users Get It Wrong

Done right, the search function on a website can help users quickly get to where they want to go. If the information supplied by the user is spelled or formatted incorrectly, real-time corrections can suggest the most likely alternative.

In New York, the Metropolitan Transportation Authority has created a responsive search experience that makes it easier for users to find the information

5. Let Users Scale Text to Their Needs

Small text size can be a big hurdle for low-vision users, who rely on web browsers to scale text to a more comfortable size. For that reason, WCAG recommends that websites (1) avoid using images to display text and (2) ensure that resizing text does not cause it to spill off the screen.

WCAG SC 1.4.4 Resize text requires that text can be resized without assistive technology up to 200 percent without loss of content or functionality.

In the UK, RNID (a hearing loss charity) lets users scale text on its website by up to 300% without disrupting the user experience.

6. Paint a Clearer Picture With Alt Text

For people who cannot perceive images visually, image alternative text (or alt text) is key to understanding all content on a page. Alt text is a written description of an image that screen readers can read out loud or convert to Braille.

Unfortunately, some businesses forget to add alt text to their images. Or they don’t realize its purpose and write something that’s closer to a file name (“image of two mountains”) than a true description of what’s on screen (“Two mountains with a path winding between them, against a night sky filled with stars and a half moon”).

In the United States, the National Federation of the Blind highlights some of the best practices: short, descriptive, and evocative alt text that’s also relevant to the surrounding context of the page.

Need help writing better alt text? Check out the Web Accessibility Initiative’s alt text decision tree, which provides best practices on when and how to write alt text.

7. Let People Pause Scrolling Content

Both designers and marketers tend to like carousels. What better way to include a lot of information on a page, without overwhelming people?

However, businesses should be aware that scrolling content can be challenging for users with low vision or cognitive disabilities. Similarly, movement can make it difficult for some users to concentrate on other parts of your page.

WCAG Success Criterion 2.2.2: Pause, Stop, Hide recommends giving users a way to pause, stop, or hide any content that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented alongside other content.

This capability is on full display on BMW’s homepage.

8. Set the Tone With a Table of Contents

If your website has a lot of information, WCAG recommends going beyond basic navigational elements like a Navigation Bar or Site Map.

In these situations, you can cut through the complexity of a page with a table of contents that (1) provides a complete overview of what’s on the page and (2) lets users jump to the section they want.

This approach also helps satisfy WCAG Success Criterion 2.4.5: Multiple Ways, which recommends providing users more than one way to locate a web page within a set of web pages. The intent is to provide multiple ways for users to locate content, so they can choose the way that works best for them.

With more than six million English language pages, Wikipedia is a prime example of how a table of contents can streamline the browsing experience.

9. Use the Correct HTML Tags To Identify Headings

Another simple — but often overlooked — aspect of accessible web design is the proper use of headers. Headers are an effective way to break up large chunks of text, but designers often fall into the trap of choosing a header for its visual appearance instead of nesting headers by rank.

According to the W3C’s Web Accessibility Initiative, skipping heading ranks can be confusing to people who rely on screen readers and other assistive technology (AT) and should be avoided whenever possible.

Text-heavy websites like the Federal Aviation Administration make good use of headings to help ensure that complex regulatory and safety information is available to all.

10. Write Compelling (and Accurate) Page Titles

Choosing the right page title isn’t just important for optimizing your website’s ranking on search engines; it’s also a key enabler of website navigation.

Because the title of your page is the first component a screen reader announces, it’s important to pay close attention to getting the content and formatting right. As you’d expect, the World Wide Web Consortium’s (W3C) website demonstrates some of the best practices for page titles: it’s concise yet descriptive, and highly specific.