Always give a page a proper hierarchy
Accessibility
Page hierarchy is created by using a set of nesting subheadings. These create a way a page can be read by a screen reader, or by a user who scans the page visually. It allows people to understand the importance and types of information on a page.
Reason
- Often those using screen readers or other assistive technology browse from subheading to subheading. When they reach a relevant subheading, they select this, and the screen reader then hops from subheading to subheading within that section until they find the information they need.
- As some individuals who use a screen reader do not have visual disabilities it is important to understand you are helping others – not just those with that type of diability.
- In fact, the structure of a page with a correct hierarchy also gives clues to how the information is organized, placing less cognitive load on a user. While this can help users with a learning disability, or a neuro-developemental disability, it assists all users.
Best practice
The way to organize information using subheaders can easily seen in this example:
Heading 1 Places to eat [The Page as a whole]
- Heading 2 On-campus
- Heading 3 Mike’s Place
- Heading 3 Oliver’s
- Heading 3 The Garden Spot
- Heading 2 Off-campus
- Heading 3 Burger King
- Heading 3 Pizza Nerds
Heading 1 for a page is always the page title and there can only be one instance of this.
If you were using a screen reader and wanted to eat off-campus you would skip from the first Heading 2 section to the second (“Off-campus”) and skip through its subheadings until you heard the name of the restaurant you want to eat at. You could then access all the information listed there.
On a page accessed visually there is an immediately visible cue: the subheadings are different sizes – the lower down the hierarchy, the smaller the subheading.
Example of less accessible practices
There are a few different ways in which use of hierarchy can make life more difficult for people to success information.
- One is by having no hiearchy. From people in a hurry to those with visual, educational or neural developmental disorders, the non-organization of information in a page means a lot more delay, cognitive load, and work.
- Another way is if the hierarchy is incorrect. There are two ways this can manifest:
- the hierarchy skips a level
- the hierarchy is in the incorrect order
Skipping a level would look like:
Heading 1 Places to eat
- Heading 3 On-campus
- Heading 4 Mike’s Place
The hierarchy being in the incorrect order would look like this, for example:
Heading 1 Places to eat
- Heading 3 On-campus
- Heading 2 Mike’s Place
Instantly, the user will be confused by what they see or hear.
See also: Subheadings must be proper subheadings
Pro tip
You can view the structure of the page in cuTheme. When editing a page or post, click on the Document view icon in the top left. It is a black square with three white lines on it. Next click on the Outline tab. You will see something that looks like this:
Additional benefits
- Usability: This features helps users quickly scan a page for content they need.
- SEO: Google and other search engines place a huge emphasis on pages with proper headings and hierarchy to prioritize pages in their rankings.
- Marketing: If people can find content quickly and easily there is more chance they will apply to Carleton of use the university’s services.
What WCAG says
WCAG outlines the use of headings in this section of their website. (They refer to headings as “h1” to “h6”.)
(Be sure to learn more about errors and alerts.)
From WCAG:
“Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator… if a document can be broken up into sections with headings, it facilitates both understanding and navigation.”