Insights

Access Granted: Unraveling the Mysteries of Website Accessibility in 2024

In this article

Before we dive into what website accessibility is, a bit of history… 

A Historical photograph of George H.W. Bush signing the Americans with Disabilities Act of 1990.
President George H.W. Bush signing the American with Disabilities Act (1990).

Before the American with Disabilities Act was signed into law in 1990, things like wheelchair ramps, auditory traffic signals and braille signage were essentially unheard of, causing mobility challenges for as much as 5% of the total population at that time. 

While a lot has changed a lot in the last 30+ years, many still feel that accessibility in America is far from perfect. In addition to the real-world challenges like New York subway elevators always being out of commission and the high number of wheelchair ramps that lead to locked doors, people with disabilities have a new hurdle to overcome: the internet.

So what is website accessibility?

Website accessibility is the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When implemented properly, online accessibility ensures that all users have equal access to information and functionality of a website or app. 

When it comes to website accessibility, there are two acronyms that reign supreme: 

ADA and WCAG.

The first acronym: ADA - American with Disabilities Act

A computer with a handicap-accessible logo on the screen

In 2022, the Department of Justice updated their formal position on website accessibility, stating that the American with Disabilities Act applies to state and local governments and all businesses that are open to the public, including those offered on the web.

While our dear DoJ (Department of Justice) doesn’t give us a specific set of guidelines to follow, the general message is clear: they’re sticking to the same standards of nondiscrimination and effective communication that the ADA originally set out to address. 

And these guys are willing to put your money where their mouth is. 

The Department of Justice in accordance with the ADA

In cases involving Miami University in Ohio, Rite Aid Corporation and H&R Block, the DoJ sided with plaintiffs in each case, forcing the organizations to update their website accessibility, pay penalties to the plaintiffs, and undergo regular reporting to ensure their ongoing compliance. 

What could have been a few thousand dollars at the onset of the sites’ creation, ended up costing lawyers fees, plaintiff payouts, hasty compliance updates, and ongoing reporting costs for each of those organizations.  

Lawsuits over website accessibility

Winn-Dixie

The company logo for Winn-Dixie

Back in 2017, in what has become one of the most well-known (and drawn out) website accessibility lawsuits, Juan Carlos Gil sued Winn-Dixie over claims that website information, pharmacy and features were inaccessible to blind and visually impaired customers. The court ruled in favor of the plaintiff, and after years of appeals, Winn-Dixie finally backed down in 2022.

Nike 

The company logo for Nike

Nike is no stranger to website accessibility lawsuits. The most prominent case was in 2017 when Maria Mendizabal filed a class action lawsuit against Nike, claiming that Nike.com and Converse.com failed to give access to blind and visually impaired users.

As recently as June of 2023, Sumaya Hussein brought a lawsuit against Nike, alleging that the ecommerce website did not provide “legally blind users a full and equal experience” on the website. 

And these are just a few examples. Target, Amazon, and even the queen herself (Beyonce, of course), as well as countless other brands you can’t help but have a relationship with have also been sued on the basis of unequal access under the ADA. For some of them, it cost them big. 

H&R Block

  • Date July 2014
  • Reason for lawsuit: Lack of website accessibility for visually impaired
  • Payout: $100,000

Miami University

  • Date: October 2016
  • Reason for lawsuit: Lack of website accessibility for visually impaired
  • Payout: $25,000

Netflix

  • Date: 2012-2014
  • Reason for lawsuit: Lack of close captioning for deaf viewers
  • Payout: $755,000 to the National Association of the Deaf

Target

  • Date: 2005-2006
  • Reason for lawsuit: Lack of website accessibility for visually impaired
  • Payout $6 million

Harvard University

  • Date: 2015
  • Reason for lawsuit: Not providing appropriately accurate and comprehensive captioning for online course materials (video and audio files)
  • Payout $1.6 million

A Look at the Numbers

The ecommerce industry has been hit the hardest by website accessibility lawsuits. An astonishing 81% of the top 500 US ecommerce retailers have received ADA-based website accessibility lawsuits in the past 5 years. 

But chances are, if you’re reading this, you aren’t Andy Jassy, John Donahoe or some other multi-billion dollar CEO. You’re just a little guy - no one cares about your website, right?

As it turns out, the majority of companies that received lawsuits in the last several years have an annual revenue under $20 million. 

