April 05 2015

Best Practices for Website ADA Compliance

Website ADA ComplianceWhen you think of ADA compliance, things like wheelchair ramps and bathroom handrails might initially come to mind. However, when it comes to website accessibility, there is an increasing number of best practices, rules and regulations that every marketer, technology and communications professional needs to be aware of. Think this doesn’t apply to your site? Think again, because changes are coming in April 2016* that can affect all websites that offer goods and services online.

ADA Compliance 101

The ‘ADA’ in ADA compliance refers to the Americans With Disabilities Act. Currently, there’s nothing about websites in the ADA because they didn’t exist as we know it when it was passed 25 years ago. However, the Department of Justice is planning to rectify that in June 2015, resulting in new standards that can affect any website that offers goods and services online.

The goal of website ADA compliance is to write your website’s code in such a manner that a person with epilepsy can use the site without risk of seizure, or a vision-impaired person using a reader can order his groceries or access his bank account. It’s about fairness and bringing to the web the same inclusiveness found in the brick-and-mortar establishments that comply with the ADA. There have been rules and best practices for writing and displaying code on a website for years now, but compliance with these rules has been only been mandated by certain businesses or industries. The result is that most websites are non-compliant and behind-the-times. The good news? Coding an ADA-compliant site is very possible with little or no impact to usability or design.

Section 508 Compliance vs. WCAG

Let’s talk terms first.  You may have heard about section 508. This doesn’t actually refer directly to the ADA, because it’s actually part of the Rehabilitation Act of 1973. The important thing to note about this is that it is not required for private entities unless they work directly with or take money from the federal government. Those that do must build their websites to meet the rules of 508 compliance. 508 compliance is very restrictive and can significantly impact website style and design. For most businesses, it is very likely that your site will NOT need to meet 508 standards of compliance.

The one you should be paying attention to is WCAG 2.0 – Web Content Accessibility Guidelines. This is the industry standard for non-governmentals. It’s also the standard the Department of Justice (DOJ) has used as a barometer in its court cases so far. The DOJ has gone so far as to use WCAG 2.0 as the yardstick for ADA compliance in the case they settled with Peapod.com in November 2014.  This, more than anything, tells us which way the winds are blowing.

Comparing WCAG Levels

WCAG comes in three levels: A, AA and AAA. Like baseball, A is the weakest and AAA the strongest. For interest of comparison, WCAG AAA compliance co-relates 100% with 508 compliance. This means that it will work for just about everybody, but design, performance and look and feel will be severely impacted. Because the DOJ has admitted that 508 compliance comes with a significant cost and is not practical, there’s no reason to think they would require businesses outside the purview of 508 regulations to adhere to level AAA standards. 

In contrast, level A conformity has a minimal impact but also minimal effect. It allows browser readers to more effectively navigate a site, but it doesn’t make a site compliant to the level the DOJ wants to see. The happy medium – and the one to keep on your radar is level AA. Level AA is not so light as to leave a large number of folks with disabilities behind, and not so restrictive as to greatly affect your site’s look, feel and functionality.

Understanding Level AA WCAG Compliance

The World Wide Web Consortium (W3C) administers the WCAG and serves as the arbiter of the internet. As such, they have made WCAG to be as easy and understandable as possible. It breaks it down into four different types for changes, known as POUR (Perceivable, Operable, Understandable and Robust).

  • Perceivable – Information and user interface components must be presentable to users in ways they can perceive (e.g. have Alt Tags say what the item actually does, like ‘Submit form Button.’)
  • Operable – User interface components and navigation must be operable (e.g., you must be able to navigate the site using a keyboard as well as a mouse.)
  • Understandable – Information and the operation of user interface must be understandable, (e.g.,error messaging on a form should make sense; instead of ‘Invalid field’ messaging, use ‘The Email field must be in a valid format.’)
  • Robust – Content must be robust enough so it can be interpreted reliably by a wide variety of user agents, including assistive technologies. In other words, don’t use tags or code that only certain browsers understand.

WCAG 2.0 Checklist

For reference, we have provided a quick summary of key WCAG 2.0 requirements, but encourage you to dig more deeply into each of these topics (removing every filter but A and AA).

  • Text alternatives – provide alternatives for non-text content (e.g., images) so that it can be accessed by impaired individuals
  • Time-based media – provide an alternative (e.g., transcript) for time-based media (e.g., audio/video) that presents equivalent information, or link to textual information with comparable information for non-prerecorded media)
  • Adaptable – create content that can be presented in different ways without losing information or structure
  • Distinguishable – make it easy for users to see and hear content, including separating foreground and background, by using readable fonts, larger font sizes, and highlighted link styling for example
  • Keyboard accessible – make all functionality available from a keyboard without requiring specific timings
  • Timing – provide enough time for users to read and use content
  • Seizures – do not include design elements that are known to cause seizures (e.g., rapid flashing)
  • Navigable – provide multiple ways to allow users to navigate content including obvious/prominent links and other techniques
  • Readable  – make text content readable and understandable via styling and other techniques
  • Predictable – make web pages appear and operate in predictable ways
  • Input Assistance – assist users with web experience, correct mistakes and describe errors in text
  • Compatible – maximize compatibility with current and future user agents, including assistive technologies

Website ADA Compliance and Your Business

Now that you know enough to be dangerous, it’s important to work closely with a vendor that understands the nuances of WCAG compliance, and the important changes that are coming our way. From design through development through QA testing, all teams need to work together to meet compliance standards and offer the best user experience possible for impaired individuals.

* This article was updated in October 2015 to reflect the most recent Department of Justice date announcement.
  • Regs & Legislation
  • Website Compliance

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.