Web Content Accessibility Guidelines 2.0: ADA Compliance for Level AA

Starting in 2018, the Americans with Disabilities Act (ADA) will require website compliance from a variety of organizations. If you’re planning on updating or building a new site, you should plan on incorporating the Website Content Accessibility Guidelines (WCAG) that have been set up. Click here to download the entire WCAG 2.0 Checklist for ADA Compliance.

In order to meet the needs of different groups and different situations, WCAG 2.0 guidelines are categorized into three levels of conformance: A (lowest), AA (mid-range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels (for example, by conforming to AA, a web page meets both the A and AA conformance levels).

Today we are focusing on AA — the level that is recommended for all web-based information. To get you started in learning about these guidelines, we have compiled a short  list of some of the more important requirements. Keep in mind that all of the items we covered in our previous blog on Level A compliance will also be required for AA compliance.

Users have access to audio descriptions for video content

How to Comply

Adding audio descriptions to your videos allows all users to have access to the same information. After making the alternative video version, be sure to link to it near the original content.

Advice

• Your audio description should include anything that would not be understood by a visually-impaired person (such as relevant exposition, marking the time, or identifying new speakers).
• When writing and recording your audio description, use clear words in the present tense, and be sure your audio is in-sync with the video.

Contrast Ratio is at least 4.5 to 1

How to Comply

The contrast ratio between the text (words) on your website and the background they sit on must be at least 4.5:1. To achieve this, you will basically want dark text against a light background, or light text against a dark background. You can even check to be sure your website’s text meets this guideline with a handy online tool, like WebAim’s contrast checker.

Advice

• Color contrast ratios can change depending on the size of the font used, so double-check that all instances that you use are in compliance.
• Typography that is used in charts on your site must also comply with these same contrast ratios.

Text can resize without loss of content or function

How to Comply

To accommodate users with visual impairments, the text on your website needs to be able to be resized to at least 200% without losing any function or content. A website built on solid HTML and cascading style sheets (CSS) should do fine with complying.

Advice

• Remember that resizing text is different than zooming (which enlarges text without proper formatting).
• Be sure to check your compliance in multiple web browsers and platforms.
• Consider adding a feature that allows users to resize the text through CSS.

Offer several ways to find pages

How to Comply

For a solid user experience (UX), visitors to your site need to be able to reach different pages on your website in at least two different ways. There are several ways to achieve this, including adding a search function on every page, designing a clear and simple navigation menu, or creating an HTML sitemap page (which links to all other site pages).

Advice

• If you have a smaller site, only one navigation menu may be necessary.
• Another way for easy navigation is to include a “related pages” section that highlights similar content on your site.
• When you design a sitemap, make sure it imitates the structure of your website’s pages.

Use menus, icons, and buttons consistently

How to Comply

Navigation and identification should be consistent throughout your website. Keeping menus, icons, and search boxes in the same locations and same order site-wide will help you to conform. Icons or buttons that share the same function or name should be labeled the same wherever they appear on the site.

Advice

• Using a template for your website’s design can help achieve compliance.
• Image elements will need to use consistent text alternatives (alt text) too. If you use the same image on the site but in different contexts in different areas, then the alt text for the images must be different.

We understand that there’s a lot to know about WCAG 2.0 compliance for web design — and we hope after reading this and our blog on Level A compliance, that things have become at least a bit more clear.

But if you’re feeling overwhelmed by the approaching deadline or the sheer number of items that require compliance, let’s set up a time to chat. We are a web design and inbound marketing agency with loads of experience working with compliant websites.