A Bar graph of cases filed among companies with less or more than 25 million revenue in the first 6 months of 2023. The data shows 77% of cases being filed again companes with under 25 million in revenue, much higher than years prior.

Part of that is because a lot of the big guys have already been sued and have accessibility plans in place. So naturally, smaller businesses are targeted next.

How many lawsuits are we talking about here? Well, more than a few, and it’s growing every year.

In 2022, UsableNet discovered more than 4,000 website accessibility lawsuits had been filed, and they’re expecting this year’s number to be even higher. 

A graph noting that Digital Accessibility Lawsuits continue to Increase, with 4,220 estimated cases by the end of 2023

Now, I know what you’re thinking. I’ve seen those annoying little floating widgets - I’ll just get myself one of those and checkmate - I’m in the clear.

I hate to be the one to tell you this, but…. They’re being sued too. As much as 10% of the lawsuits so far in 2023 have had accessibility widgets or overlay features on their websites. 

So if the world’s biggest brands can’t tackle website accessibility, do the rest of us even have a chance?

Fear not. For there is hope.

Lets talk about that second acronym now: WCAG

A key on a computer keyboard that is labeled "WCAG Web Accessibiliity Guidelines"

W3C/WAIWCAG/WTF

First, let’s figure out what each of these are.

W3C - World Wide Web Consortium

These fine folks help develop standards and guidelines to help everyone build a World Wide Web based on the principles of accessibility, internationalization, privacy and security. You can think of them as the Founding Fathers of a fair internet.

WAI - Web Accessibility Initiative

An initiative of the W3C which seeks to develop, support, coordinate and promote web accessibility standards around the world. If W3C is the Founding Fathers, WAI is the United States of America that they set out to create.

WCAG - Web Content Accessibility Guidelines 

The international standard for web accessibility, developed by the W3C as part of the WAI, which explains how to make web content more accessible to people with disabilities​. This is essentially the sacred text of web accessibility, or to stick with the previous analogy, our glorious Constitution of the United Web of the World. 

WTF - Take a breath, we’re just getting started, I’m afraid. 

First thing to note, there are currently three versions of the WCAG. WCAG 2.0 was published in 2008, WCAG 2.1 was published in 2018, and we were all been biting our nails in anticipation of the release of WCAG 2.2 which happened in the fall of 2023. The latest change defined 9 new standards, but we'll get to that below. The good thing is, the standards are updated with each version of release, so you only need to worry about the latest version.

In order to master WCAG, you’ve got to ensure the Four Principles of Accessibility are met, support the guidelines for each, and decide which level of success criteria you are trying to hit. 

POUR over the Four Principles of Accessible Design

  1. Perceivable: Making web content available to all users, regardless of disabilities.
  2. Operable: Ensuring all functionality is accessible via a keyboard and usable by different assistive technologies.
  3. Understandable: Creating content that is easy to navigate and comprehend.
  4. Robust: Ensuring that web content can be reliably interpreted by a wide range of user agents, including assistive technologies.

There are three standard levels the WCAG uses: A, AA, AAA, which are in order from the lowest acceptable level of compliance (A) to the highest, strictest standard (AAA).

No B’s allowed when it comes to inclusion, I’m afraid. 

By far, the easiest way to make sure you meet these requirements is to go through the WCAG Quick Reference Guide, and check the ones that apply to you. We’ve also included a very rough roundup of the items below, for quick scanning. 

Very rough round-up for quick scanning

Here is a very brief rundown (keeping in mind that the WCAG 2.1 guide is more than 80 pages in length and this is much, much less than that):

1. Perceivable

  • Text alternatives for all non-text content - like a meta tag for a picture
  • Time-based media alternatives - things like captions or audio only for videos and similar media
  • Information must be adaptable - able to be simplified for situations such as screen readers
  • Content must be distinguishable - enough contrast, use of color, ability to resize text, etc.

2. Operable

  • Keyboard accessible - everything must be accessible through a keyboard
  • Enough time - users should have control over timed media - adjusting speed, pause, stop, hide, etc. 
  • Don’t cause seizures - don’t have flashing objects or images
  • Navigable - help users navigate, find content and know where they are: menus, breadcrumbs, page titles, headings/labels, etc. 
  • Input modalities - account for input options beyond keyboards

