WordPress.org

Making WordPress.org

Opened 2 years ago

Last modified 6 weeks ago

#1486 new defect

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

Reported by: hearvox Owned by:
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: accessibility
Cc:

Description

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.

Change History (9)

This ticket was mentioned in Slack in #accessibility by hearvox. View the logs.


2 years ago

#2 @samuelsidler
11 months ago

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

#3 @hearvox
11 months ago

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

#4 @samuelsidler
11 months ago

That's fun.

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

#5 @mapk
11 months ago

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

#6 @mapk
11 months ago

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

#7 @pento
11 months ago

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

#8 @melchoyce
5 months ago

Any other fixes needed here?

#9 @iandunn
6 weeks ago

  • Keywords accessibility added
Note: See TracTickets for help on using tickets.