Headings | University of Montevallo

Overview

Headings help users understand the information contained in web pages and how it is organized. When headings are clear and descriptive, users can find the information they seek more easily and understand the relationships between the different parts of the content.

Headings have a vital role in webpages. Sighted users benefit from headings by targeting the specific information they need. In the same way, users operating accessibility tools such as screen readers can cycle through headings to target specific content.

In order to meet accessibility standards, it is best to use a descending HTML tag hierarchy from H1 to H6 following the information importance, rather than for pure formatting purposes. In many cases, this will make your document easier to understand as well.

Make Headings Accessible

By default, the Text field under the Banner Section has an H1-style header assigned. Therefore, every subheading should consequently follow an H2 and so forth in a descending order, as in the example listed below:

Heading 1 – Accessible Headings
Heading 2 – Digital Accessibility
Heading 3 – Overview
Heading 4 – Make your site Accessible
Heading 5 – Tricks & Tips
Heading 6 – Sources

On our site, all the headings have been predefined by color and size, following the compliant heading order. Furthermore, most of our blocks have also been assigned to an H2 heading style to maintain accessibility, except blocks three, four, and five.

We can achieve accessibility in two ways.

In a single text editor, you can reorganize the headings from the text format dropdown.
If using block sections, you can add a block two with a heading style and fill in the title section. This will automatically assign this header to an H2 tag. Consequently, you can add a block three with heading style (H3), if needed, but not a block four (H4) to avoid breaking the descending heading order. To view a full example, feel free to review the web style guide.

Headings should form an outline of the page content (Heading 1 for the main heading, Heading 2 for the first level of sub-headings, etc.). This enables screen reader users to understand how the page is organized. If the heading structure skips or reverses heading levels, this breaks the page outline. Screen readers also have features that enable users to jump quickly between headings with a single keystroke. This functionality makes it possible for screen reader users to navigate within a page with the same efficiency as sighted users.

Benefits

Descriptive headings are especially helpful for users who have disabilities that make reading slow, and for people with limited short-term memory. These people benefit when section titles make it possible to predict what each section contains.
When headings and labels are also correctly marked up and identified in accordance with 1.3.1 Info and Relationships, this success criterion helps people who use screen readers by ensuring that labels and headings are clearer when presented in a different format — for example, in an automatically generated list of headings, a table of contents, or when jumping from heading to heading within a page.

Examples

A news site: The home page of a news site lists the headlines for the top stories of the hour. Under each heading are the first 35 words of the story and a link to the full article. Each headline gives a clear and accurate idea of the article’s subject.
A guide on how to write well: A guide on writing contains the following section titles: How To Write Well, Cut Out Useless Words, Identify Unnecessary Words, and so on. The section headings are clear and concise and the structure of the information is accurately reflected in the structure of the headings.
Consistent headings in different articles: A website contains papers from a conference. Submissions to the conference are required to have the following organization: Summary, Introduction, [other sections unique to this article], Conclusion, Author Biography, Glossary, and Bibliography. The title of each web page clearly identifies the article it contains, creating a useful balance between the uniqueness of the articles and the consistency of the section headings.
A form asking for the name of the user: A form asks for the name of the user. It consists of two input fields to ask for the first and last name. The first field is labeled First name, the second is labeled Last name.
A search field labeled by a magnifying glass icon: A search text input is followed by a button containing a magnifying glass icon that activates the search function. The icon has the string “search” as programmatically determinable label.