Add headings for the Editor screen main sections

[afercia]

Splitting this out from #467

In the current plugin implementation, the Editor screen has no headings at all.

It misses a main H1 and maybe it could benefit from some H2 used to identify the main UI sections (to evaluate, this depends on the actual grouping of the main controls).

Headings are used for content navigation and allow screen reader users to "jump" from a section to another one. That's clearly explained on https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-the-admin-screens/ which also illustrates all the work done about headings in the last releases.
A proper headings hierarchy is also a WCAG requirement.

I'm not a designer, so I'd leave the visual part to designers 🙂 For the accessibility part, I'd propose to discuss this issue in the next accessibility meeting on Slack.

[jasmussen]

We haven't designed a spot for this heading, so the idea of adding it as invisible screen reader text appeals to me. What tool would you recommend we use when going about this?

[afercia]

I'd also note that, currently, the main heading is the only piece of information that says to user what they're editing: post, custom post, or page:

[afercia]

What tool would you recommend we use when going about this?

To hide text in a way that's still accessible, WordPress uses the screen-reader-text CSS class. However, I'd consider to make the heading visible as per the consideration in my last comment.

P.S. let's try to separate the visual look of headings from their semantics. Headings don't necessarily need to be "big" 🙂

[mapk]

I'm moving my comment from #467 , sorry for derailing the other ticket.

I've added the word "Editor:" to the Toolbar. That word could be an H1, but styled to match the surrounding interface. The dropdown "Visual" would not be part of it, and not affect the H1. Seems like it might fit nicely with tab order too.

Any thoughts?

[jasmussen]

I really think we should explore the hidden section title here. In my mind, the active section is already highlighted both by the page <title>, as well as the selected item in the sidebar. I don't know how you can end up on this page, without knowing what it's all about. In addition to this, the sidebar button label will indicate whether you're editing a post, page, or custom post type — "Page Settings".

[afercia]

I think there's the risk of underestimating the potential confusion for users here 🙂 Having a cleaner UI is a win for everyone. But, as I see it, this shouldn't happen at the cost of removing important information.

I still think there should be some sort of indication about the "what", together with re-considering the ordering and grouping of controls. I'd also like to see this being discussed by the design team and be open to the community feedback. As far as I know, a real, broad, discussion hasn't happened yet.

One more potential issue is about controls that use icons only. Icons don't have a universal meaning. I don't fully understand why some controls have only icons and other have icons plus some visible text. What't the reasoning behind that?

Also to consider, there are functions in WP that provide labels to be used by CPTs for this screen. Integrating such a change wouldn't be so easy.

[joyously]

I don't know how you can end up on this page, without knowing what it's all about.

Are you thinking of users that only ever use one browser window? There are a lot of users that always use more than one window, especially when copying. In a scenario that involves combining content from multiple pages or custom posts into a different post, there could be several windows open on editor pages that all look similar (due to copied content). How would that user tell them apart easily?

[afercia]

In the current WP editor, one of the most difficult tasks for screen reader users is navigating from the editable area to the editor toolbar. There is the TinyMCE shortcut Alt+F10, maybe not so intuitive. Instead, headings are the predominant mechanism for finding content, together with an increasing knowledge and use of ARIA landmark regions.

I've played a bit with this, and a few headings could greatly help, for example using Safari + VoiceOver:

It would be a matter of just a few keypresses to find the toolbars or skip the toolbars and go straight to the editor (headings text is just for testing purposes, worth considering a better wording).

[afercia]

To recap the headings situation as of August 3rd:

The headings in the first group in the screenshot above are all in the post content. The post title is always presented as H1.

The headings in the second group are in the editor sidebar and they start with a H3 level.

Right now, the Gutenberg screen is the only screen in WordPress that doesn't have a main H1 heading to identify the purpose of the page. In the classic editor, this is done with the h1 "Edit Post", "Edit Page", "Edit {custom post type name}".

[afercia]

Marking with the high priority label to indicate it's an a11y priority. The Gutenberg page is the only one in WordPress that doesn't have a proper heading hierarchy starting with an H1 that indicates what the page is about.

[afercia]

Slightly unrelated but also the document title should be fixed:

old editor:
<title>Edit Post &lsaquo; WordPress Develop &#8212; WordPress</title>

(or "Edit Page" etc, depending on what's being edited)

Gutenberg:
<title>Welcome to the Gutenberg Editor | Add New Post ‹ WordPress Develop — WordPress</title>