Use labels and headings to make your web content easier to understand

What do we mean by headings and labels? 

According to the W3C’s Web Content Accessibility Guidelines (WCAG)(opens in a new tab), a label is defined as text or other content with a text alternative that helps identify a component of your webpage content, while a heading is a descriptive element that helps break up content into discrete sections.

Success Criterion 2.4.6: Headings and Labels(opens in a new tab) does not require organizations to use headings or labels to achieve level AA conformance with the WCAG. However, when headings or labels are used, this criterion requires that they be clear and descriptive.

A table of contents with five chapters next to an icon of a brain

Why are headings and labels important? 

According to research from Nielsen Norman Group, most web users don’t read web pages word-by-word(opens in a new tab): instead, they scan through the page and pick out individual words and sentences to get the information they want. When used appropriately, headings and labels can make it easier for users to understand and absorb the content of a page — contributing to a smooth user experience.

Headings and labels can be even more important for web users with disabilities. For example, descriptive headings can help alleviate the mental workload for people with limited short-term memory, and make it easier for users who read slowly to skip ahead quickly to the content they’re looking for.

As well as making headings and labels clear and concise, it’s also important to tag them so that they can be processed effectively by assistive technologies. This is particularly valuable when the content is to be used for navigation purposes, such as a table of contents with hyperlinks to each heading on a webpage — as described in Success Criterion 1.3.1: Info and Relationships(opens in a new tab).

If you don’t use headings or labels correctly, you could potentially be excluding visitors with disabilities from engaging with your website. This is a potential violation of the Americans With Disabilities Act (ADA)(opens in a new tab), which could expose your business to legal, financial, and reputational risks.

A mobile phone browser that shows a vertical stack of heading ranks from H1 to H3, next to an accessibility shield and a magnifying glass.

What can I do to fix the issue? 

Some issues with headings and labels are relatively straightforward to identify. For example, if you have pages with more than 100 words of content that are not broken down into individual sections, consider whether adding headings will improve the readability and navigability of the page.

Other issues may be more difficult to detect. If some of the pages on your website use inconsistent HTML heading styles, the issue might not be immediately obvious unless you look at the code: for example, a page that skips from heading style <h1> to <h4> and then back to <h3>. This kind of problem commonly crops up when headings are used for visual style rather than for their intended structural purpose.

While issues with HTML tagging are theoretically possible to detect automatically, evaluating the effectiveness of your headings and labels depends on human judgment. While the WCAG offers some advice to writers (such as putting the most important information at the beginning of each heading to help users skim through quickly), it doesn’t offer hard and fast rules that will guarantee conformity.

The good news is that AudioEye combines automated scanning and remediation technology with human-led testing and custom remediation. By subscribing to the AudioEye service, you’ll gain access to expert insights into common accessibility issues — including challenges with headings and labels — and advice on how to fix them.