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”.

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.