Understanding ADA Compliance Standards: WCAG & Website Requirements

Whether you run a successful eCommerce website, or own multiple digital properties for different purposes, having an ADA compliant accessible website is a high priority. Business owners may overlook the fact that people with extra needs or limitations use the internet every day. Having a website that can be accessed by the tools people with limited sight, hearing, or mental abilities use is an important step to take towards ADA compliance.

The Americans with Disabilities Act (ADA) “website compliance standards” are something people reference often in this context, but that isn’t quite right. Making anything in a “public space” widely accessible to people with disabilities is important, and what the ADA mandate covers. However, the relevant standards for websites are known as Web Content Accessibility Guidelines , or WCAG.

These provide clear and specific web content accessibility guidelines for how you must set up and maintain your website. If you have never updated your website to be WCAG compliant, you need to know what you are responsible for, then how to implement essential accessibility changes.

Smart Solutions can help. As leaders in eCommerce website development and management, we partner with accessibility experts, Accessible360 to provide fully automated website compliance solutions, ensuring that all of our clients’ websites meet ADA compliance standards for accessibility. Contact us to learn more .

The core of WCAG standards remain the same, but multiple updates have occurred since the original guidelines. In light of new technology and innovation, these guidelines continue to evolve. Here’s everything you need to know about WCAG website compliance standards in 2021.

Website Compliance: WCAG 2.1 to 2.2 The first thing that’s helpful to know is that websites are currently guided by WCAG 2.1, but WCAG 2.2 is already drafted and expected to be fully adopted very soon. Overarchingly, these guidelines impact the following:

The accessibility of website content on any device, including desktops, laptops, mobile devices, and tablets. How accessible website content makes it possible for more people to use websites, including those with learning disabilities, blindness or low vision, limited movement, speech disabilities, and deafness or hearing loss. As we hinted above, the WCAG compliance standards are only additive, meaning previous versions aren’t amended or revoked, merely enhanced with each new set of web accessibility protocols.

Sign up for our FREE webinar to learn more about website compliance New Website Accessibility Standards Here’s what’s new in WCAG 2.2, that may impact website accessibility in 2021 and into 2022:

Standards still specifically aim to make website content more accessible for three major groups of people:

People with cognitive or learning disabilities People with low vision People with disabilities who are using mobile devices WCAG 2.1 vs. WCAG 2.2 level AA changes include:

New success criteria along with definitions which cover the following:

Accessible Authentication

Authentication is an important way to protect a website from fraud. But when authentication measures don’t offer alternative options to people with disabilities, your website may fall out of accessibility compliance.

Here’s a good check and balance for this criteria: if authentication tests rely on a cognitive function test, there must be an alternative available that does not rely on the user completing that test.

For example: people with cognitive limitations need to be able to use password managers instead of being required to memorize passwords, or have the ability to copy and paste.

Dragging Movements

Dragging movements are a fun component of graphical user interfaces. “Drag and drop” or grabbing features may invite engagement, but they also might be a problem for digital accessibility.

The WCAG standard goes like this: functionality that uses technology such as dragging movements to operate features of a website must have single pointer use alternatives. In other words, you can use dragging movements, but you need to have easy-to-find alternative options for people who can’t use them.

Note: this requirement won’t apply to website content that is able to interpret pointer actions, or which require a user to use assistive technology.

Consistent Help

This standard is pretty straightforward: every website page or set of website pages on a site should have consistent ways to find help, offered in various forms to meet people with different needs.

For example: sites should have details and mechanisms for contacting a human, a self-help option, and fully automated contact mechanisms.

Page Break Navigation

As people go through your website, they’ll jump from page to page. The digital trail is often hard to reverse even for people without disabilities. To ensure that people who do have disabilities can easily get where they need to go, you need to make page break navigators or locators.

Page break locators should be available to indicate to people how to use a web page, and these should be easily navigable through a mechanism of some kind. This is vague but essentially addresses the fact that, for people with low vision, for example, a screen reader will be in play. However you indicate page breaks and navigation between pages, it should be accessible and easy for any kind of assistive device or tool to pick up in order to be compliant.

