6 Easy Steps to Fix Most Common Ecommerce Digital Accessibility Compliance Bugs
https://youtube.com/watch?v=R1g4YDXSeUo
Check out our video for this blog!
The pandemic taught us a lot of things about ourselves. What we value culturally, how we function as a society, and the value of toilet paper!
Whether you were throwing bows in aisle 86D at your neighborhood’s Wal-Mart Super Center…
…Or hitting Refresh every six seconds to see if Quilted Northern is back in stock at Amazon…
Arguably the biggest, permanent non-health related impact of the pandemic in the United States is on how we conduct business.
In this blog post, we will discuss the negative impacts and legal risks of having an inaccessible ecommerce store, the most common WCAG 2.1 AA violations, and digital accessibility best practices for customers with disabilities.
Whether you’re a business owner, web developer, or just interested in website accessibility, this post will provide valuable information on how to optimize ecommerce stores for accessibility.
Is Digital Accessibility Compliance Healthy?
It is and it’s why you won’t catch me getting sneezed on by some rando while buying groceries, clothes, or bags and bags of baby wipes.
FYI, I made the transition from paper to wipes years ago. Most have zero clue what their missing.
Clean butts Matter…
But, as a person with a severe travel-limiting disability significantly impairing my ability to independently pick up my prescriptions, get that great new pair of Chinos that do me all the favors, or pick up food so I can cook the cheese quesadillas and PBJ’s my daughter so desperately needs for survival…
…Accessibility of online stores, shopping centers, and or service providers is essential. Like 2020 toilet paper essential.
Is Digital Accessibility Good or Bad for Business?
Unfortunately, many businesses fail to realize their e-commerce store may not be accessible to people with disabilities like me, making it difficult, if not impossible, to shop online.
An inaccessible online store isn’t just bad for business, but it also:
- Exposes your business to significant legal risks.
- Cannibalizes your company’s brand you worked hard to build, and
- Alienates an incredibly virulent, loyal customer base-those with disabilities.
Negative Impacts of Ecommerce Store Accessibility
Those with visual, auditory, motor, and cognitive impairments often cannot use websites that haven’t been designed or built with accessibility in mind. The negative impact of inaccessible ecommerce stores on customers with disabilities is sickening.
Imagine being hungry and unable to order food, even though it’s during regular business hours.
Imagine not being able to book travel after a death in the family because the website won’t let you.
Imagine being forced to stand outside your favorite store without being aloud to enter even though others can without any issue or problem.
“Turrible…”
Inaccessible ecommerce stores result in frustrated customers, lost sales, and damaged reputations.
Do you know how fast customers with disabilities will turn to your competitors with accessible websites?
Do you realize how virulent web accessibility recommendations travel across the disability community?
Reductions in market share and revenue don’t do it for you? What about Law & Order?
Legal risks of Ecommerce Website Accessibility
In addition to lost sales and a damaged reputation, businesses with inaccessible ecommerce websites face legal risks.
In many countries, including the United States, Canada, Sweden and others across the European Union, there are laws requiring website accessibility for people with disabilities. For example, the Americans with Disabilities Act (ADA) in the US and the Canadian Human Rights Act in Canada.
Failure to comply with laws like the ADA leads to expensive lawsuits, fines, and degradations to your brand value.
How do you stop this from happening?
Here’s how to get started with website accessibility.
Most common WCAG 2.1 AA violations
It’s important to know where to start with digital accessibility compliance. The best place is low-hanging fruit.
Below are some of the most common WCAG 2.1 AA violations businesses make.
For context, these laws like the ADA are all based on the Web Content Accessibility Guidelines (WCAG) which were established by the World Wide Web Consortium (W3C). The W3C is an international community where Member organizations, full-time staff, and the public work together to develop Web standards for every aspect of the web, not just accessibility.
While we started with WCAG 1.0, today, WCAG 2.1 AA is the current standard providing the set of guidelines for creating accessible web content. Compliance with each guideline helps ensure your online store, mobile app, or software application are accessible across sensory, motor, or cognitive disabilities.
1.Lack of alternative text for images
Alternative text, or alt text, is a written description of an image in text form that can be read by screen readers. Without alt text, people with visual impairments are unable to know what’s in an image or access the information contained in the image.
2. Keyboard Accessibility
Keyboard accessibility allows people to navigate an ecommerce store without a mouse, which is essential for people with motor disabilities. Without proper keyboard accessibility, people with motor disabilities using assistive technology like a sip and puff or switch control may find it impossible to use or shop on your website.
3. Insufficient color contrast
Text without enough contrast with its background can be difficult for people with visual impairments to read. WCAG 2.1 AA requires a minimum color contrast ratio of 4.5:1 for normal text. Businesses often fail this WCAG guideline because of their brand colors and other design choices.
The Howard Hughes Medical Institute estimates 12 million Americans are colorblind. Shockingly, about 7% of US males are colorblind.
4. Inaccessible forms
Forms that are not accessible can be one of the most frustrating components to an inaccessible website. Forms can be missing labels, instructions, and incorrect use of error messaging.
Imagine being in the final stages of checking out, but you can’t. You know you’re getting an error message, but you don’t know what’s causing the error or how to fix it. This is an overwhelmingly abundant problem in ecommerce accessibility.
5. Inaccessible videos
Videos that do not have closed captions or audio descriptions are inaccessible and violate WCAG 2.1 AA guidelines.
WCAG 2.1 AA requires that videos have closed captions and audio descriptions. Closed captioning enables those with hearing impairments to know what’s being spoken while audio descriptions provide those with sight loss or blindness descriptions required to understand information that is only being communicated visually.
Disney’s Frozen movie trailer above is a great example of audio description.
If you’ve got 99 digital accessibility problems but knowing you’ve got a problem ain’t one…
6 Digital accessibility best practices for customers with disabilities
You’ll want to read this section if you…
- You don’t have the resources to hire a digital accessibility consultant; or
- You don’t have the need or resources to hire an internal team dedicated to digital accessibility.
Here are some digital accessibility best practices every business should use… Even if you know nothing about digital accessibility!
1.Accessibility starts in the planning and design phases.
It’s never too early to start talking about and planning for digital accessibility. How early?
During planning, before the design phase begins.
This includes choosing an accessible content management system (CMS), selecting accessible templates, and designing with accessibility in mind. Without accessibility considered this early, you are likely setting yourself up for unresolvable website accessibility compliance violations longitudinally.
Don’t build anything on a weak foundation. This includes your website.
2. Logical and Consistent Navigation
Screen reader users rely on consistent navigation to navigate and understand websites. This can be done well using headings.
Descriptive headings help users understand the content of a page and how it is organized.
Logical, descriptive, and consistent heading structure will:
- Break up content; and
- Make it easier for screen reader users to navigate your website.
3. Provide alternative text for images.
Screen reader users are usually blind and cannot see images, so they rely on alternative text (alt text) to understand what’s in the image. We mentioned earlier that alt text is a short description of the image in text format read aloud by a users’ screen reader software.
There are two types of images, decorative and informational. Informational images convey important and necessary information needed to successfully interact with your website as designed and intended. Decorative images are just that, decorative, and do not contribute to the use or functionality of the digital asset.
As a consequence, informational images need enough description within the alt text to convey what’s being communicated visually in text format. This information should give the user the information needed to functionally interact and use the website as designed and intended.
4. Use high contrast colors.
Text should have a high contrast ratio with its background to make it easier to read. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text.
While high contrast is good for everyone sitting in front of screens all day at work, home, and school, some individuals with sensory impairments like color blindness, and cognitive issues related to learning and comprehension, benefit from having high color contrast. In addition to accessibility, high color contrast is an opportunity to improve the user experience for everyone, even if they do not have a diagnosed disability.
5. Make forms accessible.
Forms should be designed with accessibility in mind. This includes providing clear labels for form fields, using descriptive instructions, and using error messages that are easy to understand.
Everyone makes mistakes, so don’t exclude people with disabilities from using your website when they do the same. Ensure your forms are accessible with detailed error messages that tell users where errors may be located and how to enter information correctly, such as the specific format of a date field.
Turn on a screen reading software and learn how accessible your forms are. You can turn on Narrator, the Windows OS screen reader, or Voiceover, the Mac OS screen reader, and tab through your form to find out.
6. Manual Screen Reader Testing
This is the last best-practice and arguably the most important, so we’ll provide some extra focus here.
Why even do screen reader testing when you can use automated accessibility testing software and get it done faster?
The answer is simple. Automated accessibility testing software tools cannot and do not find 100% of digital accessibility violations.
There are a number of reasons why accessibility automation is not able to detect all accessibility errors, but here’s two of the primary reasons:
- Accessibility automation tools cannot test across multiple dynamic same-page interactions; and
- Accessibility automation tools cannot understand contextual relevance of content and custom components within a page or screen of web content.
At best, tools like Google Lighthouse, WAVE, Microsoft Insights, axe DevTools, and others will find 50% of accessibility violations, with most violations having little to no impact on the user. Very few violations will ever be found if an interaction is needed prior to testing.
Is each error message understandable and accessible? Did the box get checked? Does it uncheck? Did another section of the form expand out like mailing and billing address fields because of this interaction?
I’d love it if accessibility automation could do insanely human things like deduce understandability and contextual relevance of an error message as it relates to a specific error within a form. But it can’t. And I’m not holding my breath.
For those who can read between the lines, this is another one of many reasons why dynamic accessibility overlays don’t work. AI doesn’t understand context.
Besides overcoming these limitations of accessibility automation tools, manual testing will help you understand how screen reader users interact with your website, identifying areas for UX improvement in the process. Over 90% of screen reader users use JAWS or NVDA on Windows machines; Voiceover on the Mac takes a distant third place.
In short, automated accessibility testing tools:
- Miss 50% of accessibility bugs causing ADA legal risks;
- Miss most “road blocking” or severe accessibility violations that can only be found through manual testing; and
- Are inadequate for accessibility testing and accessibility regression testing.
How We Help
If you don't know how to do it, achieving digital accessibility and maintaining accessibility compliance with the ADA can be hard, complicated, and ridiculously time-consuming. This article outlines for you the best first steps to cleaning up low-hanging accessibility fruit and minimizing these risks.
Like competitors offering similar services to the ones you provide, experiences you create, and products you sell... Not all offerings are created equal.
The organizations we help today know this is a problem. Another compliance issue that isn't going away and needs to be solved.
We analyze the situation, develop a approach with proven strategies, and determine the best way to solve our customers' problems like:
- We got a demand letter / ADA lawsuit. What can we do to fix this and protect our business going forward?
- We need help with our SAAS's accessibility compliance to break into the {finance, insurance, health care, edu, and or gov} market(s)
- We have multiple teams, venders, and concurrent projects, on and offshore resources, with crazy short sprints. Can you help our in-progress project? We had to meet accessibility compliance yesterday.
If this is ringing true and worth a conversation, you can schedule 20-min here to see if we can help you on your digital accessibility journey. And if we can’t, we’ll get you connected with a friend who can.