Accessibility issue with the Overlay functionality

[RahiDroid]

Description

Pull request https://github.com/WordPress/gutenberg/pull/43838 introduces an improved UX for the Post Featured Image block by incorporating the Overlay changes reflected on the image placeholder as well.

The upload button has a blurred background which is being removed in the mentioned PR to ensure it's visible what the overlay will look like. However, this has a drawback, if a user selects an overlay that's very close to the upload button's color, it will blend in which is an accessibility or UX issue.

It's important to address this as we have plans on introducing the overlay color on the Cover block's placeholder as well.

Step-by-step reproduction instructions

1. Ensure you have latest Gutenberg plugin installed and activated.
2. Either open the site editor or, if using the block editor, ensure it has no featured image assigned.
3. Add the Post Featured Image block. You should see the placeholder for the image.
4. Assign custom overlay color to be same as the upload button (#007CBA is the upload button's color as of today).
5. Ensure the overlay opacity is set to 100.

Screenshots, screen recording, code snippet

[Overlay color set to the upload button's color with overlay opacity being 100]

Environment info

• WP 6.0.2
• Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[RahiDroid]

Hi @mikachan 👋

Could you please tag relevant folks who can provide UX/UI inputs on this one? Once this gets addressed, we could then work towards introducing this placeholder UX change for the Cover block, too.

[mikachan]

Yes, sure. @Ryokuhi or @alexstine may be able to offer input on this one. You may also wish to bring this issue up in the #accessibility channel on the Making WordPress Slack, as well.

[alexstine]

I am totally blind so I can't offer much feedback here any longer. Tagging @joedolson .

[Ryokuhi]

To the best of my knowledge, if we talk about compliance with Web Content Accessibility Guidelines (WCAG), version 2.1, at level AA, which is what we aim to do according to WordPress Accessibility Coding Standards, maybe this is not even an accessibility issue, strictly speaking.

The relevant success criterion here is 1.4.11 Non-text Contrast. After checking the additional content included in the guide to understand the intent of Success Criterion 1.4.11: Non-text Contrast, here are my thoughts on the topic.

• The success criterion requires that the visual presentation of User Interface Components has a contrast ratio of at least 3:1 against adjacent color(s). In this case, I think that what you need to identify the button to add the featured image is just the upload icon inside it. The color of the icon is white (#fff), against the button background color (#007cba): the color contrast is in this case 4.57:1, and the criterion is met.

• Understanding Success Criterion 1.4.11 contains a subsection specifically about boundaries: I think this is the reason for opening this issue in the first place. Actually, controls do not require a visual boundary indicating the hit area,

  but, if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed.

  Because the icon has sufficient contrast, the control can be identified as such, even if the custom overlay color is very close to the color of the upload button, and you can't detect the hit area.

• In the same subsection about boundaries, it's also stated that

  for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

  Even if not required for compliance with WCAG 2.1 AA or with the WordPress Accessibility Coding Standards, I think some people will benefit from marking the hit area boundary. To me, the easiest solution would be to add a simple white border around the button, checking if focus styles have to be adjusted (I don't think so...)

Let's hear from someone else from the Accessibility Team (we can even discuss this during the next bug scrub); after there's enough feedback, we can decide about removing the Needs Accessibility Feedback and the Accessibility (A11y) labels.

[joedolson]

I agree with @ryokuhi that the biggest problem is identifying the boundaries; so a simple white border around the button should be sufficient. While testing, I noted that the upload button doesn't support the 'Show button text labels' preference, which I'd consider a more significant problem, in many ways.

[RahiDroid]

Thank you so much @Ryokuhi and @joedolson, for the detailed evaluation of the issue raised and for sharing your thoughts on the possible solution!

so a simple white border around the button should be sufficient

Understood. Do we need any input from the design team for this? Else, I can raise a PR and you can review the visuals.

the upload button doesn't support the 'Show button text labels' preference

Could you please elaborate a little? Are you referring to the aria-label attribute on the upload button?

---

Aside, I found a blurred effect with a slight tint on the placeholder illustration, which needs some discussion (it's related to design and not accessibility). I will create a separate issue as it's not exactly related to this.

[joedolson]

In Options > Preferences > General, there's an option to 'Show button text labels'. The expected result of this is that all icon buttons should instead be represented by descriptive text; this doesn't happen with featured image button.

Relevant setting

Block settings showing text replacements on toolbar but not on featured image icon.

[RahiDroid]

Gotcha! @joedolson, I have raised a PR (https://github.com/WordPress/gutenberg/pull/44437) for the accessibility issue you pointed out, it also addresses one UI bug seen in your screenshot and adds consistency in the spacing of those items.

Would be great if you could take a look and help me with any feedback.