Use Code LOVE25 at Checkout

GET 25% OFF IN THE SHOP

00D 00H 00M 00S
women highlighting book passage

Web Content Accessibility Guidelines (WCAG): Make Your Website Accessible

Feb 5, 2023

filed under  //

DESIGN TIPS
on Tap

Get my best tips and tricks on design & marketing in your inbox every week.

HOT TOPICS

Subscribe

1

Search:

Website accessibility is an extremely hot topic right now in the web design world and is NOT something to be ignored. At its core, website accessibility involves making your website accessible to everyone – including people with disabilities. Not only is ensuring accessibility on your website the right thing to do, it’s also the law in many cases. The Americans with Disabilities Act (ADA) Title III requires that all websites for businesses of public accommodations be accessible to those with disabilities.

What organizations and businesses require ADA compliance?

According to the ADA website, “Businesses, including nonprofits, that serve the public” require compliance with ADA Title III. This includes:

  • Restaurants
  • Hotels / lodging
  • Shops / retail / grocery
  • Movie theaters and entertainment
  • Museums / libraries
  • Parks / zoos
  • Doctors’ offices and private hospitals
  • Day care centers
  • Gyms
  • Certification organizations
  • Privately-operated transit
  • Commercial facilities

This above list is just a summary of those entities that require ADA compliance. You can find the full list here.

Note that even though ADA compliance is not legally required by religious organizations or private clubs, if you fall into one of these categories, website accessibility is still something you should still seriously look into for the sake of your business and creating a user-friendly experience for all users.

Why is website accessibility important?

As mentioned, website accessibility is important for the sake of staying in compliance with laws, but it’s also equally important in order to create an online environment that is inclusive for all your website visitors and potential customers.

According to the U.S. Census Bureau, in 2020, an estimated 61 million people, or 19% of the total U.S. population, had a disability.

U.S. Census Bureau

Disabilities and accessibility

There are many disabilities that could impact a user’s ability to navigate your website and might require accessibility measures to be implemented, including:

  • Difficulty using upper limbs or hands
  • Blindness or visual impairment
  • Deafness or hearing impairment

Imagine going to a store as person who has limited mobility, and there are no accessible parking spaces or a ramp to access the front door. It would make it difficult for you to simply enter the building and you would most likely not want to return or shop at that same store again. Consider that your website is like your online storefront and making it accessible to all website users is just as important as the “in-person” accessibility we typically experience (and expect) for customers at a brick-and-mortar place of business.

Ignoring website accessibility can be costly

In 2018, Domino’s Pizza was sued by a visually-impaired man who claimed that the company’s website and mobile app were not accessible to individuals with visual impairments. The case eventually made it to the Supreme Court, where the Court held that the man had the right to sue under the Americans with Disabilities Act (ADA), even though the ADA’s provisions for website accessibility were not explicitly stated. This case set a precedent for future lawsuits regarding website accessibility, and highlights the importance of making sure that all websites are accessible to all users, regardless of ability.

This high-profile case is just one example of thousands lawsuits that have developed related to web accessibility. It serves as a reminder that all companies, big or small, need to prioritize web accessibility and make sure their sites are accessible to everyone, including those with disabilities.

W3C WCAG guidelines for website accessibIlity

Web Content Accessibility Guidelines

While the ADA doesn’t provide specific criteria for website accessibility the Web Content Accessibility Guidelines (WCAG) is a great place to start. These guidelines were developed by the World Wide Web Consortium (W3C), the organization responsible for creating and maintaining the web’s standards. The WCAG provides a complete list of recommendations for making web content accessible to everyone based on the Four Principles of Accessibility: Ensuring every website’s is perceivable, operable, understandable and robust.

These accessibility guidelines have been updated over time and include an evolving set of success criteria that help to determine whether a website is considered truly accessible.

  • WCAG 2.0 was published in 2008 and consists of 12 guidelines and 4 principles. It establishes a baseline for accessibility for people with disabilities using assistive technologies.
  • WCAG 2.1 was published in 2018 and extends the original guidelines of WCAG 2.0. It includes 17 new “success criteria” and adds accessibility requirements for people with disabilities such as mobility, low vision, and cognitive disabilities.
  • WCAG 2.2 is still in development and is expected to build upon the previous versions of WCAG. It is expected to add guidelines for accessibility of augmented reality and virtual reality content.

