Accessibility of Gutenberg, the state of play


How accessible is Gutenberg in its current state (version 2.4)? To answer this the Accessibility team set up a list of minimum requirement, did code reviews and research, gave recommendations and set up user tests.

The short answer is:

  • Gutenberg still needs extensive work to meet basic standards, like keyboard accessibility and semantics
  • Especially for screen reader users, Gutenberg as it stands right now is a dramatic step back in usability
  • We need to write a manual/documentation for assistive technology users

From the start

During development, almost from the start, Andrea Fercia (@afercia) did extensive a11y (accessibility) testing and research. He and others created issues labeled accessibility on GitHub to address the issues found (Andrea created more than 50 of them).

At the moment 70 a11y issues are open, 166 are closed. A lot has been addressed, but there are still very important issues open (like for keyboard accessibility, tab order and navigation).

User testing

When Gutenberg 2.3 was released, Tammie Lister (@karmatosed) considered it ready enough for a complete accessibility test.

We wrote a user test, that includes the basic functionality needed to publish a post. Like add a title, headings, paragraphs, a list, a table an image and a video, use the block options and publish.

On our testserver we installed the plugin, version 2.3, and gave our a11y test team access. Joe Dolson also recruited accessibility experts for a test of version 2.4 at the CSUN conference. All results are reported in the Google spreadsheet Gutenberg a11y test results.

So far we’ve got good quality test results for

  • Keyboard only
  • Dragon Naturally Speaking
  • VoiceOver / Safari
  • NVDA / Firefox

Andrea created new GitHub issues from the reported problems or added extra information with the already reported ones.

Videos with user tests

Note: These users (Eric Wright and Sina Bahram) are leading accessibility experts, using their assistive technology on a daily basis and using WordPress for their work.


Minimum requirements before merge

To set a baseline, what should be fixed before merge we set up a list of requirements:

  1. Keyboard navigation through blocks needs to be greatly simplified and streamlined
  2. For some components, there’s the need to constrain tabbing within the component (i.e. they should behave like “modals”)
  3. The publishing flow needs to be simplified, currently its accessibility is terrible
  4. Everything needs to live inside the landmark regions
  5. Text mode: a simple textarea is the only guarantee to enable users to publish content, regardless of the device / technology they use
  6. Write documentation for keyboard and screen reader users.
  7. Consider a mechanism to customize shortcuts, e.g. Cmd/Ctrl + backtick, see issue #3218
  8. Block toolbars position counter intuitive for keyboard users, see issue #3976
  9. The Date picker must be keyboard accessible

Severe issues

One of the most severe issue is the keyboard accessibility. The keyboard tab order is unpredictable. The tab order for and backwards is not the same. Publishing a post is a puzzle and the date picker is unreachable with a keyboard only.

Another issue is the need for quick navigation tools, like shortcuts and better use of landmarks and headings. There are so much more actions to take for adding or modifying a block. Compared to the current classic editor, publishing a post with a screen reader takes much more time and effort.

Because the extensive use of icons, voice recognition users have to guess the accessible names for buttons to activate them. This needs a design decision.

Actions to take

  • Fixing the keyboard accessibility and screen reader navigation is a high priority. Andrea opened issues for this and we need to prioritize these
  • At WordCamp London and Europe we will do extra user testing with assistive technology and discuss the results with Tammie Lister and the Gutenberg developers present
  • The accessibility team needs to take responsibility for the manuals and documentation. This documents only can be written after the minimum requirements as listed above are met

#accessibility-usertest, #gutenberg