News blog single post: The date above the post title needs to be moved

[carolinan]

Description

In the news blog single post template / pattern, there is a date above the main heading. This needs to be moved somewhere below the heading. See https://github.com/WordPress/twentytwentyfive/issues/150

-Please await information about the new position for the date before starting to work on this.

[beafialho]

The date too?! This will change this design significantly. I wish this would have been brought up way sooner.

cc @jasmussen @richtabor

[carolinan]

Yes it is unfortunate that neither of us spotted all the small details. I would have liked for you to have all the necessary time to decide how you want to display the date.

The discussion about displaying content above the headings was started two weeks ago, before that I spent time looking at the alternatives for making any text above headings accessible.

The date is important information on a post, and screen reader users who navigate via a list of headings will not know that they will need to change the order and go backwards to find the date, they won't know it is there.

[beafialho]

I think it’s acceptable to place the post date before the heading 1 (post title) as long as semantic html is used correctly. Screen readers rely on structure, not visual order, so users can still navigate effectively. Some users may even prioritize the post date, especially in time-specific content like news articles. Displaying it before the post title could benefit users who prefer to know the date upfront.

[carolinan]

It would have been valid HTML to place the post date inside the H1, but the block editor can't do that.

In theory it would be possible to do it with the block bindings API, fetching both the post title and date from the current post and add that as the content of the heading block. But I think that goes beyond what we can experiment with in a default theme.

[KevinTaron]

In my understanding, it's correct what @beafialho is saying. We could visually set the date before the h1, and it would meet the necessary accessibility guidelines like WCAG.

Example:

<article>
<h1>Headline Title</h1>
<p class="date">13. September 2024</p>
....
</article>

CSS:

article {
  display: flex;
  flex-direction: column;
}

.date {
  order: -1; 
}

So Screenreaders and everybody without CSS are getting the correct information in the logical order meeting the WCAG criteria SC 1.3.2 Meaningful Sequence

But I'm not sure if that's possible without custom css.

[carolinan]

This alternative is already discussed in the linked issue.

[carolinan]

It is not only about meeting guidelines, but being accessible, which are often not the same.

[KevinTaron]

@carolinan you are absolutely right. It's all about accessibility.

I just wanted to add that specific case would work and doesn't harm accessibility. We often work for clients with special needs (or there customers) — here in Germany. And this kind of "pattern" is often used. Because the focus order stays correct (As long as the date is not focusable or a link), the logical order stays correct.

---

But I can understand and also prefer if we try to use as less “special cases” as possible. So if we could change the design, it's much easier to implement. No custom CSS and stuff like this.

[carolinan]

The theme already uses custom CSS.

Since the block can not be re-ordered in the editors, what will happen when:

• The users finds that the editor and front does not match: Some users will not even notice. Others are so used to this broken way of editing that they also wont care.
• The user removes the custom CSS class added to the block in the CSS class field in the editors.
• The user moves the date block anywhere else on the template, and expects that position to work also on the front.

[carolinan]

Here is a quote from and a link to the most recent screen reader survey by WebAIM.

The question was: "When trying to find information on a lengthy web page, which of the following are you most likely to do first?" 71% of respondents chose the answer "Navigate through the headings on the page".

Source

These are the users would not find the date of the post, not with the ease one would expect.

[afercia]

The date too?! This will change this design significantly.

In https://github.com/WordPress/twentytwentyfive/issues/150#issuecomment-2324698069 I tried to explain that any post-related content must be placed after the heading:

I'd kindly ask to just change the design and move any post-related information like the category (or post meta or any related post content) after the heading.

I wish this would have been brought up way sooner.

That was on September 2nd, which is eleven days ago, to be accurate.

This will change this design significantly.

The design should be crafted around the content, not the other way around. Bundled themes aim to ship with the highest possible level of accessibility. As such, the theme needs to be designed as accessible as possible since the beginning.

I do understand the pressure and the frustration but please be prepared to more change requests as the theme still has to be audited in depth for accessibility.

[beafialho]

I wish this would have been brought up way sooner. That was on September 2nd, which is eleven days ago, to be accurate.

By sooner I meant the date the design was introduced.

I thought that the things that needed to be addressed, had already been addressed. But I see now that I misunderstood. Apologies for my frustration, it's been a long journey.

If there's consensus to change this, here's an alternative:

[carolinan]

Are the tags below the content (in the same column) or between the columns block and the post navigation? If they are in the same column, they will be displayed before the sidebar on smaller screens. And if not, they will be displayed after the sidebar.