Proposal to change the headings hierarchy in the About section

[afercia]

Splitting this out from #4110.

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

In the main page, the headings hierarchy looks pretty good with one exception: as mentioned in #4112 the logo shouldn't be a h1. The main topic in this page is currently "Democratize Publishing" and that should be the only h1 in the page.

Same in the sub-pages: there should be only one h1 and it should be the main title.

In some of the sub-pages, for example:

• ​https://wordpress.org/about/features/
• ​https://wordpress.org/about/requirements/
• ​https://wordpress.org/about/accessibility/
• ​https://wordpress.org/about/philosophy/

The headings within the content are h3: they should be changed to h2.

Testimonials page:
On ​https://wordpress.org/about/testimonials/ it would be nice to have a h2 heading before the list of embedded tweets to identify the section.

Note:
In ​the statistics page, it would be nice to have headings before each graph section. Also, it would be great to have an alternative representation of the graphs in the form of data tables, but this is out of the scope of this ticket.

[dufresnesteven]

@afercia

Can we break this into another ticket:

In the statistics page, it would be nice to have headings before each graph section. Also, it would be great to have an alternative representation of the graphs in the form of data tables, but this is out of the scope of this ticket.

It will require a fair bit of work with the chart plugin to not duplicate the headings.

[afercia]

@dufresnesteven hello!
Sure, it can be split.
Looking (quickly) into it, maybe the current <text> elements could be hidden via CSS.
Re: data tables, I see there's already something that generates a table (currently the tables are visually hidden). I guess that's generated by the plugin? The markup would need some improvements but seems to me it's a good start. Maybe worth also considering to put the tables within sections that users can expand. Sorry I'm not that familiar with the chart plugin. Can you point me at it, when you have a chance?

[dufresnesteven]

@afercia We have a thin layer of custom code that runs on top of the google chart library.

You can take a peek at the custom layer here:
​https://s.w.org/wp-content/themes/pub/wporg-main/js/page-stats.js?ver=2

You can read more about the google chart library here:
​https://developers.google.com/chart/interactive/docs/gallery/piechart

I went ahead and moved the titles out into the markup. If we want to make adjustments to show the table or add collapsible features can we create a new ticket?

[dufresnesteven]

Patch File

[dufresnesteven]

@dd32 Patch Added:

Changes:

Bump the majority of the h3 headings into h2.

Create css classes for the headings

• This will allow us to disconnect the html structure from the visual structure. We have some inconsistencies here as it is. This will also allow us to maintain some of the heading to copy proportions that we currently have as we restructure some of the layout.

Bring the font sizes down

• The scale we are using was forcing us to write a number of custom classes for titles to bring the size down. We should start to invert that relationship and treat very large copy as the exception.

Deployment notes:

Need to compile wporg-main css

[afercia]

@dufresnesteven thanks for pointing me at the code and for digging into this! I'm not sure I'll have the time to help. As far as I see, it's the Google Chart plugin that generates the tables. Nice.

Then I'd say this page should ensure each chart has its corresponding table and the tables should be made available also visually. That would help all users, thinking for example at users who would like to copy and paste the data for later reuse.

If we want to make adjustments to show the table or add collapsible features can we create a new ticket?

Sounds perfectly reasonable to me, thanks!

[dufresnesteven]

Broke out work to display the pie chart tables into another ticket: 4891.

The scope of this ticket remains with add/modifying header tags.

[tellyworth]

In 9327:

Main theme: CSS needed for heading hierarchy a11y fix

This is the CSS and JS component of a patch that adjusts the h1/h2/.. heading hierarchy in the About section. Markup will come in a later deploy.

See #4120.

[tellyworth]

In 9328:

Main theme: fix headings hierarchy in About section

This is the markup following r9327, to fix the headings hierarchy for better SEO and accessibility.

Props dufresnesteven, afercia.
Fixes #4120.