• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter

Email [email protected]

  • Home
  • About
  • Services
  • Portfolio
    • Social Sorted
    • Barclay Viewforth Church
    • The Sir Arthur Conan Doyle Centre
    • Social Impact Scotland
    • Forth Sector Employability Services
    • Work4ME
    • Reflective Spaces
  • Blog
  • Contact
You are here: Home / Accessibility / The Evolution Of Gutenberg – Has It Improved?

The Evolution Of Gutenberg – Has It Improved?

October 16, 2017 By Claire Brotherton 4 Comments

It’s been three months since I last looked at the WordPress Gutenberg editor, so I thought it was time to revisit.

The last version I tried was version 0.4.

It’s moved on quite a bit since then. We’re now on to version 1.4.

Gutenberg 1.4 demo post

What’s new in Gutenberg?

Here are some of the changes I’ve noticed from my previous try-out:

Blocks have the Open Settings menu represented by three vertical dots, which opens up a submenu.

The small cog icon now does something! It opens up the inspector with a Block settings panel. This lives next to the Document settings in the sidebar.

There’s the option to change between visual and text mode in a block represented by a small HTML button.

Paragraph text blocks can now have text and background colours. These changes affect the whole block. There’s no way to recolour single words or text selections.

Text size can be changed with a slider or an increment/decrement control.

Images can now be resized as well as aligned. (The centre alignment seemed to be broken, though).

A number of new blocks including a Verse block and a Columns block which can have up to four columns.

A Classic Text block has also been added which simulates the current TinyMCE editor. Creating a new paragraph in this block does not create a new block.

A new control to enable sticky posts.

There’s a full range of post formats available from a dropdown menu.

Categories and tags can be added.

The number of revisions is shown. Clicking on that link takes you to the revision section to compare revisions.

There’s an Extended settings tab which promises support for meta boxes in a future release. Plugin authors like Yoast have been pushing for meta box support in Gutenberg.

Settings for Gutenberg paragraph block
Settings for Gutenberg paragraph block including text size and colours

 

Post information – word count, block count and headings

A new popup exists with the i button. Pressing this shows you information about your post.

You can see the word count, block count and headings count.

If you have added at least two headings (the title is ignored) a Table of Contents is generated.

Gutenberg Table of Contents button and panel for the demo post
Gutenberg Table of Contents button and panel for the demo post

This is a good feature as it:

  1. encourages proper heading nesting
  2. provides a quick way to navigate to a heading block.

Clicking on a heading listed in the Table of Contents takes you directly to that heading block in the editor.

The H6 in the example is marked as an incorrect because it follows an H2. If you use an H2, the next nested heading should be an H3.

Accessibility issues

I raised a number of accessibility issues with Gutenberg in my previous post.

Have the developers improved them?

Keyboard navigation

Blue focus indicator round the Preview button
Blue focus indicator round the Preview button

Keyboard navigation is still a mess. The tab order is still not logical and varies from block to block.

I could not find any skip links.

The focus indicators of buttons and links have improved, though. Though they’re not to everyone’s taste!

Post visibility section

There are some new problems with this section. The Public, Private and Password protected radio buttons appear in a popover section which is toggled by pressing the Enter key.

The problem is that moving from Public to Private with the down arrow key opens a modal dialog.

A dialog box which appears when choosing Private visibility

As a sighted user I can see the text “Would you like to privately publish this post now?”

However, VoiceOver reads out the site URL and then “You are currently on a text element”, with no indication of what to do next.

Only if the dialog box is dismissed with the Esc key is the Private radio button read out.

Keyboard accessibility of the Insert Blocks panel

I was disappointed to discover that this issue has still not been fixed. I still cannot access the Blocks and Embeds tabs with the keyboard alone. I just end up cycling through the recent blocks.

Gutenberg Insert Block dialog

This is a high priority issue for me.

Search functionality of the Blocks panel

The search function now works better than it did. Searching for “button” does give the option of a button block!

Gutenberg search for a button block

