WordPress.org

Making WordPress.org

Opened 11 months ago

Closed 19 hours ago

#4120 closed defect (fixed)

Proposal to change the headings hierarchy in the About section

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

Description

Splitting this out from #4110.

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

http://cldup.com/Rf0s3erV2Y.jpeg

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:

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.

Attachments (2)

chart plugin tables revealed.png (249.8 KB) - added by afercia 2 weeks ago.
4120.diff (49.8 KB) - added by dufresnesteven 13 days ago.
Patch File

Download all attachments as: .zip

Change History (11)

#1 @dufresnesteven
2 weeks ago

@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.

#2 @afercia
2 weeks ago

@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?

#3 @dufresnesteven
13 days ago

@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?

#4 @dufresnesteven
13 days ago

  • Owner set to dufresnesteven
  • Status changed from new to accepted

@dufresnesteven
13 days ago

Patch File

#5 @dufresnesteven
13 days ago

@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

Last edited 13 days ago by dufresnesteven (previous) (diff)

#6 @afercia
6 days ago

@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!

#7 @dufresnesteven
6 days ago

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

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

#8 @tellyworth
19 hours ago

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.

#9 @tellyworth
19 hours ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.