3. Understandable

  • Readable - make text content readable and understandable, allowing language selection, a way to define unusual or difficult words, explain abbreviations, and think about reading level and pronunciation assistance
  • Predictable - web pages should appear and operate in ways that are predictable and consistent 
  • Input assistance - if an error is made in a field, help show users how to correct the error. Provide labels and instructions that are easy to understand.

4. Robust 

  • Compatibility - content should work with current and account for future technologies, including assistive technologies

Changes brought to you courtesy of WCAG 2.2

The nine new success criteria introduced in WCAG 2.2 are aimed at enhancing accessibility for a diverse range of users, particularly those with cognitive, learning, and motor disabilities. Here are the nine new criteria that came from the release of WCAG 2.2:

  1. 3.2.6 Consistent Help (Level A):
    • Ensures that help mechanisms (e.g., contact details, self-help options) are consistently available in the same location across multiple pages within a set of web pages.
  2. 3.3.7 Redundant Entry (Level A):
    • Prevents users from having to re-enter information that they have already provided, reducing cognitive load and enhancing usability.
  3. 3.3.8 Accessible Authentication (Level A):
    • Provides accessible alternatives for authentication processes, such as not requiring cognitive function tests like memorizing passwords or solving CAPTCHAs, unless essential.
  4. 2.4.11 Focus Not Obscured (Minimum) (Level AA):
    • Ensures that interactive elements with keyboard focus are not entirely hidden by other content, making navigation easier for keyboard users.
  5. 2.5.7 Dragging Movements (Level AA):
    • Requires that functionality relying on dragging movements (e.g., drag-and-drop) can also be operated without dragging, offering alternatives for users with motor impairments.
  6. 2.5.8 Target Size (Minimum) (Level AA):
    • Sets a minimum size for interactive target areas (24 by 24 CSS pixels) to make them more accessible to users with limited motor control.
  7. 2.4.12 Focus Not Obscured (Enhanced) (Level AAA):
    • Expands on the Focus Not Obscured (Minimum) criterion by ensuring that no part of the focused element is hidden, providing better visibility for users relying on keyboard navigation.
  8. 2.4.13 Focus Appearance (Level AAA):
    • Defines minimum size and contrast requirements for keyboard focus indicators to ensure they are easily visible, aiding users with visual impairments.
  9. 3.3.9 Accessible Authentication (Enhanced) (Level AAA):
    • Enhances the accessible authentication criterion by requiring more robust alternatives for cognitive function tests, further aiding users with significant cognitive disabilities.

There were some other minor changes as well to the newest release, most of which modernized some outdated standards.

Now that You Know What Website Accessibility Is, How Do You Implement It? 

If all of this feels overwhelming, you aren’t alone, and even if you have an older site, you still have a few options that don’t require you to scratch everything and start over. 

A man with a visual handicap using a brail rand headphones to access content on a website.eader

Option 1 $$$: Hire an accessibility person/people for your digital team.

For large companies and those who run their own large ecommerce stores, it might make sense to hire experts who specialize in accessibility and can ensure that all content is accessible on a regular basis, as well as keep track of emerging technologies and standards. 

Option 2 $$: Use a paid accessibility audit company. 

This is a good middle of the road option if you want to pay a company to offload some of the responsibility to. In 2023, most of these services are powered by AI and there are real humans to speak to if you need help. Just keep in mind that even with this type of service, you are still held accountable if someone brings a lawsuit to you. Here are just a few of the many popular options:

  • accessiBe.com claims to be the largest in the market. They have plans ranging from $490 - $3,490/year + enterprise solutions. They offer a free website accessibility checker called accessScan, which was the most comprehensive automated tool of those I tested. It gives a decent overview of issues and potential issues on your website, and even tells you how the errors found will affect people with various disabilities.  
  • Audioeye.com is another widely used option, and you’ve likely experienced their accessibility widget while browsing the web. Their prices range from $49 to $99/month with enterprise packages available as well. They also offer a free accessibility checker, which isn’t quite as robust as the one from accessiBe, but still a helpful tool, overall. 
  • Accessibilitychecker.org is another option that offers a free website accessibility checker. I found this one to be the least intelligent of the free scanners tested. Their prices for accessibility scans start at $99 and go up to $299/month, and they offer enterprise pricing.  

Option 3 $: DIY your accessibility. 

This is only a good option if you are a web person, ideally who has completed the certifications offered by W3C and understand how to implement the level of compliance you’re looking for. 

Option 4 $?: Do nothing.