However, you still have to make an educated guess to know what to search for.

There’s still no feedback for block names which don’t exist.

Date picker control for the Publish date

The date picker is still not accessible. This has been marked as a high priority issue on GitHub (react-datepicker is not accessible).

I’m not sure what the status of this issue is. The Gutenberg team were set to abandon the React JavaScript library due to a Facebook licensing issue. They’d started looking at other JS frameworks. Now Facebook have updated their license terms, React may be back on the table.

Publishing a post

The user experience has improved a bit. There’s now no popup when you activate the Publish button.

There’s no audible feedback when you publish a post. The best I got from VoiceOver was “Press update, dimmed, button.” which indicates something, but is not as clear as the visual feedback.

Sighted users see Post published! View post. This notice is overlaid on the content which looks weird if you scroll.

Gutenberg post published message overlaying text

Andrea Fercia has highlighted the need for Gutenberg audio feedback in this thread.

What new accessibility issues have arisen?

Accessing the Block settings from the keyboard

When you activate the Show inspector button on a block, the sidebar opens and the Block tab is visible. The keyboard focus remains on the button.

The problem with this is that if you want to go directly to the block settings you have to do it via a mouse.

If you tab all the way down the page, you’ll get to the Block settings panel eventually. Unfortunately, you will get the settings for the last block on the page.

If you want to edit image settings, it’s not much help if you get the paragraph settings.

It’s possible to move the block you want to edit to the bottom and move it back up again when you’re done. But this is way too inconvenient.

Also, if the sidebar is already open, the inspector button should be greyed out or there should be a hint that activating it does nothing.

Colour contrast

Adding foreground and background colour controls for blocks has raised the chances of users selecting colour combos which would fail WCAG 2.0 colour contrast guidelines.

Pale green text on a pink background has a poor colour contrast

A contrast ratio of 1.37:1 is a WCAG 2.0 fail

The colour contrast issue has been discussed on GitHub here. Some of the potential solutions are:

  • Limiting colour choices to ‘safe’ options.
  • The user selecting a background colour and Gutenberg suggesting a suitable text colour with sufficient contrast.
  • A warning message showing if there’s an inaccessible choice of foreground and background colours.

It’s hard to see how this section would be of use to screen reader users. What does “Color: #cf2e2e” mean to the average person?

Andrea Fercia agrees, and he’s suggested some further colour picker improvements.

The information button pop-up

For all the useful info this section provides, there are still some problems with it.

The information button is not properly labelled as there is nothing to tell a screen reader what it does. VoiceOver just reads “Button”.

The Gutenberg Table of Contents button has no alt text

If you haven’t added any headings to your post (the title is ignored) focus goes to the section telling you the word count, block count and headings count.

However, if you have added two or more headings focus goes to the Table of Contents. A screen reader user cannot access the word count area above. Using Shift+Tab to move back moves the cursor but doesn’t shift focus there.

What else is happening around Gutenberg accessibility?

Joen Asmussen has suggested having a range of keyboard shortcuts in menus and tooltips. The regular post editor has these, so why not Gutenberg?

WordPress keyboard shortcuts
WordPress TinyMCE editor keyboard shortcuts

Tammie Lister has asked for suggestions on improving the Gutenberg UI for people with colour blindness.

So, where are we now with Gutenberg?

The Gutenberg developers have added a lot more functionality.

In terms of accessibility:

  • I like the Table of Contents but it still has some access issues for screen reader users.
  • Choosing text/background colours will be popular with many, but we need to guard against inaccessible combinations.
  • The Block settings are useful but are difficult to reach with the keyboard.

I can see Gutenberg proving challenging to use for anyone reliant on the keyboard (too much tabbing). It’s demanding on a cognitive level as well.

I’m still not sure Gutenberg fulfils the brief of:

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable.

WP Tavern has pointed out that if you want a distraction-free writing experience, Gutenberg actually detracts from that goal.

