wporg-p2 theme HTML headings hierarchy is not a11y-/web-standard

[hearvox]

The heading hierarchy used in the wporg-p2 theme at Make does not follow web-standards and so presents a11y problems. Many assistive technologies let users navigate a document by headings. The headings list is also how many users (and search engines) assess the content of document.

My more immediate problem is I'd like to illustrate the A11y Handbook with screenshots of screen-reader displays, using the A11y Handbook as an example of how to do it right. However, I can't because the wporg-p2 theme does not currently do headings right. (Aka, the A11y Handbook is not now in an accessible theme.)

For instance, here's the A11y Handbook's "Get Involved" page:
​https://make.wordpress.org/accessibility/handbook/about/get-involved/

Here's that page's headings (similar to how it looks in a screen-reader):
.h1: WordPress.org
..h2: Make WordPress Accessible
.h1: Menu
..h2: Chapters
..h2: Get Involved
......h6: Permalink
...h3: Topics
...h3: Who are we?
...h3: How do I get in touch?
...h3: Reply
......h6: Code is Poetry.

The problems are: 1) The page title in not an h1. 2) The headings skip levels. 3) Many items aren't really section headings at all, but rather are nav or lists.

A heading structure that semantically represents the page might be:
.h1: Get Involved
..h2: Who are we?
..h2: How do I get in touch?
..h2: Reply

I realize this suggested change would mean much pain, because of the needed theme changes. I'd be happy to help get those changes made, if Meta decides to pursue this.

[samuelsidler]

Is this an issue with the new o2 theme? We really need to get an accessibility review of it soon. (You can try it on most make sites, like ​make/meta.)

[hearvox]

@samuelsidler Thanks for reviving this issue. Looks like the problem persists. Below are two excerpts from the Headings nav menu items list (using Apple VoiceOver) for ​https://make.wordpress.org/meta/ . The headings in this theme still skip levels (1 to 4, etc.):

1: WordPress.org
1: Make WordPress.org
4: Welcome to the Meta Team!
4: Contact
...
1: New Homepage Redesign
3: Sketches were presented and thoughts shared....

[samuelsidler]

That's fun.

@mapk, @pento: One of you want to work on this?

[mapk]

In 4737:

Breathe: Preparing CSS to restructure hierarchy of headings.

The headings are a bit oddly used on the Make sites, so before I restructure the hierarchy for them, I wanted to prepare the CSS for it. The restructuring will lend to better accessibility with screen readers.

Props: hearvox

See: #1486

[mapk]

In 4740:

Breathe: Minor styling adjustments to sidebar nav, in-page nav, and welcome title.

Preparing for restructure of heading hierarchy and cleaning up some styling.

See #1486, #2410

[pento]

The sidebar title changes have been ​committed upstream, and deployed on dotorg.

[melchoyce]

Any other fixes needed here?