Running Web Accessibility Audits with Lighthouse

Civvis uses tools such as Google Lighthouse to audit websites and applications for web accessibility. Learn how you can too following this easy tutorial.

Let’s face it, web accessibility can be hard task to deal with at times. This task can be even more challenging if you don’t have in-house expertise to verify that your website and applications are ADA compliant and accessible for users with disabilities. Moreover, failing to adhere to web accessibility standards can lead to serious lawsuits and fines. Major companies (see Dominos ), Universities, and Public entities have faced accessibility lawsuits in recent months and are paying the price (literally).

On New Year’s Eve, Hernando County joined the company of dozens of other Florida public entities when it was sued by a Daytona Beach man who said the county’s website didn’t comply with the Americans with Disabilities Act. Now, after a county commission agreement last week, Hernando is set to be among those who have paid the man.

Source: Tampa Bay Times

It’s important to understand that web accessibility is not an add on feature or a nice-to-have, it’s a standard. At Civvis, we strive to make PDF forms accessible for users through our cloud application and services. If you don’t use PDF forms, you should still do all that you can to make sure your online assets are accessible for all people. Along with our in-house ADA experts, we use a handful of tools to ensure accessibility. One tool is open-source (free software) and is super easy to use by any pro or novice.

#Winning with Google Lighthouse

Google Lighthouse is an open-source tool for improving the quality of websites. It offers built-in scripts that can audit a site or applications performance, security, and other things. For the sake of this article, we’re going to focus on Lighthouse’s Accessibility Auditing feature.

Getting started

To get started, here’s what you need.

  • Google Chrome web browser
  • A website or web application to test

First, if you don’t have Chrome installed on your computer, go ahead and do so following the instructions on the aforementioned link. It is a prerequisite to run Lighthouse.

Google Chrome’s download page.

After Chrome is downloaded and installed, open it up and navigate over to the website or app you wish to test.

The nc.gov website.

The next step for running an Accessibility audit may seem a bit tricky if you’re not used to working with debugging tools in a web browser. If so, don’t be discouraged. It’s a very simple process.

Opening Dev Tools

Right click with your mouse on the website and select the Inspect option from the menu. You can also use keyboard shortcuts to open Dev Tools in Chrome.

Selecting Inspect from the Chrome dropdown menu.

Once you select Inspect, you should see Chrome’s Dev Tools opened at the bottom-half of your screen.

Google Chrome’s Dev Tools panel.

Running the audit

With Dev Tools opened, your next step will be to navigate over to the Audits tab. This will load a panel with some options you can configure before running your audit.

Google Chrome’s Dev Tools Audits tab.

As you can tell, there are a handful of options you can select from before running your audit including Device type, Audit type, and Throttling. You can configure these to best suit your testing needs. For example, we’ve chosen the following:

  • Desktop – for the Device type
  • Accessibility – for the Audit type
  • Simulated Fast 3G, 4x CPU Slowdown – for the Throttling

Once your configurations are selected, you can proceed to running the audit. Click the run audits button and let Chrome do its thing.

The Run audits button in Google Chrome’s Dev Tools.

Once completed, you’ll see a report generated within the Chrome Dev Tools window.

Lighthouse’s Accessibility Audit Report

Reviewing the audit

After successfully running the accessibility audit, you will find a good amount of helpful information as well as a score that indicates how accessible your website is overall. Pay close attention to what the report finds. For more granular information, you can toggle through each topic and see which element(s) failed during the audit in addition to steps you should take to resolve the issue.

Lighthouse report showing missing labels.

The example above shows that the search form was flagged due to a missing label. To fix this, you or your developer would need to add a proper form label within the site’s code.

<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>

The code snippet above from w3c.org shows the recommended search form labeling.

What if you get a low score?

Getting a low score indicates that your website or application is missing the bare accessibility requirements. Ideally, you want a score as close to 100 as possible. If you happen receive a low score from the audit, fear not (yet). Here are some things you can do to address these issues.

  • Learn about web accessibility and make the fixes yourself. If you need to brush up on your web accessibility skills, W3C’s Web Accessibility Initiative is a GREAT place to start.
  • Contact your development team and ask them to review your site and implement web accessibility best practices.
  • Hire an expert to audit your website and make the changes on your behalf.

How Civvis can help

The Civvis team takes pride in putting web accessibility first for our customer’s online assets. Although our services are primarily centered around web and PDF forms, we’re always happy to chat about web accessibility, Section 508, and ADA compliance. If you wish to learn more information about how we can help your business, university, or agency, drop us a line and one of our accessibility experts will get in touch.

Until then,

Happy auditing!