Making Your HubSpot Website WCAG 2.1 Compliant

2.4.6 Headings and Labels

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

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.

LEVELAA
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

Understanding 2.4.6 Headings and Labels

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.

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. 

Recommended Solutions

  • Example 1:  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>
     
    <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"

Screenshot of a contact form showing first name, last name, email and phone form fieldsWarnings

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

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

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


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

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