[Site Title Block] Encourage users to make proper semantic decisions

[annezazu]

What problem does this address?

Currently, with FSE, you can alter aspects of your site you couldn't previously including the Site Title. As a result as part of FSE Outreach Program testing, the following feedback was raised:

Also, I wasn’t sure about being able to choose h2-h6 and p for the site title. I think it is fairly common practice to set h1 on the front page, and div/span on other pages. If a person who is using FSE is a developer, then perhaps we can leave it to the developer to make the decisions (and should be aware of semantics and web standard). But if one is non-developer, then may be it is more friendly to limit the choice, or just have h1 and may be allow to choose which tag for non-front-page.

What is your proposed solution?

Perhaps similar to how we show warnings for picking low contrast colors, we could show a nudge to encourage people to make good decisions around semantics for blocks like Site Title.

[carolinan]

Maybe the option could be moved the advanced section in the block settings sidebar, or vary depending on if it is inside a header template area or not.

[hedgefield]

I think in any situation it is ill-advised to make the title anything but an H1, right? Paging @afercia to confirm. If that's the case, let's remove that option completely, and leave the possibility of styling it to the text controls or advanced CSS?

[carolinan]

It is the other way around, for example, on a single post, the most important heading is normally the post title.
Sometimes the site title is at the bottom of the site footer, where it is not a heading over any type of content, then it should not be a semantic heading.

If it is a landing page without any other type of main heading, and the site title is in the site header, then it should be an H1.

[cbirdsong]

A common pattern I've seen and implemented is wrapping the site title/logo in an <h1> tag, but only on the home page where it makes sense as the page title. In traditional Wordpress terms it would look something like this:

<? if (is_front_page()): ?><h1><? endif; ?>

<strong>
	<a href="<? echo esc_url( home_url() ); ?>" rel="home">
		
		<? echo wp_get_attachment_image(get_theme_mod( 'custom_logo' ), 'medium'); ?>
		<span <? if (has_custom_logo()) { ?>class="screen-reader-text"<? } ?>>
			<? bloginfo( 'name' ); ?>
		</span>
	</a>
</strong>

<? if (is_front_page()): ?></h1><? endif; ?>

Is there any affordance for this pattern in full-site editing?

[carolinan]

The block is not context aware, it does not know if it is on the home page or where it is on the page.

I am not sure if there are ny good solutions to this, because I also don't think the element should change automatically without the site creator being aware.

[carolinan]

As for making proper semantic decisions, the document outline will show if headings are in the incorrect order, but maybe it needs to be more visible.

[pagelab]

If there is no way for the user to decide on the title level according to context (homepage vs inner pages), then the site title probably shouldn't be a <h1> by default.

A survey from 2017 showed that the majority (66%) of screen reader users prefer only one main heading containing the document title. There's also a Google News article that suggests the same as a best practice.

[carolinan]

Yes there is a way, and that is by adding different headers to different pages. That method It is not free from its own problems.

[pagelab]

Yes there is a way, and that is by adding different headers to different pages. That method It is not free from its own problems.

I mean, an automatic way to do this, as it is already possible with the Site Logo block by using add_theme_support( 'custom-logo', [ 'unlink-homepage-logo' => true ] )