The Web Content Accessibility Guidelines (WCAG) is a list of recommendations to address known challenges people with disabilities face on the internet. Organized by levels, businesses should aspire to be WCAG level AA-compliant to deliver an appropriate experience for all users. Unfortunately, the WCAG can be a bit technical and overwhelming. This guide is intended to simplify each recommendation and suggest possible solutions.

HubSpot

This guide is written specifically for the HubSpot CMS. 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