{"id":16118,"date":"2021-05-11T15:59:28","date_gmt":"2021-05-11T19:59:28","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=16118"},"modified":"2026-03-18T05:41:53","modified_gmt":"2026-03-18T09:41:53","slug":"top-five-accessibility-issues-2-empty-heading","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2021\/top-five-accessibility-issues-2-empty-heading\/","title":{"rendered":"Top Five Accessibility Issues: 2. Empty Heading"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Top Five Accessibility Issues: 2. Empty Heading\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n

Empty heading<\/h2>\n\n\n\n

What It Means<\/h3>\n\n\n\n

A heading that contains no content. How do these empty headings occur? It is the easiest thing to accidentally create one: you insert a heading in one of your pages. However, then you decide to delete it, but you do so by only deleting the text. The HTML tag which creates a heading remains, hidden in the code. Sneaky!<\/p>\n\n\n\n

Why It Matters<\/h3>\n\n\n\n

Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.<\/p>\n\n\n\n

What To Do<\/h3>\n\n\n\n

Ensure that all headings contain informative content.<\/p>\n\n\n\n

Fixing this issue is pretty straightforward compared to some other accessibility problems on a website. The main complexity with empty headers is finding them in the first place. Why? Because they’re empty<\/strong>! Yep, empty as my vacation plans during COVID-19. So how do you spot them?<\/p>\n\n\n\n

If we have run an accessibility report for your site, we can provide the addresses of pages where the empty heading tags are. Then you can:<\/p>\n\n\n\n

    \n
  1. Log into your site, edit the page where we reported the error and<\/li>\n\n\n\n
  2. Click on the Text<\/strong> tab to view the HTML that creates your page.<\/li>\n\n\n\n
  3. Search your page (using CTRL+F (Windows) or CMD+F (Mac)) for empty heading tags. These are most likely to be <h2><\/h2><\/strong> or <h3><\/h3><\/strong> or <h4><\/h4><\/strong><\/li>\n\n\n\n
  4. When you find them, delete them! You might need to remove a blank line if the empty header was sitting between two paragraphs.<\/li>\n<\/ol>\n\n\n\n

    Alternatively, you can scan your pages and try and find them by eye. It can be difficult to spot them; however, a suspiciously large gap between two paragraphs is a clue. Here is an example of a heading that’s emptier than a politician’s promise [located between the first and second paragraphs below]:<\/p>\n\n\n

    \n
    \n

    Introduction<\/h3>\n\n\n\n

    Cats in ancient Egypt were represented in social and religious practices of ancient Egypt for more than 3,000 years. Several ancient Egyptian deities were depicted and sculptured with cat-like heads such as Mafdet, Bastet and Sekhmet, representing justice, fertility and power. The deity Mut was also depicted as a cat and in the company of a cat.<\/p>\n\n\n\n

    <\/h3>\n\n\n\n

    Cats were praised for killing venomous snakes and protecting the Pharaoh since at least the First Dynasty of Egypt. Skeletal remains of cats were found among funerary goods dating to the 12th Dynasty. The protective function of cats is indicated in the Book of the Dead, where a cat represents Ra and the benefits of the sun for life on Earth.<\/p>\n<\/blockquote>\n<\/div>\n\n\n

    In this situation, you could just edit the page and delete two of the three empty lines between the two paragraphs – this will remove the empty <h3><\/h3> tag which is hiding there. It is definitely harder to find them this way.<\/p>\n\n\n\n

    Look out for the next post about the third most frequent accessibility issue: Empty Links!<\/p>\n\n\n\n

    For more information about empty headings, visit module 2 of our accessibility training:<\/p>\n\n\n

    Accessibility Training – Module 2: Text<\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    Empty heading What It Means A heading that contains no content. How do these empty headings occur? It is the easiest thing to accidentally create one: you insert a heading in one of your pages. However, then you decide to delete it, but you do so by only deleting the text. The HTML tag which […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[197,390,391],"tags":[],"class_list":["post-16118","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-keep","category-rewrite"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/16118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=16118"}],"version-history":[{"count":1,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/16118\/revisions"}],"predecessor-version":[{"id":21396,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/16118\/revisions\/21396"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=16118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=16118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=16118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}