{"id":20917,"date":"2024-12-16T11:34:57","date_gmt":"2024-12-16T16:34:57","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?page_id=20917"},"modified":"2026-07-15T08:38:05","modified_gmt":"2026-07-15T12:38:05","slug":"a-page-must-have-a-proper-hierarchy","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/a-page-must-have-a-proper-hierarchy\/","title":{"rendered":"Always give a page a proper hierarchy"},"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                        Always give a page a proper hierarchy\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>Using clear headings helps make web pages easier to use for people who rely on screen readers or other assistive tools. Headings act like signposts, showing how the page is organized and helping people move around quickly.<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<p>People don\u2019t read every word on a page\u2014they scan to find what they need. Headings give structure to the content so users can quickly understand what\u2019s on the page and where to go next. Assistive technologies also depend on headings to help users jump between sections.<\/p>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use one main heading (H1) for the page title. (We do this for you in the template)<\/li>\n\n\n\n<li>Break content into sections with headings (H2, H3, etc.).<\/li>\n\n\n\n<li>Keep headings short and clear so people can scan them.<\/li>\n\n\n\n<li>Follow a logical order (don\u2019t jump from H1 to H3).<\/li>\n\n\n\n<li>Make sure each heading matches the content that follows.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"example-of-poor-practice\" class=\"wp-block-heading\">Example of poor practice<\/h2>\n\n\n\n<p>Poor practice includes a page uses headings out of order or skips levels.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"648\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/Screenshot-2026-07-15-at-08.36.24-1024x648.png\" alt=\"In the Outline section of a page you can see if there are errors in the page hierarchy\" class=\"wp-image-21476\" style=\"width:450px\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/Screenshot-2026-07-15-at-08.36.24-1024x648.png 1024w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/Screenshot-2026-07-15-at-08.36.24-512x324.png 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/Screenshot-2026-07-15-at-08.36.24-320x203.png 320w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/Screenshot-2026-07-15-at-08.36.24-768x486.png 768w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/Screenshot-2026-07-15-at-08.36.24.png 1112w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 id=\"additional-benefits\" class=\"wp-block-heading\">Additional benefits<\/h2>\n\n\n\n<p>Clear headings don\u2019t just help with accessibility\u2014they also improve how people interact with your content overall.<\/p>\n\n\n\n<h3 id=\"usability\" class=\"wp-block-heading\">Usability<\/h3>\n\n\n\n<p>People can quickly scan the page and find what they need without reading everything. This reduces frustration and saves time.<\/p>\n\n\n\n<h4 id=\"seo\" class=\"wp-block-heading\">SEO<\/h4>\n\n\n\n<p>Search engines use headings to understand what your page is about. Clear, well-structured headings can help your content show up in search results.<\/p>\n\n\n\n<h3 id=\"marketing\" class=\"wp-block-heading\">Marketing<\/h3>\n\n\n\n<p>Well-organized content keeps people engaged and makes it easier for them to take action, whether that\u2019s reading more or completing a task.<\/p>\n\n\n\n<h2 id=\"what-wcag-says\" class=\"wp-block-heading\">What WCAG says<\/h2>\n\n\n\n<p>\u201cThe objective of this technique is to <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G141.html\">ensure that sections have headings<\/a> that identify them&#8230; authors should use headings that are properly nested.\u201d<\/p>\n\n\n\n<h2 id=\"pro-tip\" class=\"wp-block-heading\">Pro tip<\/h2>\n\n\n\n<p>You can view the structure of the page in cuTheme. When editing a page or post, click on the <strong class=\"myprefix-text-bold\">Document view<\/strong> icon in the top left. It is a black square with three white lines on it. Next click on the <strong class=\"myprefix-text-bold\">Outline<\/strong> tab. You will see something that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-1024x1024.png\" alt=\"The outline displays a list of all the section sub-headings on the page, indented if they are sub-sections of a heading.\" class=\"wp-image-21198\" style=\"width:293px;height:auto\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-1024x1024.png 1024w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-512x512.png 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-320x320.png 320w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-768x768.png 768w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-600x600.png 600w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1-200x200.png 200w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/03\/tip-1.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Page hierarchy creates a way a page can be read by a screen reader, or by a user who scans the page visually. <\/p>\n","protected":false},"author":6,"featured_media":21242,"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,25,21],"class_list":["post-20917","page","type-page","status-publish","has-post-thumbnail","hentry","cu_page_type-accessibility","cu_page_type-general","cu_page_type-homepage-featured","cu_page_type-page-organization"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20917","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=20917"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20917\/revisions"}],"predecessor-version":[{"id":21477,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20917\/revisions\/21477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media\/21242"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=20917"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=20917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}