ADA Compliance | Basics

ADA Compliance is a loaded topic. There’s a lot that can go into making sure a website is accessible and as of writing this there’s no “real” documentation out there that states “This is what you need to do to be compliant”.

Matthew Sebert

Published:

Filed Under:

Processes

ADA Compliance and Web Accessibility
This content contains affiliate links. View our affiliate disclaimer.

ADA Compliance is a loaded topic.

There's a lot that can go into making sure a website is accessible and as of writing this there's no “real” documentation out there that states “This is what you need to do to be compliant”.

For me, I try to aim for AA compliance (mid-level) with my client's websites which I feel for the time being is pretty safe (but I'm not a lawyer!). I do have a clause in my contract that states what I'll be doing and that it's not bulletproof, but should give them reasonable protection. Protection is great, and most certainly needed, but for me it's more a matter of ensuring that the websites I build are accessible to those who have disabilities – to create pages that can be used by everyone. The following are important aspects of ADA Compliance, but this is in no way everything that should/can be implemented, but it's a great start!

So, What Basics Should Your Site Include?

BUTTONS:

Buttons should include an aria-label describing where it will bring the user if the text doesn't relay this well. This includes buttons like “read more” and “learn more”.
Read more on this HERE. If you're using Elementor, you can easily add these under Button > Advanced > Attributes.

FONT SIZE AND FAMILY:

Use REMs rather than Pixels for font size. This allows users to scale the text on your website in a much cleaner way. There's a PX to REM calculator that can be found HERE.

HTML5 SEMANTIC ELEMENTS & SECTIONS:

Ensure the sections and elements of your website are named appropriately. (<header>, <footer>, <article>, <aside>, <nav>, <main>, and <section> in place of <div>) . Further reading on this can be found HERE.

4.5:1 CONTRAST RATIO:

This one can be super annoying depending on your clients brand colors, however there's a fairly decent tool to check your site's contrast HERE.

SKIP LINKS:

Use skip links within the main navigation to allow users to skip directly to the content rather than having to TAB through the main navigation each time they land on a new page. Imagine how annoying it must be to be forced to listen to a website's main navigation via a screen reader every time you move to a new page!

OTHER THINGS TO REMEMBER:

  • Use Alt tags
  • Use proper color contrast
  • If you use videos with sound, ensure that they can be muted by the user.
  • Videos & Audio should have captioning – otherwise post a transcript of what's said in the video somewhere for someone to read.
  • Videos with no audio should have a descriptive track if possible.
  • Do not use auto-playing media, especially if it has audio.
  • Forms should be able to handle TAB ordering.
  • If using abbreviations use the <abbr> tag in your HTML.
  • TABs should show Visible Outline Focus.

Overall, yes, doing these things can potentially help protect your clients from a lawsuit, but personally, I think that making sure you're doing these things is important because helps create a more accessible internet for everyone, and THAT is what we're trying to do, right?


Oh, and before you head out, some people had asked what my contract states about this.

In the introductory section of my proposal I'll mention ADA Compliance up front if the potential client is an organization that would most likely see this as important. Doing this actually works as a sales tool as I've heard many clients come back to let me know that I was the only quote they received with this mentioned and that “yes! This IS important to us!”. I'll usually say something along the lines of:

“As this website is to be developed in association with the general public and has a strong focus on ensuring its users are helped to the best of your abilities, the ADA Compliance (Americans with Disabilities Act) may be of great importance to you. Further information on this topic can be found within this proposal”

As for the fine print, I'll state what the ADA is, how it works, what and who it's important for and that there are currently no clear ADA regulations that spell out exactly what compliant web content is, but will aim to develop their website to contain many of the standard accessible traits – then I'll list out what will be implemented along with a brief description so they know why it's important. I'm not a lawyer, so before implementing any new copy in your contracts or proposals, I would recommend running it past your lawyer to be sure you're covered.

Share this article!

Matthew Sebert

The Admin Bar

Matt is the co-host of The Admin Bar, and the owner of Matthew Sebert Design located in the beautiful small town of Keene, New Hampshire.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

September 16th, 2022

Kevin Powell Talks WordPress!

What we can learn from a master front end developer

August 19th, 2022

Optimizing Live with Perfmatters

Get a behind-the-scenes look at how Brian uses Perfmatters on live websites!

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)

More Articles

Login Credentials Blog Post

How to Share Login Credentials with Your Clients

You have probably heard about the importance of password management, but did you know that you can easily help your clients protect their passwords as well?

A computer taking money from a human

Step-By-Step Web Design Sales Process (with email templates)

The objective of this process is to qualify a new lead and take them from opportunity to paid discovery, to open project.

A crash test dummy sitting at a computer with his hands on the keyboard

Free Website Testing Tools for Web Developers

A collection of tools to help you test your website projects and find ways to improve your build quality.