Opened 6 years ago
Closed 2 months ago
#45673 closed defect (bug) (wontfix)
Twenty Nineteen: Front page entry-title should be h1, not h2
Reported by: | perandre | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | minor | Version: | |
Component: | Bundled Theme | Keywords: | close |
Focuses: | accessibility | Cc: |
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)
Change History (13)
#1
@
6 years 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
#2
@
6 years 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
@
6 years 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
@
6 years 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
@
6 years 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
@
6 years 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
@
6 years 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.
6 years ago
#9
@
6 years 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.
#10
follow-up:
↓ 11
@
11 months ago
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.
#11
in reply to:
↑ 10
;
follow-up:
↓ 12
@
2 months ago
- Keywords close added
There is still no good solution for this problem.
It probably is time to close this ticket. The 'maybelater' resolution could fit, in case a solution becomes available in the future.
#12
in reply to:
↑ 11
@
2 months ago
- Milestone Future Release deleted
- Resolution set to wontfix
- Status changed from new to closed
Replying to sabernhardt:
There is still no good solution for this problem.
It probably is time to close this ticket. The 'maybelater' resolution could fit, in case a solution becomes available in the future.
I agree. The MDN page on headings says:
Nesting multiple <h1> elements in nested sectioning elements was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming.
As the HTML spec has moved away from sectioning and the HTML 5 document outline, I'll close this as wontfix as it's apparent that the document outline will never be implemented.
In this case, wontfix isn't a great term. It's more a case of it can't be fixed with the HTML spec as it is.
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.