WordPress.org

Make WordPress Core

Opened 10 months ago

Last modified 9 months ago

#45673 new defect (bug)

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

Reported by: perandre Owned by:
Milestone: Future Release Priority: normal
Severity: minor Version:
Component: Bundled Theme Keywords:
Focuses: accessibility Cc:
PR Number:

Description

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

Attachments (1)

h1h2.jpg (165.0 KB) - added by perandre 10 months ago.

Download all attachments as: .zip

Change History (10)

@perandre
10 months ago

#1 @swissspidy
10 months ago

  • Summary changed from Front page entry-title should be h1, not h2 to Twenty Nineteen: Front page entry-title should be h1, not h2

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.

#2 @perandre
10 months ago

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

#3 @afercia
10 months ago

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

#4 @perandre
10 months ago

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.

#5 @perandre
10 months ago

(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.)

#6 @afercia
10 months ago

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.

#7 @perandre
10 months ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

#9 @afercia
9 months ago

  • Milestone changed from Awaiting Review to Future Release
  • Version 5.0.1 deleted

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.

Note: See TracTickets for help on using tickets.