[wp-meta] [Making WordPress.org] #4121: Proposal to change the headings hierarchy in the Blog section

[Making WordPress.org]

#4121: Proposal to change the headings hierarchy in the Blog section
---------------------+--------------------
 Reporter:  afercia  |      Owner:  (none)
     Type:  defect   |     Status:  new
 Priority:  normal   |  Milestone:
Component:  General  |   Keywords:
---------------------+--------------------
 Splitting this out from #4110.

 The headings hierarchy in the Blog section has room for improvements for
 better SEO and accessibility:

 [[Image(http://cldup.com/FQdgefzO-Z.jpeg)]]

 As mentioned in #4112 the logo shouldn't be a `h1`. This page should have
 a main `h1` that identifies the main topic of the page. Suggested: "Blog
 archive".

 More importantly, as for the case of the Make blogs, this page suffers
 from a problem which is present also in the bundled themes. In the archive
 pages, the post titles should be `h2`, while in the single post page, the
 post title should be  `h1`. See also #4119.

 Basically:
 - each post title shouldn't be a `h2`: given the current headings
 structure (see screenshot above), it's impossible to understand which `h2`
 are post titles and which ones come from the post content
 - search engines crawlers and screen reader users can't understand which
 headings represent the post titles
 - it's impossible to change the headings from the posts content "on the
 fly" and bump them up one level automatically only in the archive page
 - in the single post page, the post title needs to stay as `h1` and the
 headings in the content need to have a correct hierarchy starting from
 `h2`
 - in the archive page, one option could be making the post titles `h2` and
 displaying only the post excerpts and not the entire posts

 **Social sharing and sidebar headings:**
 At the end of the headings list the headings used for the social sharing
 and the ones used in the sidebar have an incorrect hierarchy, currently:

 {{{
 2 Further Reading:
   3 Share this:
   3 Like this:
     4 See Also:
     4 Categories
     4 Subscribe to WordPress News
 }}}

 Where "Further Reading:" is the last heading in the last post in the
 current archive. This hierarchy is clearly incorrect because neither the
 social headings or the sidebar ones are logically sub-headings of "Further
 Reading:".

 Suggested change (not perfect, but better):

 {{{
 2 Social sharing
   3 Share this: (output by sharedaddy so I guess it can't be changed)
   3 Like this: (output by sharedaddy so I guess it can't be changed)
 2 See Also:
 2 Categories
 2 Subscribe to WordPress News
 }}}

 **Single post page:**
 For example: https://wordpress.org/news/2019/01/wordpress-5-1-beta-2/

 - the logo shouldn't be a `h1`
 - the post title should be the only `h1` in the page
 - post authors should use a correct headings hierarchy in their content
 starting with `h1` headings, which is made easier with Gutenberg
 - the social sharing headings, the "Post navigation" heading (visually
 hidden with `screen-reader-text`), and the sidebar headings have an
 incorrect hierarchy, much like in the archive page. Currently:

 {{{
 2 How to Help
   3 Share this: (output by sharedaddy so I guess it can't be changed)
   3 Like this: (output by sharedaddy so I guess it can't be changed)
 2 Post navigation
     4 See Also:
     4 Categories
     4 Subscribe to WordPress News
 }}}

 Where "How to Help" is the last heading in the example post content.
 Suggested change:

 {{{
 2 Social sharing
   3 Share this:
   3 Like this:
 2 Post navigation
 2 See Also:
 2 Categories
 2 Subscribe to WordPress News
 }}}

 Please consider there are other pages in the Blog section (the categories
 ones for example). A complete analysis is out of the scope of this ticket.
 However, these are general guidelines that should be applied everywhere.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/4121>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org