How Designers Make ADA Websites: A How-to Guide

There are billions of websites out there, and more come online every single day. Many business owners worry about making their website appealing to their audience.

There are all kinds of design tips out there to help you make your website stand out from the crowd.

One thing people may forget about, though, is the importance of accessibility. An inaccessible website may be more of an issue than a poorly designed one.

The Americans with Disabilities Act applies to websites too. If you’re not creating a website in line with the ADA, you may face penalties.

There are many good reasons to create ADA compliant websites.

This guide will look at the benefits of ADA websites. Then it will explore how you can bring your website up to code.

Functionality Over Form

You can find plenty of tips for good website design.

They include everything from color combinations to typefaces. Fewer of them focus on making accessible websites.

There has been a trend toward accessibility in recent years. You can trace that back to some changes in the legal world.

In 2010, the Department of Justice announced plans to update the ADA.

The Act is best-known for making physical spaces more accessible. The DOJ decided the Act also needs to address technology.

They intended to update the ADA with rules about website accessibility.

Then, in 2016, the University of California, Berkeley, landed in hot water over its website. The DOJ ruled that the website didn’t accommodate all Americans.

The DOJ referenced the World Wide Web Consortium’s Web Content Accessibility Guidelines.

UC Berkeley was ordered to adopt the guidelines for their website. The guidelines are now considered the gold standard for web accessibility.

Adopting the guidelines to make websites more accessible has many benefits. Many designers have realized that the guidelines support good design.

Functionality is a key consideration of any website. The guidelines for accessibility can improve a website’s functioning.

In this scenario, everyone wins. Americans with disabilities get greater access to web content. All users get a better web experience.

In that case, why wouldn’t you design with the ADA in mind?

ADA Websites Meet Four Criteria

Following the World Wide Web Consortium guidelines, an ADA compliant website meets four criteria. It must meet standards in the following categories:

  • Perceivable
  • Operable
  • Understandable
  • Robust

When people think of accessibility, they usually think about perception.

A person with a visual impairment, for example, may not be able to read a screen the way another person can. An accessible website supports the use of screen readers to help those with low vision.

Video content has recently become much more popular.

This can pose a problem for those with hearing disabilities. The guidelines specify providing audio description for all prerecorded video.

What about the other three categories? What makes a website “understandable” in terms of accessibility?

An understandable website is one with content that is easily understood by a program. If the reading level is above Grade 10, then you should provide a simplified text.

Operable means the user can navigate the site with keyboard and not get stuck

The website should also be easy to navigate. Operability also considers physical reactions to content, such as seizures.

A robust website is one that’s compatible with as many devices as possible.

How to Make ADA Websites

Now you want to know how to make a website ADA compliant. It’s easier than it might sound at first.

Making a website more accessible makes it more useful for everyone in your audience.

Take the use of video as an example. The guidelines say accessible websites must supply described audio for all prerecorded video.

This is also useful for those members of your audience who are watching on their mobile devices with the sound off.

Focus on User-Friendly Content

The first step is to look at your content. This includes both your existing content and the content you plan to create in the future.

For blogs and white papers, you’ll want to consider the reading level. The guidelines state ADA compliant websites have content with a reading level that doesn’t exceed Grade 10 education.

A good rule of thumb is to aim a little lower. There are many tools you can use to determine the reading level.

Aiming for a reading level between Grade 6 and Grade 8 will help you meet the standards.

If the reading level is too high, provide a simplified text. Pronunciation guides are also helpful, especially if a word is context-dependent.

For video and audio content, you’ll want to provide captioning and descriptions. The guidelines state you should also include a sign language version.

Add Alt-Descriptions

Choosing the right images is also important for an ADA compliant website. High-resolution images with good contrast improve visibility.

Keep in mind that not everyone can see these images. Some users may only see part of the screen, while others may use a screen reader.

Alt-text descriptions and captions are key. They can be “read” by assistive devices. They describe the image to the user, much like described audio works for video.

Design Considerations for ADA Compliance

Some web designers are reluctant to adopt accessibility standards. They feel the guidelines limit their creativity.

That’s because fonts and colors are important for creating an accessible site.

Designers may want to stipulate that a page will use a particular font. That font may not be legible for someone with low vision or a screen reader.

That’s why it’s important to choose fonts that are easy to read. Fonts like Open Sans and Georgia are good choices.

You should also allow font substitution. Some users will increase font sizes by default. Others will have their devices switch to easy-to-read fonts.

The situation with color is similar. You should design with high contrast.

Putting black text on a white background is easy to read because of the high contrast. Yellow text on a pale yellow background isn’t nearly as legible.

Remember that your audience is accessing your site from many different devices.

The stricter the design, the higher the chance it won’t display properly. Different operating systems and screen sizes affect the way a website displays.

Flexible design improves accessibility for everyone, no matter what devices they’re using.

The Technical Side of ADA Compliant Sites

Now you need to look at the underlying code of your website. You may not think the code needs to meet accessibility standards, but it should.

Code informs how your website works when a user interacts with it.

You’ll want to think about how the website works when someone navigates on a keyboard. In fact, a user should be able to navigate your entire site via keyboard alone.

Think about features like scroll and slideshows. Can users slow them down or put them on pause? Autoplay and time-limits aren’t accessibility-friendly.

The W3 Consortium’s guidelines state all sites should use standard HTML code tags. This helps to fulfill the “robust” rule for a site.

HTML code is readable across the widest range of devices, making it the most accessible. You may also want to consider a simple HTML version of your site as a fallback for slow connections.

Finally, be sure to provide text-based versions of all documents, even PDFs.

Conduct an Evaluation

Before you make changes to your website, it’s a good idea to audit what you already have. There are many tools out there, like WAVE and Lighthouse.

Run the tool you select on your current website. This will let you know what you’re already doing right, and where you need to improve.

Once you have this report in hand, it’s easier to make a plan to move forward.

Stay on Top of Accessibility

One thing that the law and technology have in common is that they’re always changing.

New technologies develop in response to needs. Laws also change based on needs and in response to new technologies.

The best thing you can do is monitor both. New technologies may make it easier to incorporate accessibility into your website. Revised laws can create new compliance standards.

Even if you have an ADA compliant website, it’s a good idea to track your compliance. Updating will help you keep your website accessible and fresh for your audience.

Discover Your Audience

As you can see, ADA websites are both important and easier to create than you may have thought. Many of the accessibility standards are just good practice for creating great websites.

Creating a better website may be the first step in reaching more of your audience.

If you’re looking for new ways to get the word out, get in touch with the experts. Finding your audience is easier with the right strategy.