Create proper subheadings

Accessibility

Because subheadings are key to navigable, accessible pages, they must be created correctly, not just by bolding text.

Reason

Subheadings are critical to accessible navigation for everyone, not just those with a disability.

If a subheading is created only visually using bolded text, it is invisible as a heading to a screen reader. With only one size of text available, it also provides no visual clues about its place in the page hierarchy.

Best practice

We have created a sample page for you to illustrate a well structured page looks like. In this page, you can click the icon near the top left to view the structure of the page.

This page looks like this in the outline view of the page hiearchy:

An example of a properly nested hierarchy. Visit a sample of page by clicking on the link before this image

Example of less accessible practices

We have created an example page for you to view. It contains a lot of information, but it is not organized under proper subheadings. What look like subheadings are just bold text.

A screen reader user looking for the most famous books by Arundhati Roy would have to listen to the entire page before reaching the list at the bottom.

Note also that Biography and Writing career are not differentiated from their subsections. These should be heading 2s, with everything else as a heading 3. (See Best Practice above.)

The hierarchy here in the outline shows how poor and scant the structure of the page is:

A poor structure. Very few headings and some are out of order.

Additional benefits

Usability: Headings provide instant, subconscious cues to hierarchy and organization, allowing people to find information quickly.
SEO: Search engines rely on – and reward – the presence of this hierarchy on the page. It ranks pages with sub-headings more than unordered/disordered content.
Marketing: Because people find what they need quickly, they are more likely to stay longer and find out more about �Ӱ�ԭ��.

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