WordPress.org

Making WordPress.org

Opened 7 weeks ago

Last modified 7 weeks ago

#4110 new defect

Consider to audit the headings hierarchy across the .org network

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

Description

Headings are important not only for semantics and SEO: they are actually used by screen reader users as the predominant mechanism to find information on a page.

For better accessibility, SEO, and semantics there are some best known practices, also recommended by the core accessibility team:

  • a main h1 heading should be used to communicate the main page topic
  • there should be only one h1 in a page
  • the main topic of a page is rarely the site title, this is maybe true only on the home page (and it's still matter of debate)
  • in all the other pages, the main h1 is meant to be used for that specific page topic
  • headings needs to have a correct hierarchy: no levels should be skipped

There are different tools to check the headings structure of a page. For the purpose of this ticket, I've used the HeadingsMap Chrome extension. I've also collected a series of screenshots to illustrate the headings hierarchy in the main pages of the .org network as of today, January 28, 2018: https://cloudup.com/cCODexEIFbq

To recap:

  • Home: two h1 and incorrect hierarchy
  • Showcase: incorrect hierarchy
  • Themes: two h1 and incorrect hierarchy
  • Plugins: two h1
  • Mobile: hierarchy OK but the main page topic is not a h1
  • Support: two h1 and incorrect hierarchy
  • Get involved (Make): two h1 and incorrect hierarchy
  • About: two h1
  • Blog: hierarchy OK but the main page topic is not a h1
  • Hosting: hierarchy OK but the main page topic is not a h1

I realize the .org network is made of different templates coming from different sources and I guess it's a complicated setup. However, it would be great to make sure the headings hierarchy is correct on all the network pages.

Change History (4)

#1 @afercia
7 weeks ago

As requested by Marketing & Communications, I'm going to split this ticket in separate tickets for each main .org section.

#2 @afercia
7 weeks ago

  • Keywords headings-hierarchy added

#4 @dd32
7 weeks ago

When testing for these headers, it'd be advisable to use localised versions of the directories/etc as the rosetta headers will affect the overall hierarchy.

Right now it seems that the header being a <h1> is going to block most of the changes, sites like https://test.wordpress.org/ also have a <h2> there though.
Removing that h1/h2 is "easy" done if someone wants to suggest the alternate HTML and/or CSS to make it happen.

Note: See TracTickets for help on using tickets.