Is your site compliant? Achieving accessibility standards in ecommerce

(9) 2024Shopify Plus

Did you know that the World Health Organization (WHO) estimates that 16% of the global population (or 1 in 6 people) has a disability? This underscores the global impact of web accessibility. Ensuring that anyone, regardless of ability, can successfully use the internet is, first and foremost, an issue of inclusion.

Importance of ADA

Web accessibility is not just a matter of inclusion, it’s a moral and legal imperative. It ensures that people of all abilities can find and use your products and services without discrimination. While there are no laws that currently govern web accessibility (except for government sites, in which case you are accountable by law to Section 508 of the Rehabilitation Act), landmark legal cases - such as Domino’s Pizza vs. Guillermo Robles- have clarified the Department of Justice’s (DOJ’s) stance on accessibility. Websites and digital platforms are legally considered public accommodations under Title III of the Americans with Disabilities Act (ADA) - which prohibits discrimination based on disability. Recently, there has been a significant increase in lawsuits against small and large businesses alike that are not compliant. In fact, nearly all of our clients approached us last year for assistance with updating and/or maintaining their web compliance to the latest standards.

It’s also important to note the business reasons for accessibility. Accessible websites not only increase the size of your addressable audience but also have better SEO/search results, reduce maintenance costs, and demonstrate a meaningful commitment to corporate social responsibility (CSR) and inclusivity. This underscores the strategic advantage of investing in web accessibility.

While addressing web accessibility can feel daunting, we’ve put together a straightforward guide to help you grasp its importance and begin integrating it into your web process. We’re also here to assist you in making your site both accessible and user-friendly. You’re not alone in this journey, and we’re here to support you every step of the way. Reach out here

What are the standards?

The Department of Justice (DOJ) and other federal agencies have issued guidance documents, statements of interest, and settlements related to web accessibility, further clarifying website ADA compliance requirements. Accessibility must be integrated throughout your entire site or platform, including layout and structure, written and visual content, site navigation, and other features like forms and pop-ups.

Although not legally mandated, the Web Content Accessibility Guidelines (WCAG), developed by the World Wide Web Consortium (W3C), are widely recognized as the international standard for web accessibility. The purpose of the WCAG is to provide a shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. WCAG is frequently referenced in legal cases involving web accessibility, and adherence to these guidelines is often considered a best practice for ADA compliance.

While you can access the full WCAG here we’ve compiled a summary below of the four key WCAG principles to design and develop for, along with the respective 13 guidelines these principles underpin. While the guidelines themselves are not testable requirements, they provide a general framework against which to compare your site. Lastly, and quite importantly, the WCAG defines success criteria to enable the actual testing against the guidelines. They represent three levels of conformance: A (lowest), AA, and AAA (highest), and define what compliance means for each outlined type of web content or experience

WCAG Summary

Perceivable
Visitors can perceive or be aware of your site’s information and user interface components. For example, for visitors with visual impairments who may use screen-reader software, this means ensuring visual images or videos are tagged with a text alternative so they will know the presence of this content.

Associated Guidelines:

1.1 Text alternatives
1.2 Time-based media
1.3 Adaptable
1.4 Distinguishable

Operable
All users can access or use all parts of the site, whether that be a signup form, selecting from a dropdown menu, or interacting with a dynamic visual. With operability in mind, we often counsel clients to forego extraneous functionality that won’t be accessible to all users.

¹See success criteria staring at Guideline 1.1: https://www.w3.org/TR/WCAG21/#text-alternatives

Associated Guidelines:

2.1 Keyboard Accessible
2.2 Enough time
2.3 Seizures and Physical
2.4 Navigable
2.5 Input modalities

Understandable
Avoid being lengthy, and stick to simple, concise language. Structure also counts – the navigation panel should always be easy to access, and pages clearly organized.

Associated Guidelines:

3.1 Readable
3.2 Predictable
3.3 Input Assistance

Robust
This is to ensure “compatibility with current and future user agents, including assistive technologies,” meaning it’s crucial that developers write HTML that allows assistive technologies to parse the code effectively into alternative formats that are adapted to the user’s needs.

Associated Guidelines:

4.1 Compatible

Note:

See also WCAG at a Glance for Principle and Guideline overview with hyperlinks to further detail
Hubspot also has a fantastic checklist that describes the guidelines in greater detail and provides examples of how to address them.

