Marketing, Web, and Graphic Design | InVerve Marketing Blog

Web Content Accessibility Guidelines 2.0: Making Your Site ADA Compliant for Level A

Written by Lisa Smith | Mar 1, 2017 7:25:34 PM

 

The U.S. Department of Justice (DOJ) has set the implementation of the Americans with Disabilities Act (ADA) Web Content Accessibility Guidelines (WCAG) 2.0 to go into effect in 2018. With less than a year left until the enforcement begins, businesses are looking at ways to make their sites WCAG website compliant. If you’re already planning to update your existing website — or build a new one — be sure that these guidelines are implemented in the design.

 

The ADA requires that “places of public accommodation” (essentially organizations open to the public) must be accessible to disabled persons. This also means that the online presence of these businesses need to comply. Business and institutions affected by this law include:

1. Financial institutions          7. Restaurants

2. Retail stores                       8. Parks and Recreation

3. Hotels                                  9. Daycare centers 

4. Theaters                            10. Private schools

5. Medical offices                  11. Museums and Libraries
6. Pharmaceuticals              12. Higher education

 

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.)

 

Level A sets a minimum standard of accessibility and does not achieve broad accessibility for many situations. For this reason, UC recommends AA conformance for all Web-based information.

 

But in this blog, let’s look at for the lowest (Level A) compliance. We’ve compiled an overview of some of the minimum requirements for Level A compliance.

 

Click here to download the entire WCAG 2.0 Checklist for ADA Compliance

 

Provide Text Alternatives for non-text content

How to comply

You must provide true alternatives to any image-based content, as many users browse websites with images turned off. In order to comply, you will need to add descriptive alternative text (alt text) to all your images, audio, and video — and a name to all controls (like ‘Submit’ or ‘Search’).

 

Advice

  • The best way to form text alternatives is to provide most accurate and concise description possible.
  • Alt-text is no place for keyword stuffing. Out-of-context keywords are not only terrible for accessibility, but also harm search engine rankings.
  • Images such as icons, test images, CAPTCHA images, spacers, and those that are purely decorative do not require alt text.

 

Correct use of color

How to comply

A website cannot use a presentation that relies solely on color. Many people are color-blind, and if you don’t use color correctly people will struggle to understand your website. For text on the site, you need to make sure there is a high enough level of contrast between background colors and text colors. 

 

There are online tools available for checking color combinations to see if they are compliant, or if you are working with a web shop they should be able to tell you if you are compliant. You should not rely on color alone for graphics including charts, graphs, or instructions.

 

Advice

  • Print samples in black and white. This can help in checking color issues.
  • Add clear labelling and/or pattering to graphs charts; This will help any color-blind users.
  • If you say something like ‘Click the orange button’, there should be one more identifying remark, such as “Click the orange button below” or by using more specific text on the button itself, such as “Click here to get this offer now.”
  • The goal is not to remove color from your site, but to convey color in more than one way.

 

Keyboard Accessibility

How to comply

The ability for users to navigate your website without a mouse is essential for compliance. Users with motor impairment usually need keyboard accessibility to easily navigate a website. A clean and professional CSS or HTML website will offer keyboard accessibility; making an investment in professional web design can help your business.

 

Advice

  • You can audit your website by unplugging your mouse and only using your keyboard to navigate.
  • Access keys like ‘ctrl + c’ to copy, or ‘ctrl + p’ to print are great in software programs, but can be troublesome on the web. Different browsers can interpret keyboard commands differently, so be wary if you choose to implement access keys to your site.
  • All navigation should be controllable by the arrow or ‘Tab’ keys.
  • Non-standard navigation that includes text explanation is an option, but often is unneeded; almost all users understand the arrow or Tab key navigation.

 

Content that Has Motion

How to comply

Scrolling and blinking content can be hard to focus on because of the movement, especially for those with concentration or reading complications. To comply, you must include options to pause, stop, or hide content that is not completely still.

 

Advice

Some exceptions to this guideline include:

  • Moving content that lasts less than five seconds.
  • Movement that shows something on your website is loading. For example, the little disk that swirls around and around, or a countdown clock that appears on screen, or the progress bar that moves across your screen.
  • Content that does not start without user interaction.

 

Navigation

How to comply

“Skip to Content” links are needed to comply with this requirement. Providing a way for users to bypass parts of each page helps those with screen readers to skip repetitive content.

 

Advice

Some exceptions to this guideline include:

  • Moving content that lasts less than five seconds.
  • Movement that shows something on your website is loading. For example, the little disk that swirls around and around, or a countdown clock that appears on screen, or the progress bar that moves across your screen.
  • Content that does not start without user interaction.

 

Yes, there’s a lot to know about WCAG 2.0 compliance for web design, and we’ve only just scratched the surface.  We will be addressing the other levels of compliance in additional blogs in this series.  But, if you’re feeling overwhelmed by the looming deadline, connect with us and let’s set up a time to talk. We are a web design and inbound marketing agency that has loads of experience working with compliant websites.