Website Accessibility Guide

Making Your HubSpot Website WCAG 2.1 Compliant

2.4.6 Headings and Labels

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELAA
Success Criteria

2.4.6 Headings and Labels

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Navigable
Provide ways to help users navigate, find content, and determine where they are.

Headings and labels describe topic or purpose.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is not resolved with accessiBe or HubSpot and requires manual management.

Understanding 

Headings and labels should be clear and follow a hierarchy. Headings break down the content into sections. The user should be able to navigate the page using these headings. Headings do not need to be lengthy. They can be one word or even one letter! 

This success criteria does not require labels but if they are used, they must be clear and descriptive. See 3.3.2: Labels or Instructions for more information on labels. 

 

Examples and Tips 

Example 1:

A guide on business travel. 

A guide on business travel has the following headings: Introduction, What Type Of Business Traveler Are You?, Before You Depart, Do These Three Things, etc. The section titles are clear and descriptive. The user can easily sort through this information. 

<h1>The Ultimate Guide For Business Travel</h1>
<h2>What Type Of Business Traveler Are You?</h2>
<h3>The Planner</h3>
<h3>The Worrier</h3>
<h3>The Homebody</h3>

<h2>Before You Depart</h2>
<h3>Set Goals</h3>
<h3>Map Your Preferences</h3>

 

Example 2:

A form with input fields labeled "First" Name and "Last Name"

Contact-Form-Example

Warnings

When using callouts or emphasizing a line of text for aesthetic purposes, avoid using headings. Use a class instead!

<p class="callout">example</p>

How accessiBe Helps

*accessiBe does not provide an acceptable and fully-compliant solution.

Clear, descriptive headings and labels: it’s that simple to stay ADA-compliant, and it's also a necessary practice for usability in general.

For more information, please visit the official W3C article: Understanding 2.4.6 Headings and Labels


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

Let us know if we can help you address this specific WCAG Recommendation.

Recent Morey Creative Studios Blog Articles