5 Design Tips for ADA Compliance

In the context of web design, the ADA (American Disabilities Act) exists to ensure the accessibility of websites for people with disabilities. But meeting and exceeding ADA compliance standards is about more than simply avoiding lawsuits, it's an opportunity to provide a positive user experience for everyone.

In the interest of keeping a fair and friendly internet for all, here are five tips that can help you proactively design with accessibility in mind.

Add Headers

A great way to create a website design that meets ADA compliance standards is to organize and break up large blocks of text with descriptive headers. Headers not only allow users to scan a page quickly for relevant keywords, but it also allows screen readers to read the structure of the site.

The following is a typical header structure:

<h1> Title </h1>
<h2>Section</h2>
<h3>Subheader</h3>
<h2>Section</h2>
<h3>Subheader</h3>
<h4>Sub-subheader</h4>

There are six levels of header (h1-h6), and there should only be one h1 or main title that describes what the entire page is about. The site can then be broken down into large sections with h2s, h2s can be broken down into h3s and so on. It's important to note that it can be confusing for screen readers to skip header levels (eg. dividing an h2 section with h5 sub-headers).

Color Contrast

When choosing a website color pallet, it is important to keep in mind the standard for color contrast between text and its background color. To meet the industry standard (AA compliance level) the ratio must be 4.5:1. This is a simple and important way to assure that your content is legible for people with visual impairments. A great tool to check your contrast levels is a contrast ratio calculator.

Form Field Labels

When designing a form, it may be tempting to simplify the form and use placeholder text in lieu of field labels or descriptions, but this practice can hurt the accessibility of the form. Placeholders have three accessibility shortcomings when used without labels or descriptions:

1. Placeholders typically have a low color contrast
2. When a user begins to type in the field, the placeholder disappears
3. Screen readers typically scan for labels and skip over placeholder text

Labels solve all three of these potential accessibility problems and create clear guidance that is worth including in every form.

Alternative Text for Images

When images, graphs, or icons are included on a website, it's important to provide image descriptions (alt tags) so even visual content can be translated into other forms (braille, speech, etc.). These descriptions should be limited to a short phrase, and if the image requires a more involved description (over 100 characters) it would be good practice to include a more involved description in the main content.

Descriptive Links

Descriptive links allow users to better understand what they are clicking on, and where a link might take them. Typically link descriptions like "click here" and "see more" don't have enough information and can be confusing to navigate. Adding website names or page descriptions can add clarity.

So instead of: "To learn more about ADA design tips click here."

You can use: "To learn more design tips you can visit ADA Compliant design tips."

Conclusion

ADA compliance may feel like a big undertaking, but even small details like the 5 tips above can make a big difference in website accessibility.

Happy designing!