{"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":"2025-06-09T14:46:13","modified_gmt":"2025-06-09T18:46:13","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>Page hierarchy is created by using a set of nesting subheadings. These create a way a page can be read by a screen reader, or by a user who scans the page visually. It allows people to understand the importance and types of information on a page. <\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Often those using screen readers or other assistive technology browse from subheading to subheading. When they reach a relevant subheading, they select this, and the screen reader then hops from subheading to subheading within <em class=\"myprefix-text-italic\">that<\/em> section until they find the information they need. <\/li>\n\n\n\n<li>As some individuals who use a screen reader do <em class=\"myprefix-text-italic\">not<\/em> have visual disabilities it is important to understand you are helping others &#8211; not just those with that type of diability. <\/li>\n\n\n\n<li>In fact, the structure of a page with a correct hierarchy also gives clues to how the information is organized, placing less cognitive load on a user. While this can help users with a learning disability, or a neuro-developemental disability, it assists <em class=\"myprefix-text-italic\">all<\/em> users.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<p>The way to organize information using subheaders can easily seen in this example:<br><br><strong>Heading 1<\/strong>&nbsp;Places to eat [The Page as a whole]<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading 2<\/strong>&nbsp;On-campus\n<ul class=\"wp-block-list\">\n<li><strong>Heading 3<\/strong>&nbsp;Mike\u2019s Place<\/li>\n\n\n\n<li><strong>Heading 3&nbsp;<\/strong>Oliver\u2019s<\/li>\n\n\n\n<li><strong>Heading 3&nbsp;<\/strong>The Garden Spot<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Heading 2<\/strong>&nbsp;Off-campus\n<ul class=\"wp-block-list\">\n<li><strong>Heading 3&nbsp;<\/strong>Burger King<\/li>\n\n\n\n<li><strong>Heading 3&nbsp;<\/strong>Pizza Nerds<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong class=\"myprefix-text-bold\">Heading 1<\/strong> for a page is always the page title and there can only be one instance of this.<\/p>\n\n\n\n<p>If you were using a screen reader and wanted to eat off-campus you would skip from the first Heading 2 section to the second (&#8220;Off-campus&#8221;) and skip through its subheadings until you heard the name of the restaurant you want to eat at. You could then access all the information listed there. <\/p>\n\n\n\n<p>On a page accessed visually there is an immediately visible cue: the subheadings are different sizes &#8211; the lower down the hierarchy, the smaller the subheading. <\/p>\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>There are a few different ways in which use of hierarchy can make life more difficult for people to success information. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One is by having no hiearchy. From people in a hurry to those with visual, educational or neural developmental disorders, the non-organization of information in a page means a lot more delay, cognitive load, and work.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Another way is if the hierarchy is incorrect. There are two ways this can manifest: \n<ul class=\"wp-block-list\">\n<li>the hierarchy skips a level<\/li>\n\n\n\n<li>the hierarchy is in the incorrect order<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Skipping a level would look like:<\/p>\n\n\n\n<p><strong class=\"myprefix-text-bold\">Heading 1<\/strong> Places to eat<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading <\/strong><strong class=\"myprefix-text-bold\">3<\/strong>&nbsp;On-campus\n<ul class=\"wp-block-list\">\n<li><strong class=\"myprefix-text-bold\">H<\/strong><strong class=\"myprefix-text-bold\">eading 4<\/strong> Mike&#8217;s Place<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>The hierarchy being in the incorrect order would look like this, for example:<\/p>\n\n\n\n<p><strong>Heading <\/strong>1&nbsp;Places to eat<\/p>\n\n\n\n<ul id=\"block-0aa64654-f0f9-4893-be7c-189b2da88db4\" class=\"wp-block-list\">\n<li><strong>Heading 3<\/strong>&nbsp;On-campus<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">Heading 2<\/strong> Mike\u2019s Place<\/li>\n<\/ul>\n\n\n\n<p>Instantly, the user will be confused by what they see or hear.<\/p>\n\n\n\n<p>See also: <a href=\"https:\/\/google.ca\">Subheadings must be proper subheadings<\/a><\/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\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>: This features helps users quickly scan a page for content they need.<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">SEO<\/strong>: Google and other search engines place a huge emphasis on pages with proper headings and hierarchy to prioritize pages in their rankings.<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">Marketing<\/strong>: If people can find content quickly and easily there is more chance they will apply to ÐÓ°ÉÔ­´´ of use the university&#8217;s services.<\/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 <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Techniques\/html\/H42.html\">this section of their website<\/a>. (They refer to headings as &#8220;h1&#8221; to &#8220;h6&#8221;.)<\/p>\n\n\n\n<p>(Be sure to <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>&#8220;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&#8230; if a document can be broken up into sections with headings, it facilitates both understanding and navigation.&#8221;<\/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>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":4,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20917\/revisions"}],"predecessor-version":[{"id":21328,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20917\/revisions\/21328"}],"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}]}}