What is ADA compliance?
ADA (short for the Americans with Disabilities Act) is a civil rights law that forbids any type of discrimination against people with disabilities.
ADA compliance means following the civil law that guarantees equal opportunity for disabled individuals in the public spheres of accommodation. In terms of the WEB, it states that all electronic and information technology must be accessible to people with disabilities.
Who should follow ADA requirements?
- Private organizations with 15+ employees
- Restrains and cafeterias
- Retail Stores
- State and local government organizations
- Places of business that are considered a place of public accommodation (e.g. doctor’s offices, theaters, movie theatres and concert halls)
- Organizations that work for the public’s benefit (e.g., public transportation, schools, hotels, banks, accountant offices, law offices, social service centers, gyms, healthcare providers, the United States Postal Service, etc.)
But, even if ADA compliance is not applicable to your organization, it is still worth applying ADA compliance recommendations, which positively affect website usability and can attract more customers.
World Wide Web Consortium (W3C) prepared a set of recommendations for making Web content more accessible, primarily for people with disabilities — but also for all user agents, which was later converted into the industry standard ISO/IEC 40500, also known as WCAG (Web Content Accessibility Guidelines).
The current version is WCAG2.1, but everybody already starts implementing a lot of useful recommendations from 2.2.
The WCAG 2.1 guidelines have a three-tiered grading system:
- Level A: Your website is only accessible to some users
- Level AA: Your website is accessible by almost all users
- Level AAA: Your website is accessible to all users
The Web content guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content.
- Perceivable.
A website’s visitors need to be able to access all elements, regardless of their disability.
Information and user interface components must be presentable to users in ways they can perceive. - Operable.
Every element of a website’s user interface and navigation needs to be operable.
This means that users must be able to operate the interface.
The interface cannot require interaction that a user cannot perform. - Understandable.
Website components need to be easily understood by all visitors.
This means that users must be able to understand the information as well as the operation of the user interface.
The content or operation cannot be beyond the user’s understanding. - Robust.
This means that users must be able to access the content and have the same user experience, no matter how the content is delivered, or user is using assistive technologies.
If any of these are not true, users with disabilities will not be able to use the Web.
Why website should be ADA compliant?
Becoming ADA compliant doesn’t mean only following some standards, it means making your website more accessible and usable for ALL people, which also positively affects the business growth.
However, if your website is not ADA compliant you are at risk of lawsuits, fines, potential public relations problems, and losing customers.
Penalties are often severe. Even a first infraction can cost $55,000-$75,000, and repeat infractions as much as $150,000.
- Plaintiff of the lawsuit gets a minimum of $4k
- Law firm gets all legal fees paid
- Plus a potential ADA fine of up to $75k
To that end, costs can skyrocket depending on annual turnover, and the government may revoke financial support for the federally funded.
At the moment, WCAG 2.1 is the best indication of web accessibility. WCAG 2.1 Level AA and higher compliance would be suggested as good accessibility and protect your business against the lawsuit.
How to make sure your website is ADA Compliant?
You can easily evaluate your website using the following steps, no special preparation is required.
Step1: There are a lot of free online website accessibility audit tools that exist.
Running automation online tools like AccessiBe, Accessi or UserWay, it is possible to identify your website compliance level with just a few clicks.
Step2: According to the Web Content Accessibility Guidelines (WCAG) 2.1 an online store has a series of pages that are used to select and purchase products. To evaluate the accessibility the following pages were visited using the OS – default narration software – the VoiceOver tool and keyboard navigation (without using a mouse!):
- Open home page
- Explore all home page elements from header to footer
- Select a category from navigation
- Navigate through the category page
- Select at least 2 filters from the layered navigation
- Sort the results by Price from low to high
- Change the view from grid to list or vice versa
- Navigate to the product page
- Try to find more info on the product and cycle through the images
- Change the quantity, and add the product to the cart
- Add product to compare
- Add product to wishlist
- Add several products to your cart
- Go to the cart page
- On a cart page, remove one of the products on a cart page
- Change the quantity of another product
- Click “Proceed to checkout”. Log in in the popup window
- Proceed to the checkout shipping step, enter test address data,
- Navigate through different shipping methods. Select one and then change to another one
- Proceed to the payment step. Try to select different payment methods
- Return to the shipping step. Edit shipping information and select another shipping option
- Proceed to the payment step. Navigate to the “Place Order” button
How to meet ADA compliance standards?
The Agency should apply all accessibility requirements during the development.
Simply, all development and design processes should follow the following rules:
- Text Accessibility
-
Color Contrast
- The color contrast of the web pages should be sufficient according to WCAG
- Maintain a contrast ratio of at least 4.5:1 for text and images of text.
Text Heading
- the text content should be structured using proper heading tags
- keep text heading in sequential order, and don’t skip order levels, H1, H2, H3…
Text size and alignment
- Allow users to resize site text (without any assistive technology) up to 200%. The resize must not cause
a loss of content or site functionality. - Text should have consistent spacing between words and letters to make it easy to read.
- The minimum font size for body text is the equivalent of 16 px.
- Text alignment is not justified.
Links
- Links should be identifiable by customer
- Text links are either underlined or have another visual differentiator from the regular text
- All hyperlinks should have a descriptive anchor text
- Digital Assets
-
Image alt
- All media files should have an “alt” tag
- Alt tag should have a reasonable description
Video
- Video shouldn’t start automatically
- All videos should have subtitles, transcripts and audio description, provide captions.
Audio
- All audio files on your website should have a written caption.
- You can also add a link near the content that directs users to your audio description
Slideshows
- Slideshows shouldn’t play automatically
- A customer should have a possibility to control slideshow flow, stop, next, etc.
- HTM Compiling
-
HTML
- All fonts should be accessible in terms of size, weight, styling.
Forms
- All online forms should have descriptive html tags
- Form element styling should meet general accessibility requirements in terms of size, color, contrast,
alignment.
Tables
- All HTML tables should be populated with column headers, row identifiers and cell information
- Table element styling should meet general accessibility requirements in terms of size, color, contrast,
alignment.
Labeling
- Use headings or labels to describe the topic or purpose of content.
- You should also label all site elements, like a pricing table or contact form
- Navigation
-
Keyboard support
- The website should be accessible with keyboard navigation
- Anyone accessing your site with a keyboard should have the ability to see the keyboard focus indicator
Navigation Options
- Offer users more than one option for locating a page on your site unless that page is the search result
or step in an online checkout. - Provide a consistent navigation location and organization for users. Your navigation menu, for instance,
should always appear in the same spot and with the same menu items.
Buttons
- Pages on your website have “skip navigation” links or “move on top”
- Call to action buttons on your website should have an accessible name and label
- Content
- Downloadable content files should be accessible and easy to download
- The website should have an accessibility policy page
- Have easily locatable contact information to allow users to request accessibility information
- Avoid using images that feature mostly text to convey your content unless users can customize the image
or the image is essential.
Achieving ADA compliance is important for business stability and growth.
Sometimes merchants or an agency need expert help to achieve specific goals.
If you want to website ADA compliant, the Decima Digital team can help achieve this goal.
We can do:
- ADA Compliance Assessment
- Estimation and Quotation efforts need to meet ADA compliance
- Solution Implementation to meet ADA compliance (Magento, Shopify, WooCommerse)
- Quarterly website validation to make sure the website is still ADA compliant
- ADA Compliance badge
- Work with Agencies to help them support their merchants (whitelabel)
Useful resources
WCAG 2 Standards and Documentation:
- WCAG 2 standards
- Web Content Accessibility Guidelines (WCAG) 2.1
- Interactive Accessibility
- Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
Online tools
- Web Accessibility Evaluation Tools List
- WCAG-EM Report Tool
- Accessi
- Web Accessibility Scanner, Monitor & Checker
- Wave WebAim
- Accessibility checker
- Accessibility tools for development lifecycle
- Color Contrast for WCAG Compliance
