Research Guides: LibGuides Accessibility: Heading Levels & Logical Order

Overview

Headings give structure to a page and simplify page readability

Headings are used to separate content on a web page into meaningful sections. Site visitors look at headings when scanning a page for content. They can easily determine where new topics are introduced and find what they’re interested in. Headers describe what’s on your page, so make sure they’re descriptive and compelling. Well structured headings also improve search engine optimization (UNC School of Medicine's Web Guide on Digital Accessibility, 2023).

Well-written headings are an important tool for helping users scan quickly.
The ability to scan quickly is particularly important for older adults because they tend to stop scanning and start reading more frequently. If headings are not descriptive or plentiful enough, the user may start reading in places that do not offer the information they are seeking, thereby slowing them down unnecessarily.
Use unique and descriptive headings – ensure that headings are descriptive and relate to the content they introduce. If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference.

Heading levels are used in the body of the text, and in logical order

Heading levels can be used by screen readers like a table of contents for your page, allowing users to scan and skip content more easily.
Double check that your box titles are all visible (no floating box titles).
Box titles are H2, any subheadings within that content box should go in order starting from H3, H4, H5.
Use the rich text editor to select the proper heading level.

Use headings for structure, not styling

Do not use a header based on how it looks visually (e.g., size). Headers used out of order can confuse screen reader users.
Never use text styles (bold, italicize, underline, etc.) in lieu of headings. This removes key functionality that screen reader users depend on. One of the most common accessibility mistakes is making text bold instead of properly using a header.

Examples

Heading 1 = Tab/page title

Heading 2 = Box title

Heading 3

Is the first available heading level in the rich text editor. You can also include a list:

List item
List item

Or you can include a numbered list:

Item 1
Item 2

Heading 4

This will add a sub-section under heading 3.

Heading 3

Additional content

Heading 4

Sub-section

Another list:

List item
- List sub item
- List sub item
List item

Heading 5

Sub-sub section

Heading 6

Sub-sub-sub section

LibGuide Help Center resources

Add Rich Text / HTML content & images to a guide
The Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that works much like a word processor. When editing a Rich Text/HTML content item, it will allow you to easily add and format text, images, and tables. To make advanced customizations, you can even switch to the Source mode to view the underlying HTML code.
Accessibility options
The Accessibility tab (CMS only) allows you to enable (or disable) the use of the H1 and H2 heading choices in the rich text editor. By default, these heading choices are disabled so that the first heading choice is the H3 tag. This is done to preserve web-accessible formatting—and WCAG 2.1 compliance.

Additional resources

WebAIM: Semantic structure: Regions, headings, and lists
A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading.
UMN: Headings
This article shows you how to format headings to improve the reading experience of all your readers, whether they read with their eyes or with their ears using a screen reader.
UMN: Lists
Lists are structured ways of organizing content. Presenting a “wall of text” in a document or website can discourage reading. Instead, present key concepts, sequences, and like items of more than two as lists where possible.
W3C: Providing descriptive headings
Descriptive headings help users find specific content and orient themselves within a web page. Consider putting the most important information at the beginning of each heading (e.g., "disaster preparation" and "flood preparation," not "preparation for disasters" and "preparation for floods").