The Web Content Accessibility Guidelines (WCAG) is a list of recommendations to address known challenges people with disabilities face on the internet. In other words, WCAG is meant to give organizations a series of concrete things they can do to implement the digital handrails necessary to ensure everybody has access to their online platforms, regardless of a user’s disability status. 

These protocols were first established in 1994 by the international World Wide Web Consortium (W3C). This nonprofit of software developers and member organizations regularly updates WCAG for the ever-changing digital landscape. Notably, WCAG 2.1 was published in 2018, with version 2.2 released in draft form in January 2023.

Designing your web properties according to WCAG helps ensure more than 61 million Americans and 1.3 billion people worldwide living with disabilities are able to fully participate in many fundamental aspects of society, much of which have shifted online. 

Organized by levels from A (lowest) to AAA (highest), businesses should aspire to be WCAG level AA-compliant to deliver an appropriate experience for all users. These shared standards are intended for content creators, web authoring tool developers, web accessibility evaluation tool developers, and website designers. They’re also meant to inform policymakers, managers, researchers, and others.

 

Principles of Accessibility

Each WCAG recommendation is informed by the four principles of accessibility: perceivable, operable, understandable, and robust. If one of your design features or content violates any of these, your digital property is not WCAG compliant.

Perceivable

Content and interface components must be presented in ways apprehensible or observable to all users. 

Operable

Users must be able to navigate your interface and interact with all its components. You shouldn’t design any elements disabled users won’t be able to use. 

Understandable

All information and operation of the interface must be comprehensible to all users. It shouldn’t be so complex that it becomes puzzling or unintelligible. 

Robust

Your content needs to be designed rigorously enough so that users can make sense of it regardless of the technological interpreters they use. It must be formatted for an expansive spectrum of assistive devices. 

In other words, interface components and content must be navigable and understandable for all users, and information must be sophisticated enough that it can be interpreted by a wide range of assistive technologies and screen readers. 

 

WCAG Doesn’t Have to Be Daunting

For many, the WCAG can be a bit technical and overwhelming—especially for less-initiated designers and content developers who don’t know where to start.

We understand that. 

While implementing something such as alt text seems pretty straightforward to many, coding so information displays appropriately for varied readers can become complicated, quickly.

You’re not alone, though.

This guide is intended to simplify each recommendation and suggest possible solutions. We hope it makes WCAG much more accessible so you can, in turn, make your websites more accessible. 

Notably, implementing accessible design is smart business sense. According to the nonprofit American Institutes for Research, people with disabilities in the United States of working age contribute more than $20 billion in discretionary income and $490 billion in disposable income. That’s a lot of potential revenue for your organization. 

Yes, there’s a clear business case for digital accessibility, but more importantly than that, it means large swaths of the population are no longer excluded from aspects of society many of us take for granted every day. 

By designing with WCAG in mind from the beginning, you not only ensure compliance with Title III of the Americans with Disabilities Act, but demonstrate a commitment to the moral imperative we each have to make daily life accessible for all people

 

HubSpot

This guide is written specifically for the HubSpot CMS. However, the explanations here may be adapted or interpreted for other content management systems, but please do so with caution.

For general questions on our accessibility efforts or services, please contact us here

