Writing Accessible Heading tags

Some rules when writing headings:

  • Headings should only be placed above content.
  • Headings should describe the content. A user should be able to know what the next paragraph is about by reading the heading.
  • Headings should use the appropriate tags.<h1>, <h2>, <caption> ,<legend>

Some often seen issues

Headings without content

A problem that sometimes occurs can be that heading tags are used for styling rather than describing structure.

<div>
<h1>Tomatoes</h1>
</div>

Many developers look at elements as a means to set font size. Headings aren’t intended for display purposes (though browsers use them for that), they are used by screen readers and other assistive technology to quickly navigate the page and determine the document structure.

A user with a screen reader might navigate through the page structure and will hear “Tomatoes”. The rest of this section does not have any content about tomatoes so it is irrelevant for the user. Changing the heading tag to a paragraph tag will remove it from heading navigation.

<div>
<p>Tomatoes</p>
</div>

Headings as subtitle

Another example of the element used for styling rather than describing structure.

<div>
<h1>Tomatoes</h1>
<h2>Juicy and red.</h2>
</div>

The subtitle here uses the <h2> tag. This example is even worse than the last one as the title <h1> does not have any content here and so does the <h2>. Screen readers(As previously stated) use heading elements to navigate and will expect content after navigating.

The content of the <h2> element is describing the <h1>. This would be an appropriate place to just use a <p> tag.

<div>
<h1>Tomatoes</h1>
<p>Juicy and red.</p>
</div>

Undescriptive headings

Another issue is that sometimes headings don’t describe the content beneath.

<div>
<h1>Tomatoes</h1>
<p>If you would like to order tomatoes.</p>
</div>

A user will determine what parts of the page to read based on the heading elements. If a user wants to learn how to order tomatoes and hears “Tomatoes” while navigating the headings, then he will probably skip this part and look elsewhere. Changing the heading to contain a descriptive text will fix the issue.

<div>
<h1>Ordering tomatoes</h1>
<p>If you would like to know how to order. Ask your to the contact page and help us out!</p>
</div>

Now the user will hear “Ordering tomatoes” and knows that’s the content he wants to read.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store