{"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":"2026-07-22T09:16:26","modified_gmt":"2026-07-22T13:16:26","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<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\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<h2 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>Because subheadings are key to navigable, accessible pages, they must be created correctly, not just by bolding text.<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<p>Subheadings are critical to accessible navigation for everyone, not just those with a disability.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<p>We have created <a href=\"https:\/\/carleton.ca\/webaccessibility\/example-arundhati-roy\/\">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<p>This page looks like this in the outline view of the page hiearchy:<\/p>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"564\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/good-example-of-page-hierarchy-320x564.png\" alt=\"An example of a properly nested hierarchy. Visit a sample of page by clicking on the link before this image\" class=\"wp-image-21229\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/good-example-of-page-hierarchy-320x564.png 320w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/good-example-of-page-hierarchy-512x903.png 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/good-example-of-page-hierarchy-768x1354.png 768w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/good-example-of-page-hierarchy.png 770w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<h2 id=\"example-of-less-accessible-practices\" class=\"wp-block-heading\">Example of less accessible practices<\/h2>\n\n\n\n<p>We have created <a href=\"https:\/\/carleton.ca\/webaccessibility\/example-of-a-page-with-poor-page-structure\/\" target=\"_blank\" rel=\"noreferrer noopener\">an example page for you to view<\/a>. It contains a lot of information, but it is not organized under proper subheadings. What look like subheadings are just bold text.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Note also that <strong>Biography<\/strong> and <strong>Writing career<\/strong> are not differentiated from their subsections. These should be <strong>heading 2<\/strong>s, with everything else as a <strong>heading 3<\/strong>. (See Best Practice above.)<\/p>\n\n\n\n<p>The hierarchy here in the outline shows how poor and scant the structure of the page is:<\/p>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"542\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/he-chose-poorly-320x542.png\" alt=\"A poor structure. Very few headings and some are out of order.\" class=\"wp-image-21231\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/he-chose-poorly-320x542.png 320w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/he-chose-poorly-512x866.png 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/he-chose-poorly-768x1300.png 768w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/he-chose-poorly.png 780w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"additional-benefits\" class=\"wp-block-heading\">Additional benefits<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong class=\"myprefix-text-bold\">Usability<\/strong>: Headings provide instant, subconscious cues to hierarchy and organization, allowing people to find information quickly.<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">SEO<\/strong>: Search engines rely on &#8211; and reward &#8211; the presence of this hierarchy on the page. It ranks pages with sub-headings more than unordered\/disordered content.  <\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">Marketing<\/strong>: Because people find what they need quickly, they are more likely to stay longer and find out more about Carleton.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"what-wcag-says\" class=\"wp-block-heading\">What WCAG says<\/h2>\n\n\n\n<p>WCAG outlines the use of headings in&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Techniques\/html\/H42.html\">this section of their website<\/a>. (They refer to headings as \u201ch1\u201d to \u201ch6\u201d.)<\/p>\n\n\n\n<p>(Be sure to&nbsp;<a href=\"https:\/\/app.pope.tech\/result-documentation\">learn more about errors and alerts<\/a>.)<\/p>\n\n\n\n<p>From WCAG:<\/p>\n\n\n\n<p>\u201cHeading 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\u2026 if a document can be broken up into sections with headings, it facilitates both understanding and navigation.\u201d<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/section-headings\">Learn more about WCAG says about this issue<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[18,14,21,23],"class_list":["post-20930","page","type-page","status-publish","hentry","cu_page_type-accessibility","cu_page_type-general","cu_page_type-page-organization","cu_page_type-text-and-hyperlinks"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/comments?post=20930"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20930\/revisions"}],"predecessor-version":[{"id":21482,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20930\/revisions\/21482"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=20930"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=20930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}