{"id":449,"date":"2021-07-08T09:29:03","date_gmt":"2021-07-08T09:29:03","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=449"},"modified":"2022-01-06T23:29:29","modified_gmt":"2022-01-06T23:29:29","slug":"preserved-in-html","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/07\/08\/preserved-in-html\/","title":{"rendered":"Preserved in HTML"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-471\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/07\/Capture-1.jpg\" alt=\"Doctor swallow framed on the wall of a chapel in a stately home. there is another picture on the wall as well, Padme.\" width=\"1028\" height=\"206\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/07\/Capture-1.jpg 1028w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/07\/Capture-1-300x60.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/07\/Capture-1-1024x205.jpg 1024w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/07\/Capture-1-768x154.jpg 768w\" sizes=\"auto, (max-width: 1028px) 100vw, 1028px\" \/><small>Preserving what is important from the transient bits and bytes of the <em>interwebs<\/em>. Photo by Patrick H lauke<\/small><\/p>\n<p>Sometimes <a href=\"https:\/\/github.com\/validator\/validator\/issues\/1179#issue-939156113\">useful things on the web disappear<\/a>, but in some cases they are preserved in HTML by the <a href=\"https:\/\/web.archive.org\/web\/20200925110635\/https:\/\/www.w3.org\/wiki\/HTML\/Usage\/Headings\">WayBack machine<\/a>. 2 such articles (written by me) from the W3C HTML Wiki are re-birthed here:<\/p>\n<ul>\n<li><a href=\"#Use_h1_to_h6_to_identify_document_structure\">Use h1 to h6 to identify document structure<\/a><\/li>\n<li><a href=\"#Include_a_heading_to_identify_article_and_section_elements\">Include a heading to identify article and section elements<\/a><\/li>\n<\/ul>\n<h2><span id=\"Use_h1_to_h6_to_identify_document_structure\" class=\"mw-headline\">Use h1 to h6 to identify document structure<\/span><\/h2>\n<p>Using only <a class=\"external text\" href=\"https:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/h1-h6.html\">h1<\/a> elements in a HTML document results in a flat <a class=\"external text\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#outline\">document outline<\/a> as heading element semantics are conveyed to users as per the numeric in the heading element tag name.<\/p>\n<h3>Example code: using nested section and h1 elements<\/h3>\n<pre>&lt;body&gt;\r\n&lt;h1&gt;top level heading&lt;\/h1&gt;\r\n&lt;section&gt;&lt;h1&gt;(intended) 2nd level heading&lt;\/h1&gt;\r\n&lt;section&gt;&lt;h1&gt;(intended) 3nd level heading&lt;\/h1&gt; \r\n&lt;\/section&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<h4>Intended document outline:<\/h4>\n<pre>\u2192 top level heading\r\n\u2192 \u2192 2nd level heading\r\n\u2192 \u2192 \u2192 3rd level heading\r\n<\/pre>\n<h4>Actual document outline exposed by browsers and assistive technology<\/h4>\n<pre>\u2192 top level heading\r\n\u2192 top level heading\r\n\u2192 top level heading\r\n<\/pre>\n<h4>Example code: to convey intended document outline<\/h4>\n<pre>&lt;body&gt;\r\n &lt;h1&gt;top level heading&lt;\/h1&gt;\r\n  &lt;section&gt;&lt;h2&gt;(intended) 2nd level heading&lt;\/h2&gt;\r\n   &lt;section&gt;&lt;h3&gt;(intended) 3nd level heading&lt;\/h3&gt; \r\n   &lt;\/section&gt;\r\n  &lt;\/section&gt;\r\n<\/pre>\n<h3><span id=\"Heading_semantics_exposed_by_browsers\" class=\"mw-headline\">Heading semantics exposed by browsers<\/span><\/h3>\n<p>The following popular browsers expose the semantics of <a class=\"external text\" href=\"https:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/h1-h6.html\">h1 to h6<\/a> elements to assistive technology (e.g. screen readers), by reference to the numeric in their Tag Names (<code>h1<\/code> = heading level 1 and so on):<\/p>\n<ul>\n<li>Firefox<\/li>\n<li>Chrome<\/li>\n<li>Edge<\/li>\n<li>Safari<\/li>\n<li>Internet Explorer<\/li>\n<\/ul>\n<h3><span id=\"Heading_semantics_conveyed_by_screen_readers\" class=\"mw-headline\">Heading semantics conveyed by screen readers<\/span><\/h3>\n<p>The following popular screen readers expose the semantics of <a class=\"external text\" href=\"https:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/h1-h6.html\" rel=\"nofollow\">h1 to h6<\/a> elements to users based on the information provided by graphical browsers (<code>h1<\/code> = heading level 1 and so on):<\/p>\n<ul>\n<li>JAWS<\/li>\n<li>NVDA<\/li>\n<li>VoiceOver<\/li>\n<li>Narrator<\/li>\n<\/ul>\n<h3><span id=\"Notes\" class=\"mw-headline\">Notes<\/span><\/h3>\n<p><b>Some related HTML and browser implementation bugs:<\/b><\/p>\n<ul>\n<li><a class=\"external text\" href=\"https:\/\/github.com\/whatwg\/html\/issues\/83\" rel=\"nofollow\">Suggest adding a warning about outline algorithm (WHATWG) Issue<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/github.com\/w3c\/html\/issues\/110\" rel=\"nofollow\">initial pass at article definition rewrite &#8211; HTML5.1 bug<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/github.com\/w3c\/html\/issues\/33\" rel=\"nofollow\">What to do about the document outline? &#8211; HTML5.1 bug<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/github.com\/w3c\/html\/issues\/169\" rel=\"nofollow\">Do not recommend using nested sections with h1 &#8211; HTML5.1 bug<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/www.w3.org\/Bugs\/Public\/show_bug.cgi?id=25003\" rel=\"nofollow\">modify required heading mappings to reflect reality \u2013 HTML spec bug<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/code.google.com\/p\/chromium\/issues\/detail?id=365070\" rel=\"nofollow\">expose (heading) level in acc layer based on heading elements outline depth \u2013 chrome bug<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=998590\" rel=\"nofollow\">expose heading level in acc layer based on outline depth not heading numeric value \u2013 Firefox bug<\/a><\/li>\n<li><a class=\"external text\" href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=131920\" rel=\"nofollow\">AX: expose (heading) level based on heading elements outline depth \u2013 Webkit bug<\/a><\/li>\n<\/ul>\n<p><strong>A few articles about the document outline:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/html5doctor.com\/computer-says-no-to-html5-document-outline\/\">Computer says NO to HTML5 document outline<\/a><\/li>\n<li><a href=\"https:\/\/html5accessibility.com\/stuff\/2021\/03\/21\/a-decade-a-year-of-heading-backwards\/\">A decade + a year of heading backwards<\/a><\/li>\n<li><a href=\"https:\/\/adrianroselli.com\/2016\/08\/there-is-no-document-outline-algorithm.html\">There Is No Document Outline Algorithm<\/a><\/li>\n<\/ul>\n<hr \/>\n<h2><span id=\"Include_a_heading_to_identify_article_and_section_elements\" class=\"mw-headline\">Include a heading to identify article and section elements<\/span><\/h2>\n<h3><span id=\"General_guidance\">General guidance<\/span><\/h3>\n<p>As a general rule, include a <a class=\"external text\" href=\"https:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/h1-h6.html\">heading (h1-h6)<\/a> as a child of each <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-section-element\">section<\/a> and <a href=\"https:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/article.html\">article<\/a> element.<\/p>\n<p>Screen readers expose the heading hierarchy of document to users by announcing the heading level (1 to 6) of each heading they find. During calculation of a document&#8217;s <a class=\"external text\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#outline\">outline<\/a>, sections and articles with missing headings result in an outline with a malformed heading hierarchy in which some heading levels are skipped\u2014as the heading level of each heading reflects its <a class=\"external text\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#outline-depth\">outline depth<\/a>.<\/p>\n<h4>Example code: simple document with an section that has a missing heading<\/h4>\n<pre>&lt;body&gt;\r\n &lt;h1&gt;top level heading&lt;\/h1&gt;\r\n  &lt;section&gt; &lt;!-- empty section -&gt; \r\n   &lt;section&gt;&lt;h3&gt;(intended) 2nd level heading \r\n   is calculated as a level 3 heading \r\n   due to being nested in an empty section &lt;\/h3&gt;  \r\n   &lt;\/section&gt;\r\n  &lt;\/section&gt;\r\n<\/pre>\n<h4>Expected document outline exposed by browsers and assistive technology for the above example<\/h4>\n<pre>\u2192 level 1 heading\r\n\u2192 \u2192 \u2192 level 3 heading\r\n<\/pre>\n<h4><span id=\"A_user.27s_perspective_on_missing_headings\" class=\"mw-headline\">A user&#8217;s perspective on missing headings<\/span><\/h4>\n<blockquote><p>The heading hierarchy is the best way to understand the relationship between different sections of content. If the hierarchy is logical (cascades without skipping levels), then those relationships are easy to determine. Headings also assist with content location. Moving between headings that have a logical hierarchy enables you to drill down into the page content, narrowing down the part of the page you need to examine in detail to find the content you&#8217;re looking for. If the page doesn&#8217;t have a logical heading hierarchy, then neither of these things is possible. This significantly reduces the UX from the point of view of a blind person. <a class=\"external text\" href=\"https:\/\/www.w3.org\/Bugs\/Public\/show_bug.cgi?id=25394#c20\" rel=\"nofollow\"><i>L\u00e9onie Watson<\/i><\/a><\/p><\/blockquote>\n<h4><span id=\"Web_Content_Accessibility_Guidelines_advice\" class=\"mw-headline\">Web Content Accessibility Guidelines advice<\/span><\/h4>\n<blockquote><p>To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.). <a class=\"external text\" href=\"https:\/\/www.w3.org\/TR\/2012\/NOTE-WCAG20-TECHS-20120103\/G141\" rel=\"nofollow\"><i>Organizing a page using headings<\/i><\/a><\/p><\/blockquote>\n<h4><span id=\"Guidance_from_the_HTML_specification\" class=\"mw-headline\">Guidance from the HTML specification<\/span><\/h4>\n<h5><span id=\"section_element_advice\" class=\"mw-headline\">section element advice<\/span><\/h5>\n<p>Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.<\/p>\n<h5><span id=\"article_element_advice\" class=\"mw-headline\">article element advice<\/span><\/h5>\n<p>A general rule is that the article element is appropriate only if the element\u2019s contents would be listed explicitly in the document\u2019s outline. Each article should be identified, typically by including a heading(h1-h6 element) as a child of the article element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Preserving what is important from the transient bits and bytes of the interwebs. Photo by Patrick H lauke Sometimes useful things on the web disappear, but in some cases they are preserved in HTML by the WayBack machine. 2 such articles (written by me) from the W3C HTML Wiki are re-birthed here: Use h1 to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-449","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=449"}],"version-history":[{"count":21,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/449\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/449\/revisions\/643"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}