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 ��’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.

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:

The outline displays a list of all the section sub-headings on the page, indented if they are sub-sections of a heading.

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 �Ӱ�ԭ�� of use the university’s services.

What WCAG says

WCAG outlines the use of headings in . (They refer to headings as “h1” to “h6”.)

(Be sure to .)

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.”