Citation field is only indicated by placeholder text

[karlgroves]

Citation field is only indicated by placeholder text

• Severity: Low
• Affected Populations:
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Editing

Issue description

The Quote block type includes an editable area to define a citation.
However this area is only visually indicated with placeholder text, it
has no visible boundary. The placeholder text also vanishes when focus
leaves the block, and when focus enters the control. There is no other
visual cue that a field exists there.

Active user interface components should be easily distinguishable by
people with moderately low-vision, and consistently available so long as
the control can be activated, for the benefit of users with short-term
memory loss and other cognitive disabilities.

Remediation Guidance

So long as the citation field can be filled in, use a design that makes
it visually obvious that it's an editable field.

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-104 in Tenon's report

[kjellr]

The Design team discussed this in #design triage today.
(A WordPress.org Slack account may be required to view that link).

Here's a screenshot:

This is a somewhat common occurrence throughout Gutenberg. A couple other examples:

Default placeholder:

Page title:

The reasoning behind omitting labels for these fields was to achieve a near 1:1 appearance with the front end. But this could certainly benefit from some exploration — for instance, maybe there's a user setting to expose more obvious editable fields if needed.

[afercia]

for instance, maybe there's a user setting to expose more obvious editable fields if needed.

I'd rather make it work the other way around. There's already a "Spotlight Mode" option in the More menu that makes great part of the interface lighter. I'd recommend to use that to make the fields lighter without borders. Instead, by default they should have a visible shape to help identify them.

[StommePoes]

Multiple screenshots from the report:

[mapk]

This seems to work similarly for other blocks with captions as well.

Image block

Table block

I'm considering closing this issue because Gutenberg does aim for the 1:1 visual appearance with the frontend as @kjellr mentioned above. This issue is noted as "low severity" and would require a large amount of both design and development resources to think through a new way of handling captions. @enriquesanchez any thoughts here?

[enriquesanchez]

I think we can still do something about the low contrast of the placeholder. It's currently set to #72777c and while it passes WCAG AA with a #FFF background, the placeholder text has .62 opacity set to it that makes it fail.

What do y'all think of removing the opacity?

[mapk]

I agree. Let's get the text up to pass WCAG AA. 👍 Thanks, @enriquesanchez.

[afercia]

This issue is not about "omitting labels" (and yes, there's a large disagreement about missing visible labels between design and accessibility).

Instead, this issue is about the fact the Citation field can't be identified as an editable field under some circumstances. This is different from other blocks. Examples:

When the block is not selected, there's nothing to visually indicate there's an editable field for the citation. The only visible text is "Write quote":

Only when the block is selected, the Citation placeholder appears:

Also depending on the active theme and on the presence of following text, this can be very confusing. Screenshot with Twenty Seventeen and a paragraph after the Quote block:

Actually, this issue complains about the fact the Citation field can't be identified as an editable field and
"it has no visible boundary". What this issue asks for is:

use a design that makes it visually obvious that it's an editable field

The missing visible <label> elements are a totally different matter, and they're being discussed since long, long time in this project. Unrelated to this specific issue though.

[karmatosed]

Just coming to this now, would it be solved with copy? For example:

It might not, but I felt this could be worth adding as an idea.

[mapk]

It looks like a first step here would be to have the citation field permanently visible in the editor whether or not the block is selected. Starting there feels like the right step.

[enriquesanchez]

It looks like a first step here would be to have the citation field permanently visible in the editor whether or not the block is selected. Starting there feels like the right step.

Plus one to this idea.

[MichaelArestad]

This is a tough one and I admit that I don't have a great solution, but I can at least lay out some reasoning to help move the discussion forward.

Here are some key points:

• The unselected state of a block should be a preview of what you get when the content is published.
• The citation field (and many other nested blocks) are not visible as an editable field when the block is unselected if they have not been filled out. In short, it cannot be identified as an editable field when the block is unselected.
• The Paragraph field is an example of a field that, when empty, still shows that it is editable.

Some conclusions based on the above data:

• Because of blocks like the Paragraph block that, when empty, show placeholders, we don't actually show an accurate preview of what the user can expect when publishing their content. If that is the end goal, we should not show the placeholder when empty. This would be ideal for understanding how content will look when published. It's not ideal for working within the editor. Perhaps we need to investigate some affordance that shows there is an editable field that is empty, but does not necessarily show the placeholder.
• Alternatively, the citation block could function more like the paragraph block where it has a placeholder when the Quote block is not selected. I would add that it might make sense for optional child blocks like these to be removable.

At this point, I think this needs a decision one way or the other. Because it can have larger implications beyond the Citation nested block, I want to hear from @jasmussen and @mtias

[mtias]

Not sure what decision this requires. The citation field works the same way as captions — not visible until the block is selected since it's not a primary field. I don't see a reason for this changing. Alternative visual ideas for the citation that could make it more clear (while retaining the WYSIWYG factor) should of course be explored. For example, a few I can think of now:

• Duplicate the attribute in the block inspector as a regular input (redundancy).
• Add a toolbar button ("Add citation") to focus the text.

[afercia]

What is requested here is very clear:

use a design that makes it visually obvious that it's an editable field

There's already a "Spotlight Mode" option in the More menu that makes great part of the interface lighter. I'd recommend to use that to make the fields lighter without borders. Instead, by default they should have a visible shape to help identify them.

And yes, this applies to all the editable fields 🙂

[paaljoachim]

I brought up this issue during a Gutenberg Design Triage, and here are some ideas that came into my mind.
Make all placeholder words stronger with a higher opacity.
Should a warning message as a snack bar message show up if one does not fill in caption or citation? That might be too much.
It would be good to explore how to adjust the "Spotlight Mode" to improve this in general for accessibility.

[MichaelArestad]

@paaljoachim Do you think that darker placeholders could be confused with content? I also don't know that this solves the request.

[afercia]

Not sure what decision this requires. The citation field works the same way as captions

No one said the captions are okay and that's not an argument, honestly.

Citation fields and all editable fields need to be identified as such:

• they need a border or outline
• they need a focus style

Regarding the focus style: If, after more than three years since the Gutenberg project started the concept of focus style is still not clear, honestly I'm speechless. See also #23892

The accessibility team discussed this kind of things several times in the last three years. I think it's fine to say we all agree that we see the editor default mode as the one that needs to be accessible to everyone. If other modes are used for a "lighter" UI, or any other variations of contrast, shapes, etc., that's fine.

[StommePoes]

The ... field works ... not visible until the block is selected... I don't see a reason for this changing.

Clearly, nobody wants these editable fields to clearly be editable fields. People are supposed to play the game of guessing. I guess it's like getting a free sudoku when you're attempting to create content. Maybe that makes it a feature.

So my recommendation is removing them entirely. Instead of offering invisible fields, if you don't want people actually filling them in, just don't have them.

Problem solved.

[afercia]

@StommePoes thanks for your comment 🙂 I'd like to point you at #23892 which is even more important (when you have a chance!)

[joedolson]

I'm fine with having the field not visible if the block is not selected and the field is empty. That seems to fit with the intent. However, it really needs to be possible to identify editable fields within the block when the block is active. Right now, that field has no visible label, no visible border, and no visible focus state. The same concern is true of any internal block field that has the same fundamental design.

Blocks that have only one editable region can be indicated with a block-level focus indicator, and that would be adequate, if it's restored (see #23892), but blocks with multiple editable regions need some kind of indicator that helps the user know that there are additional fields to edit.

[paaljoachim]

I added this comment to #23892 (comment)
Which suggests creating an outline/border around the editable fields such as caption, quote fields etc.