In 1990 the Americans with Disabilities Act was passed which requires all websites to be compliant with their guidelines. It’s a set of rules put in place that will help those with disabilities access and navigate your website.
It’s complicated making a website ADA compliant since there is a large amount of grey area. It’s required that your website makes accommodations for those with disabilities however, exactly what that is can be up for debate and each ADA lawsuit can be different. The rule of thumb though is that if you follow all the guidelines listed out here https://www.w3.org/WAI/tutorials/menus/ you should be good.
Wherever Possible Start ADA Compliancy From The Beginning
Hiring an ADA expert from the beginning when you start your website is the easiest way to make a website compliant. The reason being is that many websites require a restructure to their code which can require an entire overhaul.
In addition, a website that is ADA compliant requires specific color standards which means your logo is a requirement as well. If this isn’t taken into consideration from the beginning and your logo isn’t compliant that could require an entire rebrand.
What Are The Main Points To Ensuring Your Website Is ADA Compliant
- Page Structure – Basically, your website needs to follow normal website layout guidelines. There should be a header, footer, and the main content. Sidebars should be to the left and the right if you have them. In addition, they should be aria labeled correctly with nav and article tags used accordingly. H tags should make sense with H1 tags being the most important and so on.
- Menus – Your navigation menus should use a nav tag as the parent followed by a list tag and so on. Active states and hover states should be obvious making it easy for those who navigate with keyboards able to navigate them. Finally, mobile responsive menus should have the correct aria labels attached with the buttons labeled here https://www.w3.org/WAI/tutorials/menus/flyout/
- Images – w3 describes that there are several types of images including informative, decorative, functional, complex, and much more. Each have their own rules however the basis of each is that a person with disabilities who may not be able to see the image should still be able to tell what it is. This can be done with alt attributes.
- Tables – As with images there are many different types outlined in w3. They all stem around the number of headers and should use the standard layout. Use a <th> tag for headers and a <td> tag for others is the basic rule of thumb for most though.
- Forms – This is the most strict part of ensuring that your website is ADA compliant since it requires a specific code structure. All inputs need to have an attached <label> tag, appropriate title tag and need to have well outlined instructions on what they require. Failures on form validation needs to be clearly outlined and visible to the user.
- Carousels – A carousel is just a slideshow of images or information. Again, there are a lot of rules around the structure of this. Essentially it follows the model that someone with a keyboard can use it.
For more information on ADA Compliance we have a comprehensive blog outlined below. We are also available to do an ADA Compliance evaluation or to help your company become ADA Compliant.