Project

General

Profile

Design/UX #11843

Tweaking the Gutenberg Editor Interface

Added by Laurie Hurson about 2 years ago. Updated 12 months ago.

Status:
New
Priority name:
Normal
Assignee:
-
Category name:
WordPress (misc)
Target version:
Start date:
2019-09-10
Due date:
% Done:

0%

Estimated time:

Description

Continuing a discussion that began in ticket #11833: CC Image Plugin: https://redmine.gc.cuny.edu/issues/11833

When a user is editing in the Gutenberg block editor view, the "Simple CSS" field is open/visible by default. This has confused multiple people who have entered post content in this field instead of into the content field. We may want to consider making the default setting for the "Simple CSS" area to closed/minimized.

Additionally, the content area where users enter the body of their post or page is poorly defined as the main place to enter info. The directional text in the content area is very small and the color contrast likely does not meet accessibility standards. We may want to consider reformatting this text in the block editor to make it more accessible and user friendly.

I think this also raises larger issues of accessibility of the block editor in general. Accessibility issues associated with the block editor were raised when Gutenberg was released but I am not sure how many of these issues have actually been addressed and fixed. I think Boone may know more about this?


Related issues

Related to CUNY Academic Commons - Feature #12052: The Simple CSS metabox should be closed by defaultResolved2019-11-08

History

#1 Updated by Boone Gorges about 2 years ago

  • Target version set to 1.16

Thanks for this, Laurie. Collapsing the meta box by default should be doable for 1.16.

Regarding the "poorly defined" content area - are you referring to the gray text "Add title" and "Start writing..." prompts? See screenshot. This has been improved by the Gutenberg team since it was originally rolled out; see https://github.com/WordPress/gutenberg/pull/9562, https://github.com/WordPress/gutenberg/issues/5838. The current colors do pass WCAG AA contrast levels at the font sizes used in the Gutenberg placeholders: https://contrastchecker.com/?c=7e868f&b=ffffff

Here's a copy of the accessibility audit performed on the version of Gutenberg that was included in WP 5.0: https://documents.wpcampus.org/gutenberg/audit/Gutenberg_Executive_Summary.pdf There have been changes since then, and many issues are improved. For example, the new Navigation Mode (will be part of WP 5.3) introduces a new set of tools specifically designed with screen readers in mind. The state of things is in constant flux, but generally speaking, the pace of improvement has been accelerating, and accessibility is an increasingly important part of Gutenberg design.

#2 Updated by Boone Gorges almost 2 years ago

  • Related to Feature #12052: The Simple CSS metabox should be closed by default added

#3 Updated by Boone Gorges almost 2 years ago

  • Category name set to WordPress (misc)
  • Target version changed from 1.16 to 1.17.0

I broke the Simple CSS issue into its own ticket, so that it wouldn't be lost in the broader discussion. Let's use this to circle back to accessibility questions in Gutenberg.

#4 Updated by Boone Gorges over 1 year ago

  • Target version changed from 1.17.0 to 1.18.0

A lot of progress has been made on accessibility in the Block Editor in the past 6-12 months. I think it's worth doing a review in the upcoming months to identify any major problems, but I'm hopeful that many of them have already been addressed or mitigated in WP itself.

#5 Updated by Boone Gorges 12 months ago

  • Target version changed from 1.18.0 to 1.19.0

Also available in: Atom PDF