Back to blog

Breaking Down the ADA’s New Website: What Works, What Still Doesn’t

Posted August 26, 2022


Posted August 26, 2022

A screenshot of the new ADA website, with a screenshot of the old ADA website in the background
A screenshot of the new ADA website, with a screenshot of the old ADA website in the background

Ready to see AudioEye in action?

Watch Demo

Launching a public beta website is a bold move, but that's exactly what the Department of Justice did with the new ADA site. Here's what I discovered after taking the new site for a spin.

The Americans with Disabilities Act website provides explanations of the laws protecting the civil freedoms of people with disabilities in the United States, contact information for the departments charged with enforcing the act, and related news and resources.

However, the site has been redesigned only once since its launch in 1999 — and it’s starting to lag behind current technologies and design best practices.

As a follow-up to the latest web accessibility guidance it published in March 2022, the U.S. Department of Justice (DOJ) launched a new website for the ADA. In a bold move, the DOJ made the site a public beta. Anyone can interact with it and provide feedback using a small link at the bottom of each page.

Being the intrepid explorer of the digital frontier that I am, I decided to visit the site and see how it’s coming along. Here are some of my findings.

Where Has Progress Been Made?

Each page lets users know it’s official

At the top of each page is a message that the beta site is an official site of the U.S. government. This is an improvement on the old site, which tells users that it is maintained by the DOJ’s Civil Rights Division.

This may seem like a small change, but confirming the backing of the entire government adds legitimacy to the ADA that the old site struggles to match.

Every Image Has Clear, Concise Alt Text

Image alternative text, or alt text, is a written description of an image that screen readers can read out loud to people with visual impairments, sensory processing disorders, or learning disabilities. It is also an important — and often undervalued — component of accessibility.

People who depend on alt text notice when effort is spent writing thoughtful, informative descriptions that include them in the full experience. The beta site treats alt text as a way to express the cooperative vision of the ADA, providing an equivalent experience to those who cannot perceive the images.

For example, which image on the beta site’s home page does this alt text belong to? “A teacher and a student sitting at a table signing to one another”

A series of images. One shows a teacher and a student sitting at a table signing to one another

All Topic Pages Have Hidden Table of Contents

Both the current site and the beta site have content explaining the ADA’s position on various topics of public access, fair treatment of people with disabilities, and related concerns.

However, the beta site alters the way these topics are presented. For example, the Service Animals page on the current site is filled with text and heavily reliant on technical language and legal definitions.

Image of original ADA site overview for service animals

The beta site’s version of this page is notably different, adding images and allowing visitors to collapse and expand various sections of content to streamline their experience.

Image of updated design for ADA service animals page, featuring a more intuitive navigational structure.

“We didn’t want to force users to read content that isn’t relevant to them, so when we included extra details or definitions, we used accordions, or other collapsible design patterns,” said Ryan Johnson, a content strategist at 18F, a digital services agency within the U.S. government.

The Beta Site Takes Advantage of Coded Navigation

Links, images, and input fields all play key roles in a website’s design, along with headings and landmarks. Assistive technologies include features that allow focus to jump by specific element, and when used correctly, headings and landmarks are powerful touchstones of a website.

The ADA’s beta site takes advantage of this concept by including landmarks at the start of every major area, such as the banner containing the main menu and the main content of the page. On applicable pages, breadcrumbs show visitors the path they followed to arrive at that page. Headings are used to enable easy skimming of longer pages, like the Introduction to the ADA page.

The Language Is Informative and Understandable

“The new site, which is still in beta, targets people with disabilities rather than bureaucrats,” notes Paul Gillian in Computerworld. “The plain-talk style of the new site doesn’t mean the technical stuff has disappeared. Instead, it’s been moved off the home page to a dedicated section that bureaucrats and lawyers can love.”

Indeed, that was a chief concern of 18F when the agency was tasked with the redesign. The current website is overflowing with definitions and legal snippets. The beta site, however, has been designed to be as readable as possible, specifically taking into account people with disabilities who are most likely to require the information and services on the site.

What Still Needs Work?

There Are Typos Everywhere

I’m a screen reader user. That means the content of any user interface is read to me. It also means my navigation style of websites is different, as I rely on coded elements to help me quickly get where I want to go.

I use landmarks a great deal, and the first landmark on every page of the beta site reads as follows: “Official Goverment Website.” Can you spot the typo? Government is spelled ‘Goverment.’

Image of code for updated ADA site with typo

When being read to by a synthetic voice that doesn’t have a brain to fill in the blank, that missing letter is painfully obvious. This landmark allows assistive technology to find the section of the page that certifies this site is an official outlet of the U.S. government, and its label should reinforce this. Instead, every time a page loads on the beta site, screen reader users are treated to this flub.

Some Malfunctioning Elements

The beta site is just that … a beta. It’s still under construction and being improved every day. There are clear statements of this in the header and footer, and a link at the bottom of each page to submit feedback. So it’s no surprise to find broken controls.

A quick example is the accordion at the top of each page, which allows visitors to hide and unhide a blurb explaining how they can tell a government site is official. When I was researching for this piece, the control failed to hide the explanation again and wouldn’t collapse. By the time I started writing, this problem had been partially addressed, at least for screen reader users: the text now disappears, but the accordion still reports itself as expanded.

Telling People How To Navigate a Basic Control

Personal preference plays a large role in design, and accessibility design is no different. Developers are likely to have specific techniques they employ to avoid accessibility and usability blocks, just as assistive technology users prefer one style over another because of how their tech interacts with the code.

Sometimes it’s necessary to include directions that include visitors through a process, but this is usually an exception to the norm. So when I came across directions for using a button to unhide a list of checkboxes on the Resources page, I felt surprised and a bit patronized.

“Press enter to open the category filter dropdown list. Use either the tab key or arrow keys to move between different filter options. Press either the spacebar or enter key to select or deselect a filter option.”

The directions are accurate and easy to follow, but their existence for this control alone implies that visitors would have trouble with simple mechanisms that are common across the web.

Akin to grabbing a blind person’s hand and dragging them across the street when help was neither asked for nor needed, these instructions demand the user follow where they wish to lead, ignoring the flexible nature of accessible design that must consider all use cases, not just those that are most familiar.

What’s Next for the ADA Website?

The beta site is a great example of how a rebrand can be done in the public eye, incorporating feedback from site visitors as well as internal testing and suggestions. As it grows, I’m interested to see how future improvements benefit those seeking clarification of, and resources surrounding, the ADA.

My personal opinion is that the site is on the right track, with coded elements and attributes designed for assistive technology users, language aimed at the general public instead of legal experts, and images and iconography to ease the cognitive load of visitors. With daily updates being made to the site, I am confident that soon, this will be the 21st century face of the Americans with Disabilities Act that it so desperately needs.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post


Keep Reading