ADA Compliance

The American Disabilities Act dictates how websites should function to cater to those with disabilities. This is especially true for organizations that are part of the government or get funding from the government. While there is no 100% guarantee that you will be able to cater to every disability someone may have, there are guidelines set in place that you can reference to ensure your website abides by the ADA standards and mitigate your risk of getting sued for lack of compliance with the regulations.

WCAG

The web content accessibility guidelines are largely what you will use to ensure your website abides by standards set forth by the ADA. It is not enough to ensure your site’s code abides by the standard, you will also need to manually audit your website to ensure screen readers and keyboard navigation are sufficient to navigate your website.

Color Contrast

Your font should be easily read based on its color and whatever background color it has. In fact, there is an objective standard that will tell you if your font color and background color are considered accessible pre the WCAG standards. https://webaim.org/resources/contrastchecker/ is a great resource for ensuring your color contrast is compliant.

Alt Text

Every image has what is called an alt text. This will appear if the image does not load, and it it also read by screen readers to describe what is happening in the image. Ensure all your images have an alt text that allow the user to understand the purpose and flow of your web page.

Keyboard Navigation

Press the tab key while you are visiting a website. What do you notice? You should see a lightly colored box shifting from link to link. This is keyboard navigation and you need to ensure your website is easily navigated by utilizing your keyboard only. Note: You should NEVER see the highlighted box disappear when tabbing through the page. All links should be part of the tab navigation and you should be able to interact with elements such as dropdown menus and drawer menus to fully navigate the site and its content.

Voiceover

This is your screen reader test. If you are using a Mac, press Command F5. Windows, press logo key + Ctrl + Enter. You may need to continue to learn a bit on how to go about navigating utilizing voiceover. Once you have this figured out, however, you can utilize your operating system’s built in screen reader to test how your site sounds to a user utilizing voiceover. If the site reads well and is understandable, you know your website is accessible for voiceover. If it sounds strange, reading aloud items such as, “menu item. menu item. menu item.” you may need to get these areas ironed out for ADA compliance.

And much more…

This is only the tip of the iceberg. There are many tools that allow you to evaluate your website in terms of accessibility and compliance with WCAG. Google Lighthouse, WAVE, voiceover, keyboard navigation… if you can get these tools displaying positive scores and feedback for accessibility, you should be in a good place for considering your website accessible to those with disabilities.

WARNING:

Many websites offer solutions to ADA Compliance via accessibility plugins. You’ll notice a circular stick figure icon in the bottom right of the website. These widgets are a bandaid solution to accessibility. They can disrupt screen readers and not necessarily provide a legitimate help to people utilizing actual screen readers, keyboard navigation, etc. While the widget may provide some “protection”, it should not be used a long term solution. A more permanent solution should be to convert your website to abide by the WCAG guidelines.