Make WordPress Core

Opened 4 months ago

Last modified 38 hours ago

#47116 assigned defect (bug)

Media Editor: Visible labels are not available on editing buttons

Reported by: afercia Owned by: nrqsnchz
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots wpcampus-report needs-design tooltips has-patch
Focuses: ui, accessibility Cc:


Moved from the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15352

Visible labels are not available on editing buttons

  • Severity: Medium
  • Affected Populations:
    • Low-Vision
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Edit Media

#### Issue description

On the Edit Media page, buttons for editing the selected media image
have accessible names to label them for assistive technology users,
however these names are not available to sighted users.

Since some of the icons are quite cryptic, and there is an ambiguity
between two sets of icons which both appear to mean Rotate. This may be
confusing to users with cognitive disabilities. Such users may find
themselves having to interact with buttons just to figure out what they

#### Remediation Guidance

Add visible text labels to the image editing buttons.

One method, which would be consistent with the rest of the editor, would
be to use keyboard-accessible tooltips for this.

A better method would be to provide a user setting for all icon
controls, so that users can specify whether to show icons-only,
labels-only, or icons and labels together.

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](https://www.tenon.io) and funded by [WP Campus](https://wpcampus.org/). This issue is GUT-85 in Tenon's report

Attachments (2)

47116.png (46.9 KB) - added by afercia 4 months ago.
The media editor buttons.
imgedit-button-labels.diff (4.8 KB) - added by nrqsnchz 3 days ago.
Patch that adds labels to the image edit buttons

Download all attachments as: .zip

Change History (12)

4 months ago

The media editor buttons.

#1 @afercia
4 months ago

  • Milestone changed from Future Release to 5.3

#2 @karmatosed
3 months ago

  • Keywords needs-design added

#3 @afercia
3 months ago

Related: #41634.

#4 @afercia
3 months ago

  • Keywords tooltips added

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.

9 days ago

#6 @joedolson
9 days ago

  • Owner set to nrqsnchz
  • Status changed from new to assigned

#7 @nrqsnchz
3 days ago

  • Keywords has-patch added

I've attached a patch that adds proper labels to the edit image button. This makes the row of buttons much longer, so I made the CSS changes necessary to have the row of buttons wrap as needed.

This is before the change:


After the change (wide viewport):


After the change (medium viewport):


After the change (small viewport):


Tested on Mac on Firefox, Safari and Chrome. Also tested with VoiceOver and Safari.

While this change makes these buttons more obvious and addresses the concerns raised on this ticket, I'm not sure I love how much more UI is added by the row of buttons when it wraps to two or three rows. I'd love to get opinions/ideas from others.

3 days ago

Patch that adds labels to the image edit buttons

#8 @nrqsnchz
44 hours ago

Additionally, we could reduce the length of the buttons by replacing "Rotate counter-clockwise" to "Rotate left" and "Rotate clockwise" to "Rotate right".

#9 @sabernhardt
41 hours ago

@nrqsnchz Quick edit to your patch: the label text will still need the PHP function to make sure the string is translatable, as it has been for each of those 7 labels:

<?php esc_html_e( 'Crop' ); ?>

Also, mainly because of the need to translate, I would not recommend changing the text label based on how long it is in English. It's probably even wider in another language.

#10 @sabernhardt
38 hours ago

Below is a design concept that groups the buttons @nrqsnchz made and rearranges the order, and I'd like feedback to know whether this is an improvement before trying to create a new patch with it.

I'd want the rotate and flip options to remain on the same line as their counterparts, so this design combines each pair in floating fieldset/legend groups above the other 3 buttons (Crop, Undo and Redo).


Flip buttons drop below the Rotate buttons at 120 percent on my screen (or similarly on smaller screens without the zoom):


This layout would require 6 new translatable strings (and the current text strings could be re-purposed as ARIA labels for those 4 buttons).

Note: See TracTickets for help on using tickets.