Did you know that there are millions of people who may not be able to view or access your website?
We often forget those who may have a certain disability that hinders their ability to view and access websites. That is where ADA compliance in websites plays a very important role.
In this blog, we will discuss how to make your website ADA-compliant.
Before we jump into the how to make your website ADA, let’s start with the basics:
What is the ADA?
In 1990, the United States government passed a law to ensure the protection of individuals with disabilities. The ADA, also known as the Americans with Disabilities Act, is a law that prohibits discrimination against individuals with disabilities in all areas of public life, such as stores, jobs, schools, etc.
Since the internet is associated with many areas of public life, business owners and web developers have to make sure everyone can use their websites. Unfortunately, if a site does not meet the ADA standards, then the owner of the website can potentially receive lawsuits.
That was the case for a Winn-Dixie, a supermarket chain based in Florida.
In 2017, a blind man living in Florida, filed a lawsuit against Winn-Dixie, alleging that the supermarket’s website violated the ADA.
The court determined that Winn-Dixie’s website was inaccessible to the visually impaired, who need to use a screen reader software. The court concluded that Winn-Dixie violated the ADA because their website denied full and equal enjoyment of the website’s content to the blind vs what was being offered to its sighted customers.
As a result, Winn-Dixie set aside $250,000 to update their site to meet ADA standards.
Why worry about making your website ADA Compliant?
Aside from the obvious (no one would want a lawsuit against them), making sure our websites are ADA-compliant is worth doing.
Think about it.
In the United States alone, more than 3.4 million people, aged 40 and older, are either legally blind or are visually impaired.
That means that if our sites are not in compliance with the ADA, we can potentially miss out on reaching out to millions of people, not just in the United States, but in the world!
From a business standpoint, this can mean a boost in the company’s economy.
How to make your website ADA Compliant?
There has to be a set of rules or guidelines that determines what is compliant and what isn’t.
Good news, there is!
The World Wide Web Consortium, the primary international standards for the World Wide Web, has compiled a set of guidelines called the Web Content Accessibility Guidelines, WCAG for short.
ADA compliance is a simple as following all of the 60+ guidelines listed in the WCAG.
It sounds intimidating, doesn’t it? Don’t worry, many items listed in the WCAG are likely already met by your website. And to make this blog brief, I will not be writing about all 60+ guidelines. Instead, I will be sharing tips that you can use to ensure that your site is compliant with the ADA.
ADA-Compliance Tip # 1: Use alt-text for your images.
When adding images to your website, make sure each image includes an alternative text/description.
An alt-text is a written copy that appears in place of an image, in case the image fails to load.
Remember, when creating an alt-text for the image, make sure your text is brief, yet descriptive, and describes the function of the image (is it a link? etc.). This text helps screen reading tools describe images to users who are visually impaired.
ADA-Compliance Tip # 2: Make your content readable.
Make sure the content of your site is readable!
Well, duh! Obviously!
As obvious as this tip is, readability in your website is very important.
That said, make sure you use fonts that are easy to read.
Who can understand a paragraph of text that is in cursive? Not many people can.
So, make sure you are using fonts such as Open Sans, Verdana, Roboto, and Quicksand, just to name a few.
Also, color usage has a significant effect on readability.
Avoid using light backgrounds with light fonts, or dark backgrounds with dark fonts. A good rule of thumb to follow is to use bright background colors with dark font colors, or dark backgrounds with light font colors.
ADA-Compliance Tip # 3: Optimize Images
Sometimes, we use flashing icons or images to grab the attention of the user.
Unfortunately, one can go over-board with the flashing effect.
Too many flashes per second can inadvertently induce a seizure in someone who is browsing the web. The WCAG recommends that any graphic on the site should not flash more than three times per second.
Don’t go over-board with the flashing effect.
ADA-Compliance Tip # 4: Make it operable via keyboard.
Make sure all of the user interface components and navigation of your site is operable with a keyboard.
Remember that not everyone can interact with a touch screen or grip a mouse. Therefore, make sure your website can be navigated using only the keyboard; make all of your site’s functionality available from a keyboard.
How can you test if your website can function with a keyboard?
Go to your website and press the Tab key on your computer. You should be able to navigate from top to bottom of your webpage. By pressing the tab key, you should be able to navigate to each link.
See if you can go backwards. Once you get to the bottom of the page, press shift+tab, and see if you can navigate back up to the top.
So what if your website failed the keyboard test?
You have to make sure that your code is following proper sematic HTML markup. HTML is keyboard-only ready, so as long as you stick with the standard HTML markup, you will be fine.
ADA-Compliance Tip # 5: Make your content understandable.
Your website should be understandable, which applies to the word usage of your content and the structural design of your website.
When considering the content of your website, make sure that the word usage is understandable. The information presented on your website has to be precise. Avoid using words that are not common.
Also, make sure your site’s features are logical.
What does this mean? Make sure the features in your site are easy to understand.
For example, if you are using a form, make sure it is clear what the user has to do if they want to exit the form, submit the form, etc.
Doing this will eliminate any confusion for the user.
ADA-Compliance Tip # 6: Make sure your code is robust.
Your website has to be robust, meaning that the code for your website has to be readable.
To do this, make sure the code of your site uses standard HTML.
If you are using website platforms such as WordPress, you have nothing to worry about! Most website platforms operate using this coding standard.
ADA-Compliance Tip # 7: Make use of assistive technology.
Make sure your website can be accessed using assistive technology.
Users who are visually impaired have to use assistive technologies such as screen-reading softwares to help them browse the web. Some of these technologies cannot update the web browsers because they may not yet support the newer versions of the web browsers.
Therefore, many people who are visually impaired, are likely using older browsers that may not have access to the more modern features that your website possesses.
The obvious solution is to avoid using non-text elements, but if you cannot, simply provide an alternative to that element.
For example, if you have a flash player, you can provide an HTML player as an alternate.
There are 7 things that we can do to make our websites ADA compliant.
- Alt-text for your images
- Avoid overly flashing images
- Compatible with assistive technologies
Creating and updating a website for ADA-compliance can take quite a bit of time, but it is worth it.
Your website will be accessible to millions of people with disabilities.
Use this checklist to help you examine your website.
And if you have WordPress, you can use plugins to help make your site more accessible. For everyone using the Divi theme, the Divi Accessibility plugin is an excellent option!
Know of any other useful tips? Comment below and share your insights!