Making WordPress.org

Opened 5 years ago

Last modified 4 years ago

#4112 new defect (bug)

Proposal to change the headings hierarchy in the Home page

Reported by: afercia's profile afercia Owned by:
Milestone: Priority: normal
Component: General Keywords: headings-hierarchy
Cc:

Description

Splitting this out from #4110.

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

http://cldup.com/3VdWJjlE_Q.jpeg

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.

Attachments (4)

rosetta locale.png (355.5 KB) - added by afercia 4 years ago.
showcase_heading_fix.diff (13.3 KB) - added by dufresnesteven 4 years ago.
Updates wporg-showcase headings in preparation of h1 logo removal.
showcase_headings.png (115.4 KB) - added by dufresnesteven 4 years ago.
Proposed heading structure in showcase_heading_fix.diff.
showcase_heading_fix.2.diff (13.3 KB) - added by dufresnesteven 4 years ago.
Remove the hidden sidebar heading and bump up its children.

Download all attachments as: .zip

Change History (12)

#1 @afercia
5 years ago

  • Summary changed from Audit the headings hierarchy in the Home page to Proposal to change the headings hierarchy in the Home page

#2 @dufresnesteven
4 years ago

@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.

#3 @dd32
4 years ago

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/

#4 follow-up: @afercia
4 years ago

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.

#5 in reply to: ↑ 4 @dufresnesteven
4 years ago

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 all 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.

Last edited 4 years ago by dufresnesteven (previous) (diff)

#6 @afercia
4 years ago

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

#7 @dufresnesteven
4 years ago

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
Last edited 4 years ago by dufresnesteven (previous) (diff)

@dufresnesteven
4 years ago

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

@dufresnesteven
4 years ago

Proposed heading structure in showcase_heading_fix.diff.

@dufresnesteven
4 years ago

Remove the hidden sidebar heading and bump up its children.

#8 @dufresnesteven
4 years ago

In 9933:

Showcase: Improve heading structure.

See: #4112

Note: See TracTickets for help on using tickets.