{"id":521,"date":"2020-08-22T11:17:00","date_gmt":"2020-08-22T10:17:00","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=521"},"modified":"2020-08-21T18:50:15","modified_gmt":"2020-08-21T17:50:15","slug":"correct-heading-for-the-headings-what-is-important-for-accessible-and-search-friendly-heading-elements","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2020\/08\/correct-heading-for-the-headings-what-is-important-for-accessible-and-search-friendly-heading-elements\/","title":{"rendered":"Correct heading for the headings &#8211; what is important for accessible and search friendly heading elements"},"content":{"rendered":"\n<p>Yes, I should maybe apologize for the word play with heading as direction in my own heading title but I thought it will break the initial ice in a funny way. I may be wrong but anyway &#8211; I decided to write some research based thoughts on the heading elements in the webpage or web application context. <\/p>\n\n\n\n<p>Heading elements are a prehistoric member of the HTML elements community and according to W3C they were included at the beginning of the standard <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/People\/Raggett\/book4\/ch02.html\" target=\"_blank\">because they were a part of Standard Generalized Mark-up Language (SGML) that HTML is strongly based on (link opens in new window)<\/a>.<\/p>\n\n\n\n<p>Why do we even use headings &#8211; well to project logical hierarchy that enables the user to quickly browse different parts that are divided with headings. Some assistive technologies, like for example screen-readers, even enable their users to navigate by headings alone. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">So &#8211; let&#8217;s be honest &#8211; we should use headings and we should respect best practices for them<\/h2>\n\n\n\n<p>Like this subtitle says &#8211; we should not avoid headings as they add to the segmentation of content, especially when it is long &#8211; as humans prefer to cope with partial data when consuming information. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>I am not encouraging anybody against the use of headings in any way, I just want to explain that there are some myths there that should be understood before judged.<\/p><cite>me, trying to explain that I support proper use of headings.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Breaking the myths of correct versus wrong heading usage<\/h2>\n\n\n\n<p>Let&#8217;s begin with short summary that may come as a shock for the reader first;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We are allowed to use <strong>multiple h1 headings<\/strong> on the same site &#8211; it is not a accessibility failure and google mentions that they can still understand the page well enough!<\/li><li>We are even <strong>allowed to not use headings at all<\/strong> &#8211; but I do not recommend it though.<\/li><li>We can even <strong>skip h1 and begin with h2 if we want to<\/strong>. No problem for accessibility and no problem for search engines. <\/li><\/ul>\n\n\n\n<p>This list may come as a shock to somebody, maybe you are even wanting to shout or be really passionate about it. I must say I was surprised as well.<\/p>\n\n\n\n<p>But the statements are correct (please see the sources that confirm these statements) although I would not consider them when building anything for the web, because the headings add so much semantics to the whole design and even more &#8211; they can be used as a means for navigation for assistive technology users which helps them to scan the content more quickly. <\/p>\n\n\n\n<p>And yes &#8211; search engines do not rely so much on the headings as they did years ago &#8211; I suppose they have built on experiences with keyword stuffing and other black-hat SEO methods that tried to abuse all, otherwise useful, semantics they could get their hands on.<\/p>\n\n\n\n<p>In case you want to understand more about headings &#8211; welcome to investigate the sources I provided below. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">But please &#8211; do use headings in the semantic way and think of how best can they be descriptive<\/h2>\n\n\n\n<p>Wrong use of headings can be a real accessibility issue and you should really avoid next things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Headings that are not describing the content in a meaningful way &#8211; please avoid stuffing keywords in the headings &#8211; make them count. They should be descriptive enough also if taken out of context because they are also used as navigation controls for some assistive technology users.<\/li><li>Styling normal paragraphs to look like headings &#8211; again &#8211; please use correct semantics for the headings &#8211; and not just some styles that make normal paragraphs look like headings. I must explain again &#8211; headings are useful for navigation too.<\/li><li>Do not use headings only for visual effect! Use CSS for that!<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Using meaningful, descriptive headings means a lot for all users and is a key to good readability and usability. So &#8211; please do not stop using them!<\/p><cite>me, again, advocating the use of headings.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Sources to explain my thesis in details<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/headings\/\" target=\"_blank\">Official W3C tutorial on headings (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/headings-and-labels\" target=\"_blank\">WCAG Understanding Success Criterion 2.4.6: Headings and Labels (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/failures\/F43\" target=\"_blank\">WCAG 2.1 Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/html\/H69.html\" target=\"_blank\">WCAG 2.1 Providing heading elements at the beginning of each section of content (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/headings-and-labels\" target=\"_blank\">WCAG 2.1 Understanding Success Criterion 2.4.6: Headings and Labels (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#section-headings\" target=\"_blank\">WCAG 2.1 Success Criterion 2.4.10 Section Headings AAA (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.paciellogroup.com\/blog\/2020\/03\/headings-accessibility\/\" target=\"_blank\">The Paciello Group &#8211; Headings &amp; Accessibility (opens in new window)<\/a>,<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=WsgrSxCmMbM&amp;list=PLKoqnv2vTMUPhLQ054sMg3vgzy9md9tWg&amp;index=4\" target=\"_blank\">Google Webmasters (21.Dec 2017) &#8211; multiple H1 tags on a page is just fine (opens in new window)<\/a>,<\/li><li><a href=\"https:\/\/www.youtube.com\/watch?v=zyqJJXWk0gk\" target=\"_blank\" rel=\"noreferrer noopener\">Ask Google Webmasters (3.Oct 2019), John Mueller discusses how to handle multiple H1 headings and accessibility (opens in new window)<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are still some myths out there about what we can and can not do and there are also some best practices around use of headings. Please do use them is my advice, but it is not a thing for compliance and SEO itself. It is more about usability.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,10,3],"tags":[13,172,74,69,67,66,173,29],"class_list":["post-521","post","type-post","status-publish","format-standard","hentry","category-general","category-practical-a11y","category-principles","tag-at","tag-headings","tag-html","tag-search-engine-opmitization","tag-semantics","tag-seo","tag-sgml","tag-wcag"],"_links":{"self":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":0,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"wp:attachment":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}