Write descriptive headings and labels

Example of descriptive headings (accessible) vs. vague headings (inaccessible) for a smoothie recipe
Image description: Accessible and inaccessible comparison of headings and labels. The accessible example says, "(heading) Ingredients: mangos, yogurt. (heading) Instructions: use a blender to make a delicious smoothie." The inaccessible example has the same text but with headings that say, "Yummy" and "Wow fun!!"

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Descriptive headings and labels help organize and describe the content to screen reader users and people with cognitive disabilities.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.

Screen reader users are better able to interact with a page when headings and labels are clear and descriptive. These are also accessible for people with reading or memory disabilities because they make reading more organized and predictable.

This references WCAG criteria 2.4.6 Headings and Labels (Level AA) and 2.4.10 Section Headings (Level AAA)

How to Implement This

This is tied to the following guidelines:


Taking into account the other guidelines, here are the steps you can take to implementing this:

  • Divide the content into sections
  • Give each section a heading that describes the essence of its content
  • Make sure the headings are written in order (h1, h2, h3, etc.) without skipping or going in reverse
  • Give each interactive element a label that describes what kind of user input it’s asking for (e.g. name, date, time, etc.)
  • Make sure the label is both visual and programmatic


A long page full of content can be overwhelming to everyone, especially to screen readers. Breaking up content into sections and providing headings help people navigate and understand where they are. Screen reader users often use headings to skip from one section to the next, so having descriptive headings is very beneficial.


Process of breaking page content into sections with headings
Image description: 3 phases of work on a webpage, (1) it’s one long page (2) it’s broken up into sections and (2) each section now has a heading


Here is an example of descriptive headings written in proper order:

<h1>What I Do When I Have the Munchies</h1>
<h2>Eat Everything I Can Find</h2>
<h2>Cry and Mope for Food</h2>
<h3>When Crying Works</h3>
<h3>When Crying Doesn’t Work</h3>
<h2>The Best Cure: The Bagel Shop</h2>


Here is an example of a properly labeled form input, as noted by MDN Web Docs:

<input id="snack-1" type="checkbox" value="banana"/>
<label for="snack-1">Bananas are my favorite</label>


Some people get rid of the label entirely and only use a placeholder to prompt users. While the thought of injecting more personality is great, this leads to confusion when users move focus to the text input because the placeholder disappears. Now it doesn’t have a label for Blind or sighted people.


Comparison of a text input with a label (accessible) vs. no label and a placeholder (inaccessible)
Image description: Comparison of an accessible and inaccessible text input. The accessible version is labeled “Favorite Snack” which is always visible. The inaccessible version has no label and a placeholder that says, “What’s your favorite snack?” in lighter text, which disappears on focus.


Placeholders are also potentially confusing because sometimes people can mix them up with actual content. It’s that feeling of, “Did I fill that out already?” that can come especially with long forms. It’s best to avoid them or use them sparingly. And no matter what, always use a label.


How to Test This

Automated testing like Deque Axe, IBM Accessibility Assessment, tota11y, WebAIM WAVE all test for the presence of headings and labels (but not necessarily the quality of how they’re written).

Manual user testing and content evaluation is required to determine if they are properly descriptive.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.