Brick-and-mortar businesses have been responsible for complying with the ADA for almost 30 years. And now, with nearly everything we do involving some level of internet access, ADA web compliance is finally catching up to everyone with a website.
What is ADA Compliance?
In the United States, 22% of adults live with a disability, which is a significant portion of our population. The Americans with Disabilities Act (ADA) is a civil rights law that was created to protect people with disabilities from discrimination. It’s the reason why we have physical accommodations like disabled parking requirements and wheelchair ramps.
Why is ADA Compliance Important for Websites?
The ADA says that places open to the public are legally responsible for removing any barriers that could possibly affect a disabled person’s ability to engage with a company’s products or services. Even though the ADA took effect in 1990 — aka before most of us even knew what the internet was — today it’s become topical when it comes to website accessibility.
This is because many people with disabilities use assistive devices, like text readers and audio scanners, to translate and/or communicate information from a website. So, even though they may not be able to directly engage with certain website features, they have a right to utilize tools to understand what is being presented.
ADA compliance has become a hot topic as of late, which is why you’re hearing about it more frequently. In 2017, a blind man in Florida filed a lawsuit against Winn-Dixie because of their inaccessible website, which was found to be in violation of the ADA. The man also filed similar claims against 70 other companies. Bottom line: ADA compliance is a big deal.
ADA Requirements for Websites
FYI: The only legal expertise I possess is what I’ve learned from watching “Legally Blonde” a dozen times. In other words, I’m not a lawyer and nothing here is legal advice.
Fortunately, there are detailed guidelines in place to make sure your website complies with the ADA.
The World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines include standards to help make websites accessible to everyone, including users with disabilities. Many of the accessibility guidelines are in line with web design best practices but some will require a bit of technical expertise.
Below, we’ve put together a brief list of some of the most important guidelines that everyone should follow for ADA web compliance.
Images
Images on your website must be assigned alternative text (alt text), also known as an alt attribute. Alt text is the message that appears when an image is unable to load and it’s also used to help assistive devices understand what is being presented.
Every image on your website should have alt text that clearly describes the image. If you have an image of a puppy on a skateboard, something like “photo1.jpg” is not good alt text. Instead, it should be something like “puppy on skateboard.”
In a worst-case scenario, it’s better to include an empty alt text (alt=“”) than to not have one at all. If there’s no attribute, most screen readers will read the full image URL or the URL where the image links to. This can be more frustrating for the user than having an empty attribute that is read as “image.”
Design & Colors
A neon green background with cyan blue text might have been a good idea for your 2001 LiveJournal blog but modern times call for much sleeker designs.
Contrasting colors (like a white background and black text) are integral for users to discern buttons and links from text. This is one of the reasons why many call to action (CTA) buttons are a different color than a brand’s main theme. This isn’t just important for those with impairments; it attracts attention from all types of visitors.
Video & Moving Images
Including videos on your website is an awesome way to engage visitors and get them to stay on a certain page longer. For those with visual and audio impairments, the sound needs to be crystal clear and captions or transcripts must be provided.
If you have moving areas on your website, like a carousel or sliding banner, you need to give your visitors the option to pause. Some users might need more time to view the images or to read any text that is presented.
You should also consider the impact of your videos and moving images. Is there an excessive amount of flashes or incredibly bright colors? These features can be triggers for many conditions, such as epilepsy. To be safe, the WCAG says that webpages shouldn’t contain anything that flashes more than three times in one second.
Code
Since the code behind your website is its foundation, you should have ADA compliance top-of-mind from the moment you decide to create or redo your website. The code is one of the technical areas we mentioned, so it’s always best to consult with an expert web developer.
WCAG says, “content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”
There are two ways to make sure your code is robustly accessible:
1. You’re using the semantically correct HTML elements
2. The page flow from top to bottom is in a logical order with elements in the right hierarchy
You can test this by disabling the CSS (a plain text file format used for formatting website content) on your website. If you’re able to read the page from top to bottom and it makes sense, then you’re all set!
Another way that your code can achieve this is through website responsiveness. The content on your website needs to be adaptable and presented in various ways without losing information or structure. For example, a website with a responsive design is compatible with desktops, laptops, mobile devices and assistive devices. Your website should also function consistently no matter which browser someone uses or the zoom level they prefer.
Labeling
Converting website visitors is impossible without the proper labels. Make sure your website has the necessary instructions listed wherever user input is required (check out page, contact form, etc.) so that all visitors know how to interpret their function.
Your pages and each section should also be labeled. Since many assistive devices are reading through your H1s, H2s and page titles, you need to be clear and descriptive. This is also imperative for SEO, so no excuses!
Functionality
In order for your content to be ADA compliant, your website visitors should be able to navigate your entire site without the use of a mouse. The best way to test this is to try and browse your site using only your keyboard. Using the tab key to navigate through a webpage will reveal its content flow, making any errors easy to see. Keyboard navigation is a good way to mimic how many assistive devices interpret a webpage. This is another area where labeling is important since the HTML is the only thing telling assistive devices what the page content is.
Post-Launch Compliance
After your website has implemented ADA guidelines, you’ll need to stay up to date on any new compliance requirements that are announced in the future.
These are only a few of the guidelines for ADA web compliance. Check out the Web Content Accessibility Guidelines to see the complete quick reference list or contact our web team to chat about the process.
