ADA Compliance Tools For Your Site

Leave No User Behind

The technologies behind the web have improved, making it easier than ever to build an accessible website or improve the accessibility of an existing site. This is great news for website owners as well as users who require assistive technologies to use the web. In this article, I’ll go over some of the tools that you can use to check your site for ADA compliance as well as some of the ways that the Content Management System Drupal has improved with respect to accessibility.

Scanning Your Site for ADA Accessibility

There are lots of free to use tools that scan your site for many of the issues that may be making your site inaccessible. Keep in mind, however, that some aspects of accessibility must be reviewed by a human being - these tools should be included in auditing your site for ADA compliance but shouldn’t be the only method you use.

Tenon.io

Tenon is an easy to use website that will scan your website, run many tests, then give you an overview of the tests that passed vs. the tests that failed on your website. Below the overview, Tenon lists each issue individually, with the highest priority issues at the top. Each issue displays the site code that caused the test to fail as well as what you or your web developer need to do to remediate the issue and pass the test. Easy!

The screenshot below shows an overview of passed and failed tests on a website.

Here’s a screenshot that shows a failed test. The failure comes from the fact that there is no label on the form input field for this particular contact form. 
 

Wave

Wave isn’t quite as pretty as Tenon, but it is still useful. It works by displaying your site along with icons to indicate parts of the page that are passing or failing tests.

Google Lighthouse

Lighthouse is a bit less user-friendly for many content editors because it’s targeted more towards developers. But it’s an extremely useful tool because it can also provide information about site speed, adherence to best practices, SEO and more.

To use Lighthouse, open Chrome and navigate to your website. In the top menu bar, next to File and Edit, click View. Then go to Developer and click Developer Tools. In that window, click Audits. In the that window, select Accessibility (and any additional audits you’d like to run) and click Run Audit. Lighthouse takes about 20 seconds to run the audits then show you the results. The following screenshot shows what a typical overview audit may look like:

You can get more details on the accessibility audit by scrolling down and clicking into each test that failed:
 

Drupal 8

The release of Drupal 8, along with new versions of several contributed modules, brings many accessibility improvements. I’ll review a few of them here.

Alt tags by default

As we’ve discussed in the other articles in our ADA series, an alt tag is an image attribute that serves as an alternative text for users who are unable to see images. Drupal 8 now requires images to have alt tags by default. However, it should be noted that this requirement can be overridden by changing the Drupal configuration settings (but please don’t).

ARIA

One of the biggest improvements between Drupal 7 and Drupal 8 is the extensive support of ARIA attributes in HTML. ARIA attributes are the means by which many additional contextual pieces of information for web elements are provided in order to assist people with disabilities. Consider an  e-commerce site with a shopping cart "total price" field that is updated as users add and remove items from their cart. Sighted users will likely notice that the total price has changed because of the visualization, but visually impaired users may be unaware of the change. This problem can be overcome by setting the total price field with an "aria-live" attribute. Setting this to “assertive”, or “polite” in conjunction with Drupal 8’s “announce” feature will cause screen readers to announce the new value of the field when it is updated.

Semantic HTML

Another area of improvement in Drupal 8 is how semantic HTML elements are built into templates by default. One of the most important aspects of web accessibility is using the right HTML element for the right job. In the past, developers would use elements such as div or span for just about anything, often resulting in poor accessibility because a div is a semantically neutral element - it doesn’t tell aural users anything about the purpose of the element. Enter HTML5. HTML5 has introduced many additional elements that provide more semantic information to aural users. Drupal 8 outputs semantic HTML5 markup by default, making it an excellent CMS option if you’re looking to upgrade from an older CMS like Drupal 7 or Wordpress.

The Next Step

If you’d like help with improving the accessibility of your website, we’d love to help. Fill out the contact form below and we can get started! If you're interested in learning more about accessibility and what it means for your site, check out our primer on compliant websites and our 10 Tips for Designing ADA Compliant Sites.