For questions on how to resolve specific success criteria, please comment on the individual articles.

  1. 1 Perceivable

    Information and user interface components must be presentable to users in ways they can perceive.

    1. 1.1 Text Alternatives

      Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

      1. LEVELA

        1.1.1 Non-text Content

        Learn how to make your website 1.1.1 compliant

    2. 1.2 Time-based Media

      Provide alternatives for time-based media.

      1. LEVELA

        1.2.1 Audio-only and Video-only (Prerecorded)

        Learn how to make your website 1.2.1 compliant

      2. LEVELA

        1.2.2 Captions (Prerecorded)

        Learn how to make your website 1.2.2 compliant

      3. LEVELA

        1.2.3 Audio Description or Media Alternative (Prerecorded)

        Learn how to make your website 1.2.3 compliant

      4. LEVELAA

        1.2.4 Captions (Live)

        Learn how to make your website 1.2.4 compliant

      5. LEVELAA

        1.2.5 Audio Description (Prerecorded)

        Learn how to make your website 1.2.5 compliant

      6. LEVELAAA

        1.2.6 Sign Language (Prerecorded)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      7. LEVELAAA

        1.2.7 Extended Audio Description (Prerecorded)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      8. LEVELAAA

        1.2.8 Media Alternative (Prerecorded)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      9. LEVELAAA

        1.2.9 Audio-only (Live)

        This criteria is not required for WCAG 2.1 Level AA compliance.

    3. 1.3 Adaptable

      Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

      1. LEVELA

        1.3.1 Info and Relationships

        Learn how to make your website 1.3.1 compliant

      2. LEVELA

        1.3.2 Meaningful Sequence

        Learn how to make your website 1.3.2 compliant

      3. LEVELA

        1.3.3 Sensory Characteristics

        Learn how to make your website 1.3.3 compliant

      4. LEVELAA

        1.3.4 Orientation

        Learn how to make your website 1.3.4 compliant

      5. LEVELAA

        1.3.5 Identify Input Purpose

        Learn how to make your website 1.3.5 compliant

      6. LEVELAAA

        1.3.6 Identify Purpose

        This criteria is not required for WCAG 2.1 Level AA compliance.

    4. 1.4 Distinguishable

      Make it easier for users to see and hear content including separating foreground from background.

      1. LEVELA

        1.4.1 Use of Color

        Learn how to make your website 1.4.1 compliant

      2. LEVELA

        1.4.2 Audio Control

        Learn how to make your website 1.4.2 compliant

      3. LEVELAA

        1.4.3 Contrast (Minimum)

        Learn how to make your website 1.4.3 compliant

      4. LEVELAA

        1.4.4 Resize text

        Learn how to make your website 1.4.4 compliant

      5. LEVELAA

        1.4.5 Images of Text

        Learn how to make your website 1.4.5 compliant

      6. LEVELAAA

        1.4.6 Contrast (Enhanced)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      7. LEVELAAA

        1.4.7 Low or No Background Audio

        This criteria is not required for WCAG 2.1 Level AA compliance.

      8. LEVELAAA

        1.4.8 Visual Presentation

        This criteria is not required for WCAG 2.1 Level AA compliance.

      9. LEVELAAA

        1.4.9 Images of Text (No Exception)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      10. LEVELAA

        1.4.10 Reflow

        Learn how to make your website 1.4.10 compliant

      11. LEVELAA

        1.4.11 Non-text Contrast

        Learn how to make your website 1.4.11 compliant

      12. LEVELAA

        1.4.12 Text Spacing

        Learn how to make your website 1.4.12 compliant

      13. LEVELAA

        1.4.13 Content on Hover or Focus

        Learn how to make your website 1.4.13 compliant

  2. 2 Operable

    User interface components and navigation must be operable.

    1. 2.1 Keyboard Accessible

      Make all functionality available from a keyboard.

      1. LEVELA

        2.1.1 Keyboard

        Learn how to make your website 2.1.1 compliant

      2. LEVELA

        2.1.2 No Keyboard Trap

        Learn how to make your website 2.1.2 compliant

      3. LEVELAAA

        2.1.3 Keyboard (No Exception)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      4. LEVELA

        2.1.4 Character Key Shortcuts

        Learn how to make your website 2.1.4 compliant

    2. 2.2 Enough Time

      Provide users enough time to read and use content.

      1. LEVELA

        2.2.1 Timing Adjustable

        Learn how to make your website 2.2.1 compliant

      2. LEVELA

        2.2.2 Pause, Stop, Hide

        Learn how to make your website 2.2.2 compliant

      3. LEVELAAA

        2.2.3 No Timing

        This criteria is not required for WCAG 2.1 Level AA compliance.

      4. LEVELAAA

        2.2.4 Interruptions

        This criteria is not required for WCAG 2.1 Level AA compliance.

      5. LEVELAAA

        2.2.5 Re-authenticating

        This criteria is not required for WCAG 2.1 Level AA compliance.

      6. LEVELAAA

        2.2.6 Timeouts

        This criteria is not required for WCAG 2.1 Level AA compliance.

    3. 2.3 Seizures and Physical Reactions

      Do not design content in a way that is known to cause seizures or physical reactions.

      1. LEVELA

        2.3.1 Three Flashes or Below Threshold

        Learn how to make your website 2.3.1 compliant

      2. LEVELAAA

        2.3.2 Three Flashes

        This criteria is not required for WCAG 2.1 Level AA compliance.

      3. LEVELAAA

        2.3.3 Animation from Interactions

        This criteria is not required for WCAG 2.1 Level AA compliance.

    4. 2.4 Navigable

      Provide ways to help users navigate, find content, and determine where they are.

      1. LEVELA

        2.4.1 Bypass Blocks

        Learn how to make your website 2.4.1 compliant

      2. LEVELA

        2.4.2 Page Titled

        Learn how to make your website 2.4.2 compliant

      3. LEVELA

        2.4.3 Focus Order

        Learn how to make your website 2.4.3 compliant

      4. LEVELA

        2.4.4 Link Purpose (In Context)

        Learn how to make your website 2.4.4 compliant

      5. LEVELAA

        2.4.5 Multiple Ways

        Learn how to make your website 2.4.5 compliant

      6. LEVELAA

        2.4.6 Headings and Labels

        Learn how to make your website 2.4.6 compliant

      7. LEVELAA

        2.4.7 Focus Visible

        Learn how to make your website 2.4.7 compliant

      8. LEVELAAA

        2.4.8 Location

        This criteria is not required for WCAG 2.1 Level AA compliance.

      9. LEVELAAA

        2.4.9 Link Purpose (Link Only)

        This criteria is not required for WCAG 2.1 Level AA compliance.

      10. LEVELAAA

        2.4.10 Section Headings

        This criteria is not required for WCAG 2.1 Level AA compliance.

    5. 2.5 Input Modalities

      Make it easier for users to operate functionality through various inputs beyond keyboard.

      1. LEVELA

        2.5.1 Pointer Gestures

        Learn how to make your website 2.5.1 compliant

      2. LEVELA

        2.5.2 Pointer Cancellation

        Learn how to make your website 2.5.2 compliant

      3. LEVELA

        2.5.3 Label in Name

        Learn how to make your website 2.5.3 compliant

      4. LEVELA

        2.5.4 Motion Actuation

        Learn how to make your website 2.5.4 compliant

      5. LEVELAAA

        2.5.5 Target Size

        This criteria is not required for WCAG 2.1 Level AA compliance.

      6. LEVELAAA

        2.5.6 Concurrent Input Mechanisms

        This criteria is not required for WCAG 2.1 Level AA compliance.

  3. 3 Understandable

    Information and the operation of user interface must be understandable.

    1. 3.1 Readable

      Make text content readable and understandable.

      1. LEVELA

        3.1.1 Language of Page

        Learn how to make your website 3.1.1 compliant

      2. LEVELAA

        3.1.2 Language of Parts

        Learn how to make your website 3.1.2 compliant

      3. LEVELAAA

        3.1.3 Unusual Words

        This criteria is not required for WCAG 2.1 Level AA compliance.

      4. LEVELAAA

        3.1.4 Abbreviations

        This criteria is not required for WCAG 2.1 Level AA compliance.

      5. LEVELAAA

        3.1.5 Reading Level

        This criteria is not required for WCAG 2.1 Level AA compliance.

      6. LEVELAAA

        3.1.6 Pronunciation

        This criteria is not required for WCAG 2.1 Level AA compliance.

    2. 3.2 Predictable

      Make Web pages appear and operate in predictable ways.

      1. LEVELA

        3.2.1 On Focus

        Learn how to make your website 3.2.1 compliant

      2. LEVELA

        3.2.2 On Input

        Learn how to make your website 3.2.2 compliant

      3. LEVELAA

        3.2.3 Consistent Navigation

        Learn how to make your website 3.2.3 compliant

      4. LEVELAA

        3.2.4 Consistent Identification

        Learn how to make your website 3.2.4 compliant

      5. LEVELAAA

        3.2.5 Change on Request

        This criteria is not required for WCAG 2.1 Level AA compliance.

    3. 3.3 Input Assistance

      Help users avoid and correct mistakes.

      1. LEVELA

        3.3.1 Error Identification

        Learn how to make your website 3.3.1 compliant

      2. LEVELA

        3.3.2 Labels or Instructions

        Learn how to make your website 3.3.2 compliant

      3. LEVELAA

        3.3.3 Error Suggestion

        Learn how to make your website 3.3.3 compliant

      4. LEVELAA

        3.3.4 Error Prevention (Legal, Financial, Data)

        Learn how to make your website 3.3.4 compliant

      5. LEVELAAA

        3.3.5 Help

        This criteria is not required for WCAG 2.1 Level AA compliance.

      6. LEVELAAA

        3.3.6 Error Prevention (All)

        This criteria is not required for WCAG 2.1 Level AA compliance.

  4. 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.

      1. LEVELA

        4.1.1 Parsing

        Learn how to make your website 4.1.1 compliant

      2. LEVELA

        4.1.2 Name, Role, Value

        Learn how to make your website 4.1.2 compliant

      3. LEVELAA

        4.1.3 Status Messages

        Learn how to make your website 4.1.3 compliant