Skip to content

Simplify keyboard navigation through blocks #5694

@afercia

Description

@afercia

Follow up to #2031. The accessibility team has identified a list of 10 high priority issues for version 1 and agreed with the Gutenberg team to mark them with the "merge proposal" milestone.

For keyboard and screen reader users, keyboard navigation through the blocks needs to be greatly simplified. Feedback received from accessibility testers so far has always reported that navigation through the UI is confusing and terribly complicated: there are just too many tab stops, too many controls, formatting toolbars, block movers, ellipsis buttons, and the like. As long as the amount of blocks in a post increases, the UI controls increase exponentially, adding several tab stops for each block.

This issue was discussed at length in #2031 and one of the identified solutions was trying to implement two keyboard interaction modes: "navigation mode", and "edit mode". There's an initial PR that started experimenting with this, see #3195.

Trying to summarize the basic idea;

  • it is meant for keyboard interaction, shouldn't affect pointing device users
  • say in a post there are 20 blocks
  • the initial state of the UI for keyboard users should be "navigation mode"
  • in "navigation mode", tabbing through the 20 blocks moves focus through each block: this way, in our example, with 20 tab presses users would be able to navigate through the 20 blocks
  • once a block has focus, pressing Enter switches the block to "Edit mode"
  • in "Edit mode" users can normally operate on the edited block
  • pressing Escape switches the UI back to "navigation mode"
  • users can continue their quick navigation through blocks

The accessibility team agreed this could be a very interesting idea (VIM users might like it ;) ) and probably one of the few options to guarantee a decent level of keyboard accessibility at this point of the project. Open to other suggestions, but we'd like to strongly recommend the interaction model described above.

Of course, once implemented, this should be clearly documented and made available in a User Guide, see #5420.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions