The H1 is identical on every page, regardless of content due to Site Title block level

[jessynd]

Issue summary

The Site Title in the navigation bar or header template of the theme is wrapped in an <h1> element. This causes the H1 of every single page to be the same regardless of the content of the page. The first level heading on the page should be the page title, not the site title.

Current code

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:site-title /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Steps to reproduce

1. Open up any page in your WordPress site with the TwentyTwentyFour theme
2. Inspect the site title in the left hand side of the header block
3. Observe the h1 wrapped around the site title.

Recommendation

1. The site title block allows us to select the heading level used when outputted to the page. In this case, the level should be set to paragraph or level: 0. This will output the site title as a paragraph instead of a heading and it can then be styled according to the design spec.
2. Amend each of the page templates so that the top level heading where the page title is outputted is an H1 and not an H2.

Recommended code

Code for files header.html, header-copy.html, header-writer.html, header-portfolio.html

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:site-title {"level":0} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Specifications

Relevant Templates
header-copy.html
header-portfolio.html
header-writer.html
header.html

WCAG Principle: Perceivable
WCAG SC: 1.3.1 Info and Relationships

[lefty55104]

The site title is also an H1 in the footer. The recommended steps above would then also apply to:

• footer-copy.html
• footer-portfolio.html
• footer-writer.html
• footer.html

[jessynd]

I gave fixing this a shot in my PR

[carolinan]

I re-opened this to keep the context for the following issue:

The first level heading on the page should be the page title, not the site title.

With the site title changed from H1 to paragraph, many templates are missing an H1.

[MaggieCabrera]

I re-opened this to keep the context for the following issue:

The first level heading on the page should be the page title, not the site title.

With the site title changed from H1 to paragraph, many templates are missing an H1.

Can we close this one now, @carolinan ?

[carolinan]

No, all templates are not merged yet.
Somewhere, the H1 on the home template was removed, so instead of two, there is now 0 😆

[carolinan]

Related, I received feedback from @afercia that the H3 headings in the default footer (about, privacy, social media) should be H2.
Otherwise they look like subheadings below "Join 900+ subscribers"

[afercia]

Related, I received feedback from @afercia that the H3 headings in the default footer (about, privacy, social media) should be H2.

Rationale:

A heading level is skipped.
Scenario:

• Users add some content with H2 headings.
• The last heading text is: About Carolina 🙂
• At this point, the headings About, Privacy, and Social media would be semantically and hierarchically sub-headings of About Carolina, as if they identified content sections that are children of About Carolina, which is clearly incorrect.

[carolinan]

I found out that using the class screen-reader-text wont work because it also hides the H1 heading in the editors.

[luminuu]

How are we going to deal with the missing h1? Adding it to the pattern means we're going to add it everywhere where the pattern is inserted, so more than one h1 could appear on every page/post.

[MaggieCabrera]

I think we can duplicate the markup for this template. Let's have the home page pattern use h1 and the partial pattern use h2.

[luminuu]

@carolinan has added some missing h1's in this PR today: #563, so I think we're good now with this.