The goal is that everyone can have effective, efficient online experiences, regardless of the assistance they need or the technology they use. It is important to note that this also includes accessible design for mobile phones as these might be the singular source of internet access for many.

What to consider

While there is a wide range of disabilities, just like there is a wide range of people in the world, here are some broad categories to help you consider the types of accessibility you need to build and the assistive technologies (ATs) you need to accommodate.

Visual Impairments can include low-level vision, blindness, and also color-blindness. In terms of visual ATs, some users will rely on screen readers (software that reads digital text out loud), physical magnifiers, and native zoom capabilities available on most operating systems and browsers.

Hearing impairments include those who are deaf or hard of hearing. It’s important to ensure that transcripts and captions are provided for audio or video content on-site.

Mobility impairments cover a wide range of physical limitations, from difficulty using a mouse to loss of limbs to paralysis. Depending on the individual’s circumstances, a wide variety of ATs, including head pointers, can allow a physically restricted user to interact with a computer.

Cognitive impairments also encompass a wide range of circumstances, including intellectual disabilities, mental illness, and learning disabilities (from dyslexia to ADHD). While individual needs across these circumstances can vary, there are themes to keep in mind for the types of principles that will accommodate cognitive impairments:

Keeping content concise and displaying it in more than one format
Highlighting critical content and minimizing distractions such as unnecessary content, ads, or pop-ups
Leveraging a consistent page layout and structure to make navigation easier
Making forms and interactive modules easy to complete
Authentication options that maintain security while also making them as streamlined as possible
Arranging workflows or multi-step processes into logical, essential steps with progress indicators.²

Auditing your site

There is a wide variety of website accessibility scanning tools. Here at PIVOT, we are fans of AccessiBe, Site Improve, WAVE, and ARC.

Scanning Tools

AccessiBe
Site Improve
Wave
Arc

Troubleshooting Issues

Scanning tools are very important for giving you a roadmap of issues to test, but this does not eliminate the need for manual usability testing. At PIVOT, we will not only design and code for accessibility but also run a robust testing process to ensure we find all of the points that need addressing. If you’d like to perform preliminary manual testing of your site, try using screen reader software or navigating the entire site with your keyboard to see where you fall short.

Common Areas of Concern

²Source https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

At this point, you might repeatedly wonder about some common examples of web accessibility issues. Here, our PIVOT engineers have provided examples of site features or design elements that can often need an accessibility upgrade:

Keyboard navigability

This means that a user can navigate your site solely through the keyboard without needing a mouse or track/touchpad. An example of this functionality is when the “tab” key jumps the user between discrete page elements, while the “enter” key makes the content the main focus of the page. Note: Properly coded HTML with the correct content headings enables this type of accessibility function. You’ll want to ensure your developers are well-equipped with these structural standards.

Color contrast

This is a very common issue we see. Many companies and organization have brand standards and color combinations that might not translate to optimal accessibility on the web. It’s important that the colors used have enough contrast (especially text on a background) to ensure maximum legibility for the wide range of users.

Audio controls

It’s critical that a user can control for his/herself the presence of sound and the playback volume on audio/video content.

Accessible menus

Have you ever tried to access a drop-down navigation menu or hover over content only to have it disappear the instant you try to click on one of the elements? This is often frustrating for users, no matter their ability. Best practices in web accessibility dictate that you set a time delay for the content to remain after a cursor has disengaged.

Blinking or flashing content

It’s best to avoid content that rapidly shifts, blinks, or flashes as it can trigger seizures in vulnerable users. If this is unavoidable for any reason, it’s critical to include a prominent warning on the webpage

As a general note, be sparing with site ornamentation and extraneous features. By sticking on the side of simplicity, you’re not only supporting accessibility, you’re very likely acting in favor of general performance and conversion as the site is not only faster to load, but easier to navigate and transact with for all users, regardless of ability.

Maintenance

Yes it’s hard work, but it allows more and more people to access your products and services. This will be a continuous journey as assistive technologies improve and standards get updated. The great news is, the sooner you start to design and develop for accessibility, the sooner these standards are understood by your team and therefore become more top of mind. When you design for accessibility as you go, it’s much easier than retroactively fixing an established site experience. It also means you are making your site more usable by more people, which is a net positive for your business.

We know this is a nuanced and critically important topic that can mean the difference between being a truly inclusive business, as well as increasing your addressable customer base and/or preventing an expensive lawsuit. Here at PIVOT we’ve been there to design and develop for best-in-class accessibility for numerous clients. Reach out to our team to get started