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 within a page (for everyone – not just those with disability.)
If a subheading is created only visually (by using bolded text) it is invisible as a heading to a screen reader. Also, as there is only one size of text available, it cannot provide any visual clues as to the position of this information in the hierarchy of the page.
Best practice
(Note: An additional benefit to proper subheadings is shown with the link in the previous sentence – you can link directly to the section of the page you want people to read because it has a subheading.)
We have also 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. This page contains a lot of information, but not organized under proper subheadings. What look like subheadings at first glance are just items of bold text.
If a screen reader user came to that page looking for a list of the most famous books by Arundhati Roy, they must listen to the entire page read to them before they reached the list at the bottom of the page.
Note also on that page, there are two main sections that are not differentiated from their subsections: Biography and Writing career. These should have been 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 the hierarchy of the inforamtion available, and its organization. People will find what they need very quickly in comparison to a page with no headings or unordered hierarchy.
- 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 will find what they need very quickly, they will come away with a good impression, or become more likely to stay longer on the site to 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.”