Website Accessibility Guide

2.4.6 Headings and Labels

Written by MCS Accessibility Team | Jun 1, 2020 10:48:00 PM

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"

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>