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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

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 partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

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. 

How AudioEye Helps

Through automated and manual processes, AudioEye evaluates and remediates heading and label issues, which are one of the most consistently pervasive accessibility issues addressed by the AudioEye solution.

As with any issue AudioEye finds pervasive on any given site, AudioEye will alert Managed customers when 2.4.6 violations are detected. For instances where Managed customers do have full control to remediate the issue, AudioEye will collaborate with accessibility stakeholders to instruct them on what specific changes are required, why the changes are important, and how the changes can be implemented.

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

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.

Recent Morey Creative Studios Blog Articles