Proposal to change the headings hierarchy in the Getting Involved (Make) section

[afercia]

Splitting this out from #4110.

The headings hierarchy in the Getting Involved (Make) section has room for improvements for better SEO and accessibility:

• as mentioned in #4112 the logo shouldn't be a h1
• the main topic in this page is "Make WordPress" and that should be the only h1 in the page

The "teaser" or "kicker" text:
it's made of two headings: h1 + h5: looks like these headings are used for visual purposes but their semantic is inappropriate and the hierarchy is incorrect. These are not headings, they're not "titles that identify a section". Instead, they're introductory text and they should be two styled paragraphs under the main h1 heading "Make WordPress"

The "There are many different ways for you to get involved with WordPress" h2:
Either it shouldn't be a heading at all and should be changed to a styled paragraph or if it's important to keep it as a h2, then all the headings under it should be h2. For the sake of simplicity I'd suggest the first option.

Meetings sub-section:
"Upcoming WordPress Meetings" should be the only heading in the page and should be a h1

Team Updates section (similar to all the Make blogs):

This one is a bit complicated:

• there should be just one h1 in the page ("Team Updates")
• each post title shouldn't be a h1: for example, the bundled themes take care of this and in the archive pages they render the post titles as h2
• if the post titles get changed to h2, then the headings in their content would have an incorrect hierarchy: this is even more complicated by the fact some posts use h2 in their content and some posts use h3 (see the screenshot above)
• in the single post page, the post title need to stay as h1 and the headings in the content need to have a correct hierarchy
• worth nothing this is a problem with all the bundled themes too: an option could be displaying only the post excerpts and not the entire posts
• some teams need to be informed they have to use h2 headings in their content anyways (I seem to recall with the old design h3 headings were recommended: this is no longer the case with the new design)

Additionally, at the bottom of the page:

• "Post navigation", which is visually hidden with screen-reader-text shouldn't be a h1, it needs to be changed to h2
• the three headings in the sidebar: "About This Blog", "Email Updates", "Recent Activity", need to be changed from h3 to h2. The current hierarchy is clearly incorrect:

1 Post navigation
  3 About This Blog
  3 Email Updates
  3 Recent Activity

These recommendation apply to all the Make blogs, with a few additional ones. For example, in ​the Make/Core blog:

"Welcome" and "Communication" need to be changed from h3 to h2. If I'm not wrong, each team can edit this part of the page so all the teams should be informed and invited to review and edit their pages to improve the headings hierarchy.

Please consider going through all the pages in the Make section is out of the scope of this ticket. However, these are general guidelines that should be applied everywhere.

[afercia]

Noticed a couple more things:

Looks like all the widgets in the sidebar use h3 headings:

These should all be changed to h2 for the reasons explained previously.
Suggested: maybe consider to use before_title and after_title when registering the sidebar.

Also, looks like cross-comments in the archive page are thrown out as h4 headings, not sure why:

as in the archive page they're equivalent to an entry in the posts list, they should be changed to h2.

[afercia]

Note: in the make/core blog, I've changed the "Welcome" and "Communication" headings from h3 to h2, as those can be edited in the "Welcome" page.

[dufresnesteven]

The "There are many different ways for you to get involved with WordPress" h2:
Either it shouldn't be a heading at all and should be changed to a styled paragraph or if it's important to keep it as a h2, then all the headings under it should be h2. For the sake of simplicity I'd suggest the first option.

Did you mean everything that comes under should be an h3?

Also, since each of the tiles are wrapped in an <article> tag, shouldn't the heading be <h1>? According to the html5 spec, an <article> tag:

"... represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication." Ref: ​https://www.w3.org/TR/2011/WD-html5-author-20110809/the-article-element.html