Write descriptive headings and labels

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 things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

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)

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

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.