It’s important to note that each successive update of the WCAG ensures backwards compatibility to any prior guidelines set – such that, if your website meets accessibility criteria for WCAG 2.2, it also meets the criteria for WCAG 2.1 and WCAG 2.0.

What are the WCAG Success Criteria?

So, what are the key accessibility criteria that you should be paying attention to on your website? These can be broken down based on the WCAG’s guiding principles:

Accessibility Principle 1: Perceivable – Information and user interface components must be presentable to users in ways they can perceive.

  1. 1.1 – Text Alternatives: All non-text content, such as images, videos, and audio, should have text alternatives (or ALT text) that provide the same information. This way, everyone can access your content – even those using screen readers or assistive technology.
  2. 1.2 – Time-based Media: Provide alternatives for time-based media and other interactive experiences. This includes accommodations such as captions for audio content, to allow users who are deaf or hard of hearing to access the information. You can use a tool like Kapwing or Loom to help your write captions for your audiovisual content.
  3. 1.3 – Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Use headings and labels to help users who are blind or have low vision to understand the structure and organization of the content. (You can check the heading tags used on your website using a browser extension tool like HeadingsMap to identify the various headings and structural elements used on your site.)
  4. 1.4 – Distinguishable: Make it easier for users to see and hear content including adequate contrast of foreground from background and ensuring your text size is large enough to be read. This is particularly important for users with low vision or color blindness. (You can use a tool like WebAIM’s Contrast Checker to check for adequate contrast between your website’s text and background colors
WebAIM Accessibility Contrast Checker

Accessibility Principle 2: Operable – Information and user interface components must be presentable to users in ways they can perceive.

  1. 2.1 – Keyboard Accessible: All core site functionality should be available using a keyboard including the ability to logically tab through your site’s content, forms and other key navigational items in consecutive order. This makes it possible for users with mobility impairments to navigate and use your site more easily.
  2. 2.2 – Enough Time: Provide users with control over any time limits on the website, to allow users who have cognitive disabilities to access the information at their own pace.
  3. 2.3 – Seizure-aware: Content should not be designed in any way known to typically invoke seizures, such as repeatedly flashing designs. A web page should not contain anything that flashes more than three times in any one second period.
  4. 2.4 – Navigable: Provide ways to help users navigate and use your website. This includes having clear and descriptive link text that accurately describes the intended target of the link. This makes it possible for users of screen readers to understand the purpose of the link and know what to expect before they click it. You should also have a visible outline for any elements that can be focused using keyboard navigation.

Accessibility Principle 3: Understandable – Information and the operation of user interface must be understandable.

  1. 3.1 – Readable: Make text content readable including identifying the native language for your website pages, utilizing an appropriate reading level for your website content, and providing additional context for abbreviations or jargon that might be implemented
  2. 3.2 – Predictable: Make web pages appear and operate in predictable and consistent ways for key navigational elements.
  3. 3.3 – Input Assistance: Help users avoid and correct mistakes such as when entering information into a form. All forms should come with labels and instructions for filling them out properly.
  4. 3.4 – Compatible: Ensure markup language used on your website is written semantically and there is appropriate and relevant implementation of html elements such as Name, Role, Value.

Accessibility Principle 4: Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

  1. 4.1 – Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

While this list of accessibility criteria summarized from W3C provides a good overview, it is not exhaustive, nor does it cover every criteria for all levels of conformance. (For a complete description of all WCAG 2.0 criteria, or WCAG 2.1 criteria, visit W3.org)

WCAG - Website Content Accessibility Guidelines Outline from W3C

WCAG Levels of Conformance

A website is considered to be compliant with the WCAG guidelines if it meets ALL the applicable success criteria for the level of conformance targeted (A, AA, or AAA).

  • Level A (Minimum): The minimum level of accessibility, which addresses the most basic accessibility barriers.
  • Level AA (Mid-Range): A higher level of accessibility, which addresses a wider range of accessibility barriers and provides a better user experience for people with disabilities.
  • Level AAA (Highest): The highest level of accessibility, which addresses the most accessibility barriers and provides the best possible user experience for people with disabilities.

There is currently no requirement to meet the highest level of conformance (AAA). The choice of conformance level depends on the resources and constraints of your organization, as well as the needs of your target audience. However, achieving a higher level of conformance generally results in a better user experience for people with disabilities and a more accessible website.

How to evaluate and improve your website’s accessibility

There are many websites that promote a cure-all solution to website accessibility, but be wary of these. Website accessibility is a complex undertaking that involves detailed analysis of the structure, design and content on your website. Accessibility can rarely be “fixed” completely by a single automated tool or a few lines of code placed on your website. However, accessibility tools can definitely provide a good place to start with uncovering accessibility issues.

Website Accessibility Tools

One of the easiest ways to get a baseline report on the accessibility of your website is using a website accessibility checker or scanner. These tools can scan your site and provide a report on critical accessibility issues that need to be addressed. Some popular website accessibility checkers include:

  1. WAVE: A free accessibility evaluation tool that gives a visual report of any accessibility issues on your website.
  2. aXe: An accessibility testing tool that works as a Chrome browser extension or as part of your development process.
  3. Accessibee Accessibility Scanner: A free scanner that gives you a report of any accessibility issues on any web page.
Accessibee's accessibility scanner and audit tool

However, I wouldn’t recommend solely relying on these tools to ensure 100% compliance. You may also want to consider hiring a Digital Accessibility Specialist or consultant, and/or conduct user testing with people that have disabilities to get feedback on your website.

Once you’ve identified any accessibility issues on your site, then it’s time to begin making improvements. This will likely require coordination with your marketing department, web designer/developer, copywriter or other key people that might be involved with your updating your website. Put together an action plan and identify who will be responsible for each of the items on your list and a timeline for completing them. Even after your changes are completed, you will want to continue to monitor your website’s accessibility as new content is added or updates are made to accessibility requirements.

Summary of Website Accessibility Checklist

When it comes to accessibility, frankly, there’s a lot to learn but it doesn’t have to be super time-intensive or costly—you just need to have a plan in place. Here’s the TL/DR version of this post for tips on making your website accessible.

  1. Evaluate the current state of accessibility: Start by evaluating the current state of accessibility on the website to identify areas that need improvement. This can be done using automated accessibility testing tools, manual evaluations, or user testing with people with disabilities.
  2. Determine the level of conformance: Choose the level of conformance (A, AA, or AAA) that you want to achieve based on your resources and constraints, and the needs of your target audience.
  3. Create an accessibility plan: Based on the results of your evaluation, create a plan to address the accessibility barriers identified. The plan should prioritize the most important barriers and allocate resources accordingly.
  4. Incorporate accessibility into the development process: Make accessibility a part of the design and development process from the start. This can be done by incorporating accessibility into design and development standards, including accessibility criteria in code reviews, and incorporating accessibility testing into your quality assurance process.
  5. Train your team: Ensure that you and any team members that are involved with updating/maintaining your website have the knowledge and skills to create accessible content. Provide training and resources to help them understand the WCAG guidelines and how to apply them.
  6. Continuously monitor and improve: Continuously monitor the accessibility of your website and make improvements as needed. Since the WCAG are continually evolving and your website may have new content added frequently, this is something that should be done on an ongoing basis. Conduct periodic evaluations and user testing by incorporating real feedback from users with disabilities.

By following these steps and making accessibility a priority in your business, you can ensure that your website meets the WCAG guidelines and provides an accessible experience for all users, including those with disabilities.

Disclaimer: I’m not a lawyer. The information presented in this post is general in nature; it is not intended as legal advice or as a substitute for obtaining legal advice. K Design Co makes no representation and assumes no responsibility for the accuracy of the information contained in this article or its suitability for any purpose, and such information is subject to change without notice.

Don't worry, we hate SPAM too and we promise to never blow up your inbox!

Get our best tips and tricks on design & marketing in your inbox every week.

Subscribe

1

DESIGN TIPS

on tap

Subscribe to our newsletter and get free goodies, insights and discounts delivered to you with love.

Your not-so-typical brand and web bestie.

kristin pruis

Armed with a decade of design prowess and keen business insights to boot, she's the creative powerhouse behind these digital musings.

hey-o

meet the blogger

learn more

When she's not crafting brands and websites that turn heads, you'll find her penning blog gems that cut through the noise with wit and wisdom. Get ready for a rollercoaster ride through the world of branding, design, and entrepreneurship – with a side of sass and humor. Buckle up, babe - you're in for one heck of a journey!

FREEBIES

Flawless fonts Pairing Guide

brand your business messaging checklist

Looking for the free goods? Check out our curated collection of free resources and essential tools to help you craft a distinctive and bold online presence.

fan-favorites resources

color palette inspiration guide

0
Your Cart is empty!

It looks like you haven't added any items to your cart yet.

Browse Products