The Admin Bar

ADA Compliance | Basics

Nov 20, 2020

By: Matthew Sebert

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

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.

Matt Sebert

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.

More from The Bulletin Board

Quick Tip

Scrolling Image Effect with GenerateBlocks

The full-length screenshots of websites we’ve created are great — but having a giant, skinny image on a page is...
Kyle Van Deusen
Nov 26, 2021
General

How Much Does A Copywriter Cost?

Learn how much you should expect to pay for written content from a freelance copywriter or a copywriting agency.
Abby Wood
Nov 03, 2021
Quick Tip

Easily Grab Photos from Word Docs

This is a trick I find myself using pretty often when clients send me copy in a Word doc that...
Matthew Sebert
Nov 01, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu