ADA Accessibility Audits and Drupal

Did you know there are approximately 285 million people around the world who are visually impaired? If everyone who was visually impaired made up their own country, it’d be the fourth most populous nation in the world, trailing only India, China and the United States.

That number, estimated by the World Health Organization, drives home why we at Duo place such a high priority on web accessibility. Not only do we feel that web accessibility actually enhances the experience for all users, but we’ve also seen an upswing in law suits against businesses for not having accessible websites.

The primary targets for these suits are colleges, universities, and law firms. We recently completed an Americans with Disabilities Act (ADA) accessibility audit for a mid-size law firm, so I thought it would be useful to walk through how this audit works and how Drupal makes it easy to have an accessible website.

Before we get into the audit, let me address the most common question I hear from clients: How do I know if my website is accessible? 

In 2008, the World Wide Web Consortium released its Web Content Accessibility Guidelines (WCAG) 2.0, which are broken into three separate levels of compliance: A (must support), AA (should support) and AAA (may support).

There is not a cut and dry definition of when a site becomes or does not become ADA compliant, but the Department of Justice recommends website owners follow the WCAG 2.0 AA guidelines. It’s not expected your website will be as compliant as humanly possible, but you are expected to show a commitment to making content accessible. Consider this, if your office needs to be ADA compliant, your website probably does too.

At Duo, we’ve seen more of our clients interested in an ADA audit. At this time last year, perhaps 5% of our clients were asking us for an ADA audit; today, that percentage is near 45%.

With this particular law firm, we were in the process of a minor cosmetic redesign when we performed the ADA audit. Law firms are particularly vulnerable because, in addition to the legal obligations owed by all businesses, they also have an ethical duty to their clients.

Plus, it’s a lot easier for someone who is looking for ADA violations to browse through a set of websites as opposed to walking from building to building looking to see if a ramp is present or if a bathroom is big enough.

With that in mind, we wanted to see where the firm was and wasn’t meeting the compliance standards.

As time has passed, our audit has gotten more sophisticated. We’ve also learned to design to the strongest compliance requirements; we do that so we’re always forward thinking and not giving our clients something that could become questioned in the near future.

We leverage a suite of digital tools, including several Google applications that are readily available to the public. Two I use frequently when conduction an audit are Google’s Accessibility Developers Toolkit and Google’s ChromeVox screen reader.

Accessibility Developers Toolkit
The toolkit integrates with the Chrome Developers Toolkit and works directly in your browser. It allows you to open any page, from your own website to Gmail, and get a list of results that explains what is compliant, what is questionable and what is in direct violation of the WCAG 2.0 guidelines. Think of it as an automated view of what’s not right on your page.

ChromeVox screen reader
This Google plugin allows you to turn on and off a screen reader within your browser so you can see how people who are visually impaired experience the web. It really is a good practice for anyone to go through.

As we go through and review the results and visually inspect a site, we’re looking at things like:

  • Text contrast ratio
  • Alternate text for images
  • Tab order for keyboard users and screen readers
  • Items that may be obscured if using a screen magnifier

Based on our audit, the law firm was in a pretty good spot accessibility wise, although there were some issues we discovered. Many of the things we found were issues we could update on backend, such as ensuring appropriate use of page elements, making sure all items were focusable by keyboard or updating alternate text that was redundant.

For one thing, the site was lacking ARIA tags, which help make online content more accessible to people with disabilities. The contrast of the site’s font was also at a ratio below the recommended value. Additionally, the site featured icons that acted as links but had no descriptive text.
Screen Shot 2017-04-25 at 9.19.23 PM.pngForms should be given extra attention. If you are not careful with the focus order (used in the navigation of assistive technologies), you may be making the content of the form hard to access or even invisible to some users. When testing the firm’s directory page for keyboard and screen reader accessibility, we discovered there were several disconnects in the form.

  1. The focus order went straight from the input field to the submit button. This means any keyboard user wishing to select a search filter would have to tab through the entire page to return to the submit button. Users reliant on screen readers would not even be aware those filters existed before hitting submit.
  2. The page featured an alphabet menu to sort the attorney’s name, but we realized there were no labels listed for screen readers. What that means is without a label, a user with a screen reader would need to hear the entire alphabet instead of being able to jump directly to the letter they wanted.
  3. The alphabet list sat between the search fields and filters, so anyone wishing to access the filters by keyboard would need to tab through the entire alphabet to access them.

By making three small layout changes, we were able fix those issues without any change to functionality.

Fortunately, most of these issues are relatively easy to address. We were aided by the fact that the firm’s site was built with Drupal. Drupal 8 features modules that help build websites accessibly. In fact, developers are asked to agree to a pledge that their module or theme is made as accessible as it can be.

The combination of Drupal’s tools and the results of our audit enabled us to design our pages holistically and know we were giving our client a website that stood up to any accessibility guidelines.

CTA link generic

Ready to start a conversation?