Might be the cheapest option in the short term, but in the long run, who knows. 0/10. Do not recommend. 

But I hired a web agency to design my website, so it’s accessible, right?

Not unless you’ve explicitly agreed to it. Be careful of wording like “we optimize your site to be accessible” or “we follow standards set by the ADA”. That doesn’t pass liability to them, and could actually mean nothing. If you’re having your site designed in the near future, make sure that whoever you hire is willing to agree to a minimum of WCAG Level A compliance. Anything less could get you in trouble with your users. 

Okay, but surely THEN I’M PROTECTED?

Well, no. Because the thing about websites is they are constantly growing and changing. So, even if a web agency agrees to give a Level A compliant site, if you write a blog and don’t add a meta description to an image, your site is technically no longer compliant. 

A meme with a man crying with the captions saying "Why is website accessibility so hard?"

The best way around this?

Ensure that everyone on your team who is responsible for contributing to your website in any way follows a checklist each time they make a change to ensure that your site stays compliant. 

It’s kind of like hygienic care for your website. If you get your teeth cleaned once a year, it helps keep things functional, but if you aren’t brushing and flossing everyday, things are going to end up falling apart. Similarly, if you don’t keep up with your site’s accessibility as you go, things will start stacking up against you, making the work more cumbersome in the long run. 

Planning on redesigning your website in the near future?

That’s the perfect time to update your website’s accessibility. And if you’re shopping around for a web agency, be sure to ask them how they not only design for accessibility, but what WCAG standards they are able to comply with, and how they can help ensure your site is accessible for the long-run.

An experienced, professional web agency will have no problem creating a site that is compliant and helping you keep it that way.

For example at Magnet, we not only utilize AI-powered website accessibility scanners like those mentioned above before launching every project, but we also have user guides, ongoing site checks and accessibility training available for our clients to help protect them into the future.

If you’re worried that your site might not be lawsuit-clad, get in touch with us. We’d love to help get your website to a level of compliance that works for you, all the way up to Level AAA. We can also help out with your next digital project, whatever it may be.

Contact us to get started!

This blog was originally written in August of 2023 and updated in June of 2024 to include updates to WCAG 2.2.

Keep reading

Read more guides, tactics and insights

Streamline your design handoffs and make developers happy with Figma's dev mode
Sep 14, 2024
Irakli Lolashvili
Driving Results: How Analytics Can Transform Your Content Marketing Strategy
Mar 1, 2024
Reisto Belovich
What is technical SEO?
Feb 9, 2024
Reisto Belovich
Understanding semantic search: the future of web browsing
Jun 24, 2024
Reisto Belovich
Gestalt Principles: Shaping User Experience Like a Boss
Oct 8, 2024
Mike Heggie
Unlock Speed and Consistency with Webflow’s Page Templates
Sep 14, 2024
Mike Heggie
Mastering content marketing: communicate to influence and drive conversions
Jun 13, 2024
Sarah Littlefield
"Alexa, bring me more customers!" The ultimate guide to voice search
Sep 14, 2024
Sarah Littlefield
The future of human computer interface design
Mar 1, 2024
Gavin Hall
How local SEO can boost your revenue
Feb 9, 2024
Reisto Belovich
Master keyword research in 3 simple steps
Feb 9, 2024
Reisto Belovich
Google's updates to Performance Max for January 2024
Jun 24, 2024
Sarah Littlefield
PPC loves AI: How to set up and run a highly profitable Performance Max campaign
Jun 24, 2024
Reisto Belovich
Unleashing Your Business's Potential with the Business Model Canvas
Mar 1, 2024
Gavin Hall
5 Website Mistakes That Are Costing You Money
Mar 1, 2024
Andrew Gaynor
Choosing the best ecommerce platform
Feb 9, 2024
Sarah Littlefield
Google’s latest Core Update Aims to Eliminate Spammy Content
May 26, 2024
Sarah Littlefield
The Ultimate Guide to Creating and Mastering Website KPIs
Mar 18, 2024
Sarah Littlefield
How Empathy Can Improve Your Design Process
Sep 14, 2024
Irakli Lolashvili
How to format, optimize and switch out images on your Webflow site
Mar 25, 2024
Andrew Gaynor
How to Get Your Conversion Metrics Right in Performance Max
Jun 24, 2024
Reisto Belovich
Fresh Webflow updates for 2024
Sep 14, 2024
Mike Heggie