-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Add keyboard shortcuts à la Slack to jump through the main UI sections #467
Description
Reference: looking at the screenshot posted on Slack on https://wordpress.slack.com/archives/C02QB2JS7/p1492621873449513
The toolbar:
The order and logical grouping of controls/links/info is fundamental for accessibility, and also usability. There are many things to consider here, will try to highlight some general issues.
The Publish button:
The Editor experience should be a type type type experience. For accessibility, add to that some tab tab tab experience. 🙂 Keyboard users and screen reader users will expect the Publish button to be after the editing area. That's the convention for any form. Placing it before the editing area would repeat the same mistake done in the Customizer with the "Save" button. Forcing users to tab backwards or explore the content to find the Publish button would be extremely confusing and annoying.
For keyboard and screen reader users, navigating content is a linearized experience that follows the order of elements in the markup. So the Publish button should come after the editor in the markup.
Worth also noting that the WCAG state the visual order should match the tab order.
I'd say this is also an usability issue, since the logical workflow when editing a post is:
Enter the title > Enter the content > Publish
The other controls/info etc:
The position of the other controls should be carefully considered too. Probably some of them can be placed before the editor. However, the most important thing here is they should be logically grouped.
I know this is just a first implementation and many things are probably temporary, but worth considering that currently these controls are a bit mixed up and there's no a clear, logical grouping.
Trying to list their different purposes:
1: action related to the editing tool: switch the Editor's mode
2: info related to the editing state: Saved (not sure if it's meant for other purposes too)
3: action related to the editing flow: undo/redo
4: action related to the editing tool/flow: a "Plus" thing, I guess to show additional editing controls
5: link related to the editing state: preview the post
6: action related to the editing tool/flow: control to expand the Post Settings
7: action related to the editing flow: Publish button
I may be wrong on some of them 🙂 but my goal here is to highlight they have a different nature and purpose, so they should be grouped accordingly. Off the top of my head, a possible grouping could be:
- actions that do something to the content (undo, redo, etc.)
- actions that do something to the editing tool (showing additional controls, switching mode, etc.)
- things that show the post state (Saved, Preview, etc.)
- the Publish button is a special case (see above)
I'd say the group 1. should be placed as close as possible to the content, in a place that's very easy to reach when tabbing. These are controls that get used often while editing content so reaching them should require a minimal effort.
Groups 2. and 3. are probably going to be used not so often as the first group. I'm curious about the plus "+" control though, since it's a bit unclear what it will reveal when pressed. Same for the "Post Settings".
Some of the issues about "what's around the Editor" were discussed also on https://core.trac.wordpress.org/ticket/29838 where one of things considered was to remove anything that comes before the editor and place it elsewhere. This is especially true when it comes to mobile devices. I'd recommend everyone to follow the links in the ticket and watch the videos / read the posts by Mark Jaquith and Ryan Boren.
Additional considerations:
- where's the "Add Media" button?
- where's a space dedicated to plugins that add their custom buttons? (usually, they add them after the "Add Media" one)