What do you think? Will you embrace Gutenberg or do you like to stick to what you know? Leave your thoughts in the comments.

Related

Filed Under: Accessibility, WordPress Tagged With: Gutenberg

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Graham Armfield says

    October 16, 2017 at 11:16 am

    Thanks for the update Claire. It’s been a while since I’ve looked at Gutenberg – especially around the accessibility issues, and it’s disappointing to see that some of the long-standing issues still have not been fixed yet.

    Let’s hope we see some movement on these issues soon.

    From an accessibility perspective, the whole Gutenberg experience emphasizes once again how important it is to think about accessibility from the start. It’s vital to design the interactions with keyboard and other users in mind. Retrospectively fitting accessibility to complex functionality can be really hard and can also lead to a less than cohesive experience for some.

    Reply
    • Claire Brotherton says

      October 17, 2017 at 3:43 pm

      Totally agree with you, Graham. Much easier to get accessibility right from the beginning as opposed to the sticking plaster approach.

      I joined in the Make WordPress Accessible discussion on Slack yesterday and there was a consensus that the keyboard navigation issues should be grouped and treated as high priority. The suggestion about keyboard shortcuts to get to different areas sounds promising. We just need to find ones that work across different language keyboard layouts.

      Reply
  2. Amanda Rush says

    October 16, 2017 at 8:27 pm

    Thanks for writing this post. I haven’t looked at Gutenberg in a while, and this gives me a heads-up that I’ll probably want a strong drink handy when I finally do look at it.

    Reply
    • Claire Brotherton says

      October 17, 2017 at 3:44 pm

      That might be a good idea, Amanda! Thanks for commenting.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

Recent Posts

  • Smarter Marketing From Super People! CMA Kick Off 2019
  • WordPress 5 Released, Launching A Brand New Editor
  • The User Experience and Accessibility of Gutenberg (The WordPress 5.0 Block Editor)
  • Accessibility Scotland 2018 – How To Understand Users Better
  • Visme: A Powerful Online Infographic Maker and Presentation Tool

Top Posts

  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • 3 WordPress Blog Layout Plugins - Get A Better Look Easily
  • How To Create WordPress Excerpts And Include Links In Them
  • How To Export And Import Content On Your WordPress Site
  • How To Add Custom Content To WordPress Category Archives

Categories

  • Accessibility
  • Blogging
  • Business
  • Content marketing
  • Networking
  • Resources
  • Responsive design
  • Technology
  • Web
  • WordPress

Archives

  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014

Subscribe – RSS

RSS Feed RSS - Posts

RSS Feed RSS - Comments

Footer

Recent Posts

  • Smarter Marketing From Super People! CMA Kick Off 2019
  • WordPress 5 Released, Launching A Brand New Editor
  • The User Experience and Accessibility of Gutenberg (The WordPress 5.0 Block Editor)
  • Accessibility Scotland 2018 – How To Understand Users Better
  • Visme: A Powerful Online Infographic Maker and Presentation Tool

Tags

30 day blogging challenge accessibility-ready assistive technology blog blogging Brad Sugars branding business business coaching child theme content marketing CSS customizer disability domain name freelance GDPR Genesis google analytics Gutenberg hosting images Linkedin marketing mobile friendly design plugin plugins post editor quiz responsive REST API sales security SEO social media theme themes twenty fifteen Twitter user experience web design web development website wordcamp wordpress.com

Top Posts

  • How To Solve WordPress Image Alignment And Text-Wrap Problems
    How To Solve WordPress Image Alignment And Text-Wrap Problems
  • 3 WordPress Blog Layout Plugins - Get A Better Look Easily
    3 WordPress Blog Layout Plugins - Get A Better Look Easily
  • How To Create WordPress Excerpts And Include Links In Them
    How To Create WordPress Excerpts And Include Links In Them
  • How To Export And Import Content On Your WordPress Site
    How To Export And Import Content On Your WordPress Site

Copyright © 2019 A Bright Clear Web

  • Privacy and cookies policy
  • Sitemap