This page is in progress -
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.
How to Implement This
This is tied to the following guidelines:
- Define information, structure, and relationships in markup
- Label elements and give instructions
- Ensure the programmatic label matches the visual label
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.
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.
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
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.