{"id":20930,"date":"2024-12-16T11:34:59","date_gmt":"2024-12-16T16:34:59","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?page_id=20930"},"modified":"2025-06-09T08:15:21","modified_gmt":"2025-06-09T12:15:21","slug":"subheadings-must-be-proper-subheadings","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/subheadings-must-be-proper-subheadings\/","title":{"rendered":"Create proper subheadings"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Create proper subheadings\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Accessibility<\/h2>\n\n\n\n

Because subheadings are key to navigable, accessible pages, they must be created correctly, not just by bolding text.<\/p>\n\n\n\n

Reason<\/h2>\n\n\n\n

Subheadings are critical to accessible navigation within a page (for everyone – not just those with disability.)<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Best practice<\/h2>\n\n\n\n

(Note<\/strong>: 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<\/em> it has a subheading.)<\/p>\n\n\n\n

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

This page looks like this in the outline view of the page hiearchy:<\/p>\n\n\n\n

\"An<\/figure>\n\n\n\n

Example of less accessible practices<\/h2>\n\n\n\n

We have created an example page for you to view<\/a>. 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Note also on that page, there are two main sections that are not differentiated from their subsections: Biography<\/strong> and Writing career<\/strong>. These should have been heading 2<\/strong>s, with everything else as a heading 3<\/strong>. (See Best Practice above.)<\/p>\n\n\n\n

The hierarchy here in the outline shows how poor and scant the structure of the page is:<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Additional benefits<\/h2>\n\n\n\n