Proposal to change the headings hierarchy in the Home page

[afercia]

Splitting this out from #4110.

The headings hierarchy in the home page has room for improvements for better SEO and accessibility:

Currently, there are two h1 and one level is skipped, thus producing an incorrect hierarchy.

Whether the logo should be or not be the main h1 heading can be matter of debate. However, in this case I'd say the logo should not be the main heading across the whole .org network.

In this page, the main topic is clearly "Meet WordPress", which should be the only h1 in the page, followed by the other headings in a correct hierarchy: all the headings after "Get started with WordPress" should be bumped up by one level.

[dufresnesteven]

@afercia There are a number of pages that currently do not have an h1 tag. Approach wise, is it better to have 2 h1 tags on a page, or no h1.

[dd32]

Just a quick note that currently on Rosetta sites, the heading is the h1 and the Locale is a h2 (which it shouldn't be most likely). eg: ​https://test.wordpress.org/

[afercia]

is it better to have 2 h1 tags on a page, or no h1.

None of the two options is ideal. There should be one H1, which identifies the main topic of the document.

on Rosetta sites, the heading is the h1 and the Locale is a h2 (which it shouldn't be most likely).

Yup, that isn't ideal (see attached screenshot). Having the Locale in the headings hierarchy doesn't make much sense. Also: headings should be used to identify sections of content. Using headings as "subtitles" directly after another heading isn't so appropriate. Subtitles are not headings: they don't introduce new sections of content.

Why a correct headings hierarchy matters for assistive technology users: ​https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-the-admin-screens/

Putting it simply, one of the first things screen reader users do in a web page to find relevant content is to press the 1 key on their keyboard to jump to the first <h1> heading and then they will try the key 2 to find the <h2> headings and so on. Thus, it’s extremely important for WordPress to provide a correct headings hierarchy, ensuring no headings levels are skipped.

[dufresnesteven]

Replying to afercia:

is it better to have 2 h1 tags on a page, or no h1.

None of the two options is ideal. There should be one H1, which identifies the main topic of the document.

Of course neither are ideal and the value of these changes are not in question. Software development is iterative. The question relates to workflow.

The reality is we'll need to make some concessions while we make these changes. It isn't likely that we remove the h1 on the logo and find the pages/templates that don't have an h1 (because they were written with the assumption that there was already an h1) all at once. So instead of waiting for everything to be perfect, we should chart an iterative path to improvement... because as you have identified, it is already "broken".

So let me restate, do we prefer to add h1 tags to pages that don't have them until we pass a threshold, then strip the h1 on the logo, or the opposite.

[afercia]

Then, as a temporary step, I'd vote for two H1 because something is better than nothing.

[dufresnesteven]

Just dumping this here:

I ran a quick scan of wordpress.org using a crawler at a depth of 2. It's not 100% accurate but it's will help to identify which pages to update.

{
 // These pages have too many h1 tags, even after we remove the h1 from the logo
  removeH1: [ 
    'https://developer.wordpress.org/coding-standards/',
    'https://developer.wordpress.org/rest-api/',
    'https://developer.wordpress.org/apis/',
    'https://developer.wordpress.org/plugins/',
    'https://developer.wordpress.org/themes/',
    'https://developer.wordpress.org/block-editor/'
  ],

// These pages will have 0 h1 tags after removing it from the logo.
  addH1: [
    'https://wordpress.org/support/forums/',
    'https://wordpress.org/news/2020/04/people-of-wordpress-mario-peshev/',
    'https://wordpress.org/news/',
    'https://wordpress.org/themes/twentysixteen/',
    'https://wordpress.org/themes/getting-started/',

  ]
}

Current Status:

Completed

'https://wordpress.org/mobile/', //https://meta.trac.wordpress.org/ticket/4122
'https://wordpress.org/hosting/', //https://meta.trac.wordpress.org/ticket/4116
'https://wordpress.org/showcase/',
'https://wordpress.org/showcase/the-white-house/',
'https://wordpress.org/showcase/tag/education/',
'https://wordpress.org/download/counter/',
'https://wordpress.org/themes/twentysixteen/', //https://meta.trac.wordpress.org/ticket/4113

[dufresnesteven]

Updates wporg-showcase headings in preparation of h1 logo removal.

[dufresnesteven]

Proposed heading structure in showcase_heading_fix.diff.

[dufresnesteven]

Remove the hidden sidebar heading and bump up its children.

[dufresnesteven]

In 9933:

Showcase: Improve heading structure.

See: #4112

[rcreators]

@afercia, the heading issue has been solved with the new homepage design.

1) Only one H1:

• Meet WordPress

2) The rest of the Headings are H2:

• Design
• Build
• Extend
• See what's new
• One platform, a universe of possibilities
• Meet the WordPress community
• Build for yourself, not by yourself
• Latest WordPress news
• Get started

Please confirm and if its solved, lets close the ticket.

[afercia]

Thanks @rcreators yes the headings hierarchy has improved with the new design. Closing.