Focus Appearance (Minimum)

Focus indicators are simply the way you visually separate out components on your site. For instance, these visual markers may have a drop shadow when you hover over a box, change color when you tap into the field, or otherwise indicate a point of focus. Buttons, form fields, links, and any other focusable element you want a user to interact with should also be accessible to people using screen readers, who have low vision, or who have any other disability.

This new success criteria has to do with the components of the digital user interface that receive keyboard focus. UI components like that must meet these four criteria:

Contrasting area, with a contrast ratio of at least 3:1 for focused and unfocused states. Minimum areas for contrasting area, at least as large as 1 CSS pixel in outline and 4 CSS pixel in shape. Adjacent contrast, where the contrast ratio is at least 3:1 against adjacent colors in a component of focus, or has a contrast of at least 2 CSS pixels. Not fully obscured, which means that an item in focus is not completely hidden by content. Focus Appearance (Enhanced)

A second set of criteria apply not just to areas of focus but those that become enhanced when you engage with them, or when they are in “keyboard focus.” This success criteria also applies to user interface components in keyboard focus, and all of the following must be true:

Contrasting area of the focus indicator has a contrast ratio of at least 4.5:1 between colors. Minimum area of the contrasting area is at least double the area. Not obscured, meaning that no part of the focus indicator is completely hidden by content. Visible Controls

We’ve all gone to a website or landing page before and been frustrated if there was no navigation, no easy-to-find footer or bar, and really no way to understand where to go or what to do next. That frustration is felt tenfold by people with disabilities. That's the point of having accessible visible controls. In WCAG terms: upon pointer hover, or in response to a keyboard focus, user interface components should be visible, with a few exceptions.

Note: exceptions include multi-step processes, when a user has enabled an enhanced experience, if a mechanism is available to make the info visible, or if hiding the information is essential.

Target Size (Minimum)

A target on your website may be a touch target, clickable button, or any other point of interaction. These should be visible, big enough, and obvious enough for ADA compliance on your site.

The size of the target for pointer inputs should have an area that is at least 44 x 44 CSS pixels .

There are three possible exceptions, including during target offset spacing, when the target is inline a block of text, or if it is essential to have a particular target presentation.

Redundant Entry

Redundant entry simply means that online users shouldn’t be required to repeatedly enter the same information on your website over and over again. Requiring them to do so limits interaction and unfairly disadvantages people with disabilities.

Here’s the accessible ADA compliance standard to meet: re-entering information during the same process and user session should be auto-populated or available for the online user to select.

There are three exceptions, including when re-entering info is essential, if previously entered info isn’t valid any longer, or if the re-entering is necessary for security.

2021: Which WCAG Changes Do You Have to Make? Because of the way WCAG works, any website that conforms to the new updates in WCAG 2.2 will also conform to all previous versions (WCAG 2.0, 2.1, etc.). Updating websites for WCAG 2.2 won’t mean any loss of prior compliance. It is important that following any version of protocol for website accessibility is done with precision.

Help for eCommerce Website Accessibility Compliance: Smart Solutions At Smart Solutions, we support eCommerce owners, and recognize that website changes, like eCommerce accessibility compliance, can require significant technical know-how. Keep in mind that the cost of not having an ADA compliant website isn’t just a preference, it could become a serious legal matter. Court cases levied against major players in numerous industries regarding web accessibility make the headlines every month.

ADA website compliance, or more accurately WCAG website compliance, has a dual-fold impact: not only are you in legal compliance and less vulnerable to lawsuits, but your eCommerce website is also accessible to more people with buying power. Making your eCommerce website ADA compliant and accessible to people with disabilities is both the right thing to do and the profitable thing to do. If you need direction and help to make your website accessible and compliant, the team at Smart Solutions has got you covered. Reach out to get started .

Learn How the ADA is Applied to Websites and WCAG Compliance

Related Articles