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