Brick-and-mortar businesses have been responsible for complying with the Americans with Disabilities Act (ADA) for almost 30 years. And now, with nearly everything we do involving some level of internet access, the ADA is developing and refining new standards for web accessibility.
What is ADA Compliance?
In the United States, 22% of adults live with a disability. The ADA is a civil rights law created to protect people with disabilities from discrimination. It’s the reason why we have physical accommodations like accessible parking requirements and wheelchair ramps.
How does ADA Compliance Relate to 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 — before most of us even knew what the internet was — 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. 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 website compliance has become a popular topic, with many violations making headlines. 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.
How Can I Reduce ADA Compliance Risks On My Website?
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.
The World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines are a set of recommendations and technical standards for making web content accessible to everyone, including people with disabilities. The WCAG is a widely accepted industry standard for website accessibility. Conforming to WCAG 2.2 Level AA is generally considered a baseline for ADA compliance.
Many of the WCAG’s standards are in line with best practices for web design and development 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 WCAG conformance.
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 decipher what is being presented.
Every image on your website should have alt text that clearly describes what is depicted. If you have an image of a puppy on a skateboard, something like “photo1.jpg” is not a strong option for alt text. Instead, include a description 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 more readable designs.
Contrasting colors (like a white background and black text) are important 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 and animated elements on your website is an awesome way to engage visitors and get them to spend more time on a page. For those with visual and auditory impairments, the sound needs to be crystal clear and captions or transcripts must be provided.
If you have animated 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 animation. Is there an excessive amount of flash or 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, accessibility should be top-of-mind from the moment you start to create or redesign your website. 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:
- You’re using the semantically correct HTML elements.
- 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 (the code that controls the visual presentation of content such as colors, fonts, and layout) 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 (checkout 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 WCAG compliant, your website visitors should be able to navigate your entire site without the use of a mouse or trackpad. 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 HTML is the only thing telling assistive devices what the page content is.
Focus Appearance
It is crucial that the focused component (or selected element) is visually distinct from the background, especially for users relying on a keyboard to navigate around. Utilizing borders or background color changes can help ensure that certain portions of the screen stand out appropriately.
Dragging Movements
Provide an alternative way to perform dragging operations besides using a computer mouse. Users should have access to keyboard controls, navigation menus, and touch gestures to help them smoothly navigate any content.
Target Size
Ensure interactive components have a minimum target size of 44×44 CSS pixels. Unlike device pixels, which vary based on the screen’s properties, CSS pixels provide a consistent measurement across different devices and resolutions. This minimum target size ensures that interfaces are accessible to users with limited dexterity or vision impairments.
Consistent Help
Present helpful information in a consistent location and manner across the website. Users should be able to clearly identify their navigation options without having to excessively search.
Accessible Authentication
Provide an alternative authentication mechanism that does not rely solely on cognitive functions like memorization. Fingerprint, voice, and facial recognition have become popular over the years to allow for seamless security and protection.
Redundant Entry
Input data should be reusable to avoid redundant entries — except for when it comes to sensitive information, such as passwords or financial information. There’s relatively no risk involved with storing information like user preferences, contact information, or historical records. Ditch the time limit on password input, and provide options such as keyboard accessibility and assistive technology.
Post-Launch Compliance
After your website has implemented WCAG guidelines, you’ll need to stay up to date on any new conformance requirements that are added in the future.
These are only a few of the guidelines for WCAG conformance. Check out the Web Content Accessibility Guidelines to see the complete quick reference list or contact our web team to chat about the process.
