-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add headings for the Editor screen main sections #503
Add headings for the Editor screen main sections #503
Comments
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? |
To hide text in a way that's still accessible, WordPress uses the P.S. let's try to separate the visual look of headings from their semantics. Headings don't necessarily need to be "big" 🙂 |
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? |
I really think we should explore the hidden section title here. In my mind, the active section is already highlighted both by the page |
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. |
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? |
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 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). |
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}". |
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. |
Slightly unrelated but also the document title should be fixed: old editor: (or "Edit Page" etc, depending on what's being edited) Gutenberg: |
This adds a page heading for screen readers. If this mitigates #503, then we'd want to make sure that the correct post type is output, and the text is translatable.
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.
The text was updated successfully, but these errors were encountered: