This guide is intended to make accessibility more accessible.
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.
-
Principle
1 Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
-
Guideline
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.
-
Guideline
1.2 Time-based Media
Provide alternatives for time-based media.
-
LEVELA
Success Criteria
1.2.1 Audio-only and Video-only (Prerecorded)
Learn how to make your website 1.2.1 compliant
-
LEVELA
Success Criteria
1.2.2 Captions (Prerecorded)
Learn how to make your website 1.2.2 compliant
-
LEVELA
Success Criteria
1.2.3 Audio Description or Media Alternative (Prerecorded)
Learn how to make your website 1.2.3 compliant
-
LEVELAA
Success Criteria
1.2.4 Captions (Live)
Learn how to make your website 1.2.4 compliant
-
LEVELAA
Success Criteria
1.2.5 Audio Description (Prerecorded)
Learn how to make your website 1.2.5 compliant
-
LEVELAAA
Success Criteria
1.2.6 Sign Language (Prerecorded)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
1.2.7 Extended Audio Description (Prerecorded)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
1.2.8 Media Alternative (Prerecorded)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
1.2.9 Audio-only (Live)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
1.3 Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
-
LEVELA
Success Criteria
1.3.1 Info and Relationships
Learn how to make your website 1.3.1 compliant
-
LEVELA
Success Criteria
1.3.2 Meaningful Sequence
Learn how to make your website 1.3.2 compliant
-
LEVELA
Success Criteria
1.3.3 Sensory Characteristics
Learn how to make your website 1.3.3 compliant
-
LEVELAA
Success Criteria
1.3.4 Orientation
Learn how to make your website 1.3.4 compliant
-
LEVELAA
Success Criteria
1.3.5 Identify Input Purpose
Learn how to make your website 1.3.5 compliant
-
LEVELAAA
Success Criteria
1.3.6 Identify Purpose
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
1.4 Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
-
LEVELA
Success Criteria
1.4.1 Use of Color
Learn how to make your website 1.4.1 compliant
-
LEVELA
Success Criteria
1.4.2 Audio Control
Learn how to make your website 1.4.2 compliant
-
LEVELAA
Success Criteria
1.4.3 Contrast (Minimum)
Learn how to make your website 1.4.3 compliant
-
LEVELAA
Success Criteria
1.4.4 Resize text
Learn how to make your website 1.4.4 compliant
-
LEVELAA
Success Criteria
1.4.5 Images of Text
Learn how to make your website 1.4.5 compliant
-
LEVELAAA
Success Criteria
1.4.6 Contrast (Enhanced)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
1.4.7 Low or No Background Audio
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
1.4.8 Visual Presentation
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
1.4.9 Images of Text (No Exception)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAA
Success Criteria
1.4.10 Reflow
Learn how to make your website 1.4.10 compliant
-
LEVELAA
Success Criteria
1.4.11 Non-text Contrast
Learn how to make your website 1.4.11 compliant
-
LEVELAA
Success Criteria
1.4.12 Text Spacing
Learn how to make your website 1.4.12 compliant
-
LEVELAA
Success Criteria
1.4.13 Content on Hover or Focus
Learn how to make your website 1.4.13 compliant
-
-
-
Principle
2 Operable
User interface components and navigation must be operable.
-
Guideline
2.1 Keyboard Accessible
Make all functionality available from a keyboard.
-
LEVELA
Success Criteria
2.1.1 Keyboard
Learn how to make your website 2.1.1 compliant
-
LEVELA
Success Criteria
2.1.2 No Keyboard Trap
Learn how to make your website 2.1.2 compliant
-
LEVELAAA
Success Criteria
2.1.3 Keyboard (No Exception)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELA
Success Criteria
2.1.4 Character Key Shortcuts
Learn how to make your website 2.1.4 compliant
-
-
Guideline
2.2 Enough Time
Provide users enough time to read and use content.
-
LEVELA
Success Criteria
2.2.1 Timing Adjustable
Learn how to make your website 2.2.1 compliant
-
LEVELA
Success Criteria
2.2.2 Pause, Stop, Hide
Learn how to make your website 2.2.2 compliant
-
LEVELAAA
Success Criteria
2.2.3 No Timing
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.2.4 Interruptions
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.2.5 Re-authenticating
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.2.6 Timeouts
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
2.3 Seizures and Physical Reactions
Do not design content in a way that is known to cause seizures or physical reactions.
-
LEVELA
Success Criteria
2.3.1 Three Flashes or Below Threshold
Learn how to make your website 2.3.1 compliant
-
LEVELAAA
Success Criteria
2.3.2 Three Flashes
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.3.3 Animation from Interactions
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
2.4 Navigable
Provide ways to help users navigate, find content, and determine where they are.
-
LEVELA
Success Criteria
2.4.1 Bypass Blocks
Learn how to make your website 2.4.1 compliant
-
LEVELA
Success Criteria
2.4.2 Page Titled
Learn how to make your website 2.4.2 compliant
-
LEVELA
Success Criteria
2.4.3 Focus Order
Learn how to make your website 2.4.3 compliant
-
LEVELA
Success Criteria
2.4.4 Link Purpose (In Context)
Learn how to make your website 2.4.4 compliant
-
LEVELAA
Success Criteria
2.4.5 Multiple Ways
Learn how to make your website 2.4.5 compliant
-
LEVELAA
Success Criteria
2.4.6 Headings and Labels
Learn how to make your website 2.4.6 compliant
-
LEVELAA
Success Criteria
2.4.7 Focus Visible
Learn how to make your website 2.4.7 compliant
-
LEVELAAA
Success Criteria
2.4.8 Location
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.4.9 Link Purpose (Link Only)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.4.10 Section Headings
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
2.5 Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.
-
LEVELA
Success Criteria
2.5.1 Pointer Gestures
Learn how to make your website 2.5.1 compliant
-
LEVELA
Success Criteria
2.5.2 Pointer Cancellation
Learn how to make your website 2.5.2 compliant
-
LEVELA
Success Criteria
2.5.3 Label in Name
Learn how to make your website 2.5.3 compliant
-
LEVELA
Success Criteria
2.5.4 Motion Actuation
Learn how to make your website 2.5.4 compliant
-
LEVELAAA
Success Criteria
2.5.5 Target Size
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
2.5.6 Concurrent Input Mechanisms
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
-
Principle
3 Understandable
Information and the operation of user interface must be understandable.
-
Guideline
3.1 Readable
Make text content readable and understandable.
-
LEVELA
Success Criteria
3.1.1 Language of Page
Learn how to make your website 3.1.1 compliant
-
LEVELAA
Success Criteria
3.1.2 Language of Parts
Learn how to make your website 3.1.2 compliant
-
LEVELAAA
Success Criteria
3.1.3 Unusual Words
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
3.1.4 Abbreviations
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
3.1.5 Reading Level
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
3.1.6 Pronunciation
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
3.2 Predictable
Make Web pages appear and operate in predictable ways.
-
LEVELA
Success Criteria
3.2.1 On Focus
Learn how to make your website 3.2.1 compliant
-
LEVELA
Success Criteria
3.2.2 On Input
Learn how to make your website 3.2.2 compliant
-
LEVELAA
Success Criteria
3.2.3 Consistent Navigation
Learn how to make your website 3.2.3 compliant
-
LEVELAA
Success Criteria
3.2.4 Consistent Identification
Learn how to make your website 3.2.4 compliant
-
LEVELAAA
Success Criteria
3.2.5 Change on Request
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
Guideline
3.3 Input Assistance
Help users avoid and correct mistakes.
-
LEVELA
Success Criteria
3.3.1 Error Identification
Learn how to make your website 3.3.1 compliant
-
LEVELA
Success Criteria
3.3.2 Labels or Instructions
Learn how to make your website 3.3.2 compliant
-
LEVELAA
Success Criteria
3.3.3 Error Suggestion
Learn how to make your website 3.3.3 compliant
-
LEVELAA
Success Criteria
3.3.4 Error Prevention (Legal, Financial, Data)
Learn how to make your website 3.3.4 compliant
-
LEVELAAA
Success Criteria
3.3.5 Help
This criteria is not required for WCAG 2.1 Level AA compliance.
-
LEVELAAA
Success Criteria
3.3.6 Error Prevention (All)
This criteria is not required for WCAG 2.1 Level AA compliance.
-
-
-
Principle
4 Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
-
Guideline
4.1 Compatible
Maximize compatibility with current and future user agents, including assistive technologies.
-