`<h1>` missing on Settings Screens

[seb-jean]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/page-examples/settings-screens
• Component name: Stacked

Describe the bug <h1> are missing on for Settings screens example pages. In the example that James proposed, there was a <h1>.

To Reproduce Steps to reproduce the behavior:

1. Go to https://tailwindui.com/components/application-ui/page-examples/settings-screens
2. Scroll down to 'Stacked'
3. <h1> is missing

Screenshots

On Tailwind UI:

On Tweet:

What do you think ? 😄

[ACPK]

@seb-jean, considering the original GitHub issue you reported regarding the missing <h1> tags in the "Stacked" component of the Settings screens example pages at tailwindui.com/components/application-ui/page-examples/settings-screens, it's important to discuss the impact on SEO and ADA/accessibility.

I observed an interesting pattern during a Google search for related terms (e.g., importance of <h1> tag): Facebook's setting page doesn't appear, while LinkedIn's does. This emphasizes the potential importance of including <h1> tags for better search engine visibility.

When testing with a screen reader on the TailwindUI's setting layout, I found that the presence of the <h1> tag significantly contributed to accessibility. Given this context, it would be valuable to address the missing <h1> tags in the "Stacked" component to align with best practices for both SEO and ADA considerations. I'm happy to discuss how I have dealt with pages with sub-menus.

[zulkufdemirhan]

If you have concerns about SEO and search results and simultaneously don't want to disrupt the existing design, you can customize your 'font-size' as outlined in the documentation at Tailwindcss.

Alternatively, you can create a custom class such as 'font-size-h2' as shown below to address this issue without compromising the current design. In this way, by preserving the appearance, you create an SEO compatible element.

<h1 class="font-size-h2 font-semibold leading-7 text-gray-900">Profile</h1>

[reinink]

Hey folks! My apologies for the delay on this one.

I've just updated these two example settings screens to include an <h1> that's only visible to screen readers:

Sidebar on dark:

      <main>
+       <h1 class="sr-only">Account Settings</h1>

Stacked:

  <div class="mx-auto max-w-7xl pt-16 lg:flex lg:gap-x-16 lg:px-8">
+   <h1 class="sr-only">General Settings</h1>

Of course you're welcome to make these titles visible in your own projects, but we've opted to keep these hidden since the design doesn't really require them to be present. But totally agree that this is good to have for screen reader and SEO purposes.

Thanks for sharing this feedback! 🤙