{"id":85,"date":"2024-05-14T11:58:30","date_gmt":"2024-05-14T18:58:30","guid":{"rendered":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/?page_id=85"},"modified":"2024-05-14T12:00:00","modified_gmt":"2024-05-14T19:00:00","slug":"lack-of-heading-hierarchy","status":"publish","type":"page","link":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/headings\/lack-of-heading-hierarchy\/","title":{"rendered":"Lack of Heading Hierarchy"},"content":{"rendered":"<section  class=\"wsu-section wsu-width--full wsu-color-background--gray-5 wsu-spacing-after--xxmedium\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n\n<h2 class=\"wp-block-heading\">About This Page<\/h2>\n\n\n\n<p><em>This page has been adapted from the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/headings\/\">headings core concept page<\/a> on the WSU digital accessibility website by Daniel Rieck (<a href=\"mailto:daniel.rieck@wsu.edu\">daniel.rieck@wsu.edu<\/a>).<\/em> Daniel included all the content on the original headings page and then expanded it with additional thoughts and opinions mainly to create more opportunities to demonstrate how to test a document for common accessibility errors that involve headings. This page was used as part of a presentation on web accessibility testing for GAAD 2024.<\/p>\n\n\n<div class=\"wsu-cta \" >\n\t<a \t\t\t\t\thref=\"https:\/\/wave.webaim.org\/report#\/https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/headings\/lack-of-heading-hierarchy\/\"\t\n\t\tclass=\"wsu-button  wsu-button--style-outline\">\n\t\t\t\n\t\tTest this page using WAVE\t\t\t<\/a>\n<\/div>\n\n\n<div class=\"wsu-accordion  wsu-accordion--size-small wsu-color-scheme--dark\">\r\n    <h3 id=\"unique-id-1__1383\" class=\"wsu-accordion__title\">\r\n        <button class=\"wsu-accordion__title-button wsu-accordion--toggle\" aria-expanded=\"false\" aria-controls=\"unique-id-1__content\">Accessibility Issues that Affect Headings on This Page<\/button>\r\n    <\/h3>\r\n    <div id=\"unique-id-1__content\" class=\"wsu-accordion__content\" aria-labelledby=\"unique-id-1__1383\">\r\n        <div class=\"wsu-accordion__content-inner\">\r\n            \n\n<p class=\"wsu-spacing-after--small\">Compared to the <a href=\"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/headings\/\" data-type=\"page\" data-id=\"15\">reference page<\/a> that has no accessibility issues that affect headings, this page has had its heading hierarchy flattened so that all headings other than the title have been placed at level 2. Although this approach still marks the different topical sections of the document, it is a mistake because it incorrectly assigns all sections as having the same level of importance in the narrative.<\/p>\n\n        <\/div>\r\n    <\/div>\r\n<\/div>\n    <\/div><\/section>\n\n\n<h2 class=\"wp-block-heading\">Importance of Headings<\/h2>\n\n\n\n<p>Headings provide an outlined structure to your content. They help guide people through your content by identifying the topic and sub-topics of the information.<\/p>\n\n\n<div class=\"wsu-hero wsu-width--full wsu-pattern--wsu-light-radial-left  wsu-hero--size-xsmall \">\n\t\n\t<div class=\"wsu-image-frame wsu-image-frame--fill\">\n\t<img decoding=\"async\" src=\"https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg\"\n\t\tsrcset=\"https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg 2560w, https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg 396w, https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg 792w, https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg 768w, https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg 1536w, https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/art_tips-for-teaching-with-writing_sourceamador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg 2048w\"\n\t\tsizes=\"(max-width: 2560px) 100vw, 2560px\"\n\t\talt=\"Random arrangement of typesetting blocks.\"\n\t\tstyle=\"object-position: 50% 50%\"\n\t\t\/>\n<\/div>\n\n\t<div class=\"wsu-overlay wsu-pattern-after wsu-overlay--dark-left wsu-pattern--wsu-light-radial-left\"><\/div>\n\t<div class=\"wsu-hero__content\">\n\t\t<div class=\"wsu-hero__caption\">\n\t\t\t\t\t\t\t\t\t<div id=\"title-id-69d0e4bea9f20\" class=\"wsu-title wsu-hero__title\"><span>Headings Improve Navigation<\/span><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How Headings Work<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Heading Hierarchy<\/h2>\n\n\n\n<p>Headings start at heading level 1 and progress down to heading level 6. Heading level 2 is a subtopic of heading level 1, heading level 3 is a subtopic of heading level 2, and so on. That is, each child heading is a subtopic of its previous parent heading. These heading levels display the hierarchy of content.<\/p>\n\n\n\n<p>Heading hierarchy allows people to understand the outline and structure of the content. When correctly applied to a document, heading hierarchy can be easily translated into a nested ordered list that represents the sectional topics that make up the document&#8217;s narrative. By paying attention to headings, people can quickly form a broad idea of the content that is communicated by a web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Hierarchy Matters<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2024\/04\/f-shape-pattern-how-users-read\/\">People tend to scan<\/a> content on the web rather than carefully read it from beginning to end. Heading hierarchy helps people accurately scan through an online document and quickly find what they want. But if headings are not properly coded, people who depend on assistive technology will be prevented from scanning a document in this way. Assistive tools cannot safely construe mere visual formatting like bolding or font sizing as implying hierarchical levels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Headings Are Coded, Not Just Visually Formatted<\/h2>\n\n\n\n<p>Headings need to be appropriately formatted as heading styles for headings to be accessible within&nbsp;<a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/digital-content-and-technology\/\">digital content and technology<\/a>. That is, headings are not recognized by software as true headings unless they are properly coded as such. Formatting text as a heading style using an application&#8217;s formatting tools causes the text to be coded heading data.<\/p>\n\n\n\n<p>When headings are properly coded, programs and&nbsp;<a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technologies<\/a>&nbsp;can display the formatted headings to outline the content structure. Additionally, assistive technology allows people to navigate to, and scan through, the content by the headings alone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Coding Headings Is Not \u201cExtra Work\u201d\u2014It Is Our Job<\/h2>\n\n\n\n<p>It is the reasonable duty of an author to understand and correctly follow the rules of a language when writing a document. And as web content creators, it is our duty to understand and follow the rules of the language of computers when we use an application to translate a document into computer form and transmit it to other people using computers. We must not fail to observe this duty because we must not allow the web content we create to contain barriers to access for people who rely on assistive technology. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Headings on WSU Websites<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Format of Headings in the Web Design System<\/h2>\n\n\n\n<p>The Web Design System theme for WordPress styles headings so that the most common heading levels\u2014h1, h2, h3, and h4\u2014are very easy to visually distinguish from each other. This is helpful for web content creators whose visual acuity is in good enough health to manually test pages by eye.<\/p>\n\n\n<div class=\"wsu-row wsu-row--sidebar-right\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<p>For example, figure 1 shows how the following HTML code appears on screen on a website created with WSU WordPress.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Heading 1&lt;\/h1&gt;\n&lt;h2&gt;Heading 2&lt;\/h2&gt;\n&lt;h3&gt;Heading 3&lt;\/h3&gt;\n&lt;h4&gt;Heading 4&lt;\/h4&gt;\n&lt;h5&gt;Heading 5&lt;\/h5&gt;\n&lt;h6&gt;Heading 6&lt;\/h6&gt;<\/code><\/pre>\n\n\n\n<p>In general, the higher the level of a heading is, the larger and bolder its text appears. The visual difference between the higher and most commonly used heading levels is also more dramatic.<\/p>\n\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"742\" height=\"656\" src=\"https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/stylized-eyes_AdobeStock_286132195_looking-at-wds-heading-levels.png\" alt=\"Stylized eye looking at visual differences in how headings 1 through 6 appear in WSU WordPress.\" class=\"wp-image-40\" srcset=\"https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/stylized-eyes_AdobeStock_286132195_looking-at-wds-heading-levels.png 742w, https:\/\/wpcdn.web.wsu.edu\/wp-daesa\/uploads\/sites\/3457\/2024\/05\/stylized-eyes_AdobeStock_286132195_looking-at-wds-heading-levels-396x350.png 396w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><figcaption><strong>Figure 1:<\/strong> Appearance of heading levels 1 through 6 in the Web Design System theme for WordPress.<\/figcaption><\/figure>\n\n<\/div>\r\n\n<\/div>\n\n\n<p>Testing with the WAVE tool to look for errors with headings removes all doubt because WAVE uses icons to mark how each piece of text data is coded on the web page. It will also evaluate heading structure to determine if accessibility errors are present on the page that affect headings.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Importance of Headings Headings provide an outlined structure to your content. They help guide people through your content by identifying the topic and sub-topics of the information. How Headings Work Heading Hierarchy Headings start at heading level 1 and progress down to heading level 6. Heading level 2 is a subtopic of heading level 1, [&hellip;]<\/p>\n","protected":false},"author":384,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[],"tags":[],"wsuwp_university_location":[],"wsuwp_university_org":[],"_links":{"self":[{"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/pages\/85"}],"collection":[{"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/users\/384"}],"replies":[{"embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":2,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/pages\/85\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/pages\/85\/revisions\/88"}],"up":[{"embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/tags?post=85"},{"taxonomy":"wsuwp_university_location","embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/wsuwp_university_location?post=85"},{"taxonomy":"wsuwp_university_org","embeddable":true,"href":"https:\/\/daesa.wsu.edu\/web-a11y-testing-demo\/wp-json\/wp\/v2\/wsuwp_university_org?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}