Twenty Nineteen: Front page entry-title should be h1, not h2

[perandre]

Posts published on the front page should use h1. This is encouraged with HTML5, and prevents wrong content structure as seen here: ​http://take.ms/DWnFH

[swissspidy]

Are you displaying your latest posts on the front page, or a static page?

If you display the latest posts there, you don't really want every post title to be an <h1>. In this case, the site title is the one and only <h1> on the page.

[perandre]

Are you displaying your latest posts on the front page

Latest posts.

HTML5 allows for a new h1-h6 hierarchy inside each article or section. While h2 is also allowed, h1 is the better choice, since two h2s after each other would signal that the entry-title is the same level as inline h2s in the content body.

More background: ​https://stackoverflow.com/questions/7405282/how-to-properly-use-h1-in-html5

[afercia]

Semantics is not for humans, it only makes sense when software is able to understand the markup's semantics and communicate the perceived meaning to users. To my knowledge, no software has implemented the HTML5 Document Outline algorithm.

More details: ​http://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html

[perandre]

it only makes sense when software is able to understand the markup's semantics

Screen readers do understand the h1-h6 hierarchy, and will outline the navigation accordingly.

If we don't make entry-title a h1 in this context, the logical conclusion for inline content to preserve a correct hierarchy, is to skip h2 and use h3 as top level heading. That would of course break any WCAG test.

[perandre]

(There are other a11y issues in the theme, too, but this one won't be caught be any tests, as a machine wouldn't know that entry-title is the not on the same level as the next h2.)

[afercia]

I'm pretty familiar with screen readers :) I do know they announce and report headings. What I'm saying is that, with regards to:

HTML5 allows for a new h1-h6 hierarchy inside each article or section.

support for the HTML5 Document Outline algorithm has no implementation. Also, screen reader users won't expect multiple H1 in a page, that would be definitely uncommon as it's a pattern they're not used to.

[perandre]

screen reader users won't expect multiple H1 in a page

I think you are right about that, as they are pretty old school. But adopting to old tools by breaking the intention of the dpec, is probably not helping anyone in the long run.

What is your proposed solution to having two h2 after each other, where the second should be lower in the hierarchy? Even for me, it's visually confusing.

[afercia]

Discussed during today's accessibility bug scrub and agreed there is no simple solution to having consistent hierarchies in different contexts using the same content. Maybe, in the future, the new Block Editor (Gutenberg) could help in automatically scaling down headings in the content by one level. For now, there's no easy solution. Moving to Future Release.

[poena]

There is still no good solution for this problem.

On single posts, the H1 is the post title, and the user is responsible for making sure that headings in the post content uses the correct heading levels.

So when a theme instead uses an H2 for the post title on the blog, and the blog displays the full post content, it creates an inconsistency that makes it impossible for the user to choose heading levels that will work everywhere.

But, using multiple H1 headings is discouraged, and it is common to use H2's or even lower heading levels on the blog. I would think this pattern is common enough for screen reader users to not have any problems navigating the page, but of course this is my own thought and I don't have any statistics or articles to back this up.

In Twenty Nineteen, the single H1 heading on the blog page is the site title, and in other themes, the H1 may be a heading that says "Blog", "Latest posts" or similar.

In Twenty Nineteen it is also possible to not use a post or page title, and in this case there will not be a heading for the post on the blog.

---

Gutenberg or the block editor does not change the level of the heading blocks in the post content, depending on the context. One feature related to the heading level worth mentioning is that there is a document outline in the post editor where the user can see a warning if their heading order is incorrect.