Website Accessibility

A Step-by-Step Guide to Making Your HubSpot Website WCAG 2.1 Compliant

Today, we make a commitment.

The surge in Americans with Disabilities Act (ADA)-based lawsuits reinforces the importance of taking collective action to correct the failures of modern web design. That’s because for years web developers have prioritized search engine optimization over human optimization, increasing conversions instead of access, and designing for mobile, not the immobile.

Although solutions existed for some time, they became secondary concerns. Today, we change that.

We commit to understanding and delivering an accessible web experience for all, regardless of physical or mental abilities.

That is our commitment and we ask that you join us. It’s not going to be easy. Understanding web accessibility can be intimidating, especially the deeper you get. Getting to a point where you’re comfortable explaining the ins and outs of web accessibility is going to take focus and patience and plenty of time and resources. Most of all, it’s going to take commitment.

Starting today, we accept the responsibility of providing a fair and equally accessible web experience for all, and together, take steps to Grow for Good™. Whatever your motivations, we thank you for making this a priority.


How To Use This Guide

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. 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. Some of the WCAG recommendations are easily achieved with a basic understanding of HTML. Others require an extremely high level of coding and are practically impossible without the assistance of third-party software and services. The primary tool that resolves many of the more challenging criteria is a service called accessiBe.

accessiBe

accessiBe is a third-party service that has a minimum expense of around $500 per year. Without it, some of the more challenging level A and AA success criteria are difficult to resolve. The solutions recommended in this guide are written assuming a website is leveraging an active accessiBe subscription, which can be purchased here. Morey Creative Studios is an affiliate of accessiBe.com and is compensated for traffic sent to their website that results in business.

We've also provided a checklist to use along with this guide to track your progress. The checklist is a Google Sheet that can be copied locally and shared with a team to update as they go.

Each WCAG recommendation is organized below. The items that need to be addressed are coded in colors and symbols.

  • A bright green check indicates "Resolved completely with accessiBe or HubSpot"
  • A mustard-yellow dash indicates "Partially resolved with accessiBe or HubSpot but requires some manual intervention"
  • A bright red "X" indicates "Not resolved with accessiBe or HubSpot and requires full manual management"
  • A grey circle indicates "Not applicable for level AA compliance"

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.

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.

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.

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.

Principle

2 Operable

User interface components and navigation must be operable.

Guideline

2.1 Keyboard Accessible

Make all functionality available from a keyboard.

LEVELAAA
Success Criteria

2.1.3 Keyboard (No Exception)

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

Guideline

2.2 Enough Time

Provide users enough time to read and use content.

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.

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.

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.

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.

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.

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.

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.

    Keep Track of Your Progress

    Download the WCAG 2.1 Compliance Checklist

    Checklist Video of What to Expect

    Video: What to Expect If You Download this Checklist

    Checklist Download