Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Tab-based usability feedback on Gutenberg navigation.

Gutenberg Feedback 2017-12-03

Terminology

In my feedback I’m defining things this way:

  • Items - Individual block types in a list.
  • Sections - Groupings of Items with a semantic title
  • Tabs - Recent, Blocks, Embeds

Block insertion controls

Ultimately… I think the editor navigation would make more sense with a “rule” that tabs move you from “unit” to “unit”, and arrows move you within (and between, if they are nested) sections/units. It gives the interaction more of a consistent rule and I feel like it would help because people are transitioning between mental states if they’re perusing a list of Items vs jumping from Recent to Embed, for example.

So by that logic….

  • Leaving the search bar should be a tab action, as it is now.
  • Navigating between Tabs should be a tab action, not arrows. (I’m not doing this with a screen reader and that may require this experience, I don’t know.)
  • Navigating INTO a Section should be the down arrow.
  • The down arrow should also take you into the following Section, ideally. I know that sucks and it’s hard to do, but it would really help.
  • Keep the convenience of tabbing between Sections within a Tab. That’s great and really useful.
  • However, it’s currently disorienting when tabbing between Sections within a Tab; rather than being taken back to the last Item I had highlighted, I’d rather be taken to the top of the Section so I know where I am.
  • The Section title needs to be visible when you are tabbing back UP through the Sections. Right now it ends up hidden by the Tab navigation bar.
  • The right/left arrows need to work as well as the up/down ones for navigating between items within a section. If they are visually in two columns, there will be some users who intuitively think of them as right/left based.

Embeds Section

  • Using Section labels would be helpful here; it looks like we use the most popular embeds at the top and then show the rest in alphabetical order. Splitting these out with clear labels would be helpful.
  • "Speaker" Item in this section... is this SpeakerDeck? I ask b/c it worked with a SpeakerDeck embed; but if that's the case, the name should be updated.

Block "Inline" Editor

  • There's a larger issue that @jdelia and I logged here with regards to block insertion with a keyboard, but regardless... when you do get the controls for a block on tab in, it feels a little counterintuitive to shift + tab to go "back" to a link that didn't exist before. Technically I am not sure there's a good fix for it, though.

rianrietveld commented Dec 4, 2017

Gutenberg Accessibility Testing by Jacky D'Elia @jdelia
I disabled the trackpad on my MacBook Pro and tested without using a mouse.

Questions:

Is there a way to change the size of the image using keyboard only? I see that I can use the move to click on a corner and drag to change size.

Difficulty adding a gallery and selecting a group of images.

After Inserting image - how do I change the formatting of it? It was not obvious that I would need to use the Shift-tab to access the component toolbar.

Can I resize an image with the keyboard?

Issue: The Embeds panel - the order is confusing.
Suggestion: Add a horizontal line to separate the embeds that are in alphabetical order from the frequently used ones above. Or group the embed icons in the same way as the blocks (better option). As the embeds list grows it will become more unmanageable over time.

afercia commented Dec 13, 2017

Navigating between Tabs should be a tab action, not arrows. (I’m not doing this with a screen reader and that may require this experience, I don’t know.)

Note that this would defeat the purpose of the tabbed interface, as the expected interaction is switching tabs via arrows. The advantage is giving users the ability to jump directly from the active tab to its panel, without having to tab through all the tabs. Just imagine a tabbed interface with a dozen of tabs... See https://www.w3.org/TR/wai-aria-practices/#tabpanel

Worth noting that's also the way tabbed interfaces work in our operating systems, for example in macOS any tablist in System preferences:

screen shot 2017-12-13 at 14 03 43

or, on Windows, the task manager:

screenshot 22

where it is only possible to navigate through tabs with arrow keys.

Thanks for this. I see a lot has been made into issues, props to you both for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment