WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 4 weeks ago

#47136 accepted defect (bug)

Reading and focus order do not match visual order

Reported by: anevins Owned by: audrasjb
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report needs-design
Focuses: ui, accessibility Cc:
PR Number:

Description (last modified by afercia)

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

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

Issue description
On the Edit Media page, the keyboard focus order and the visual reading
order are presented in a zig-zag pattern.

Users who are not using browser zoom can reach an option to show more or
fewer columns:

1) If users select content to appear in a single column (which still
produces two columns visually), content at the top is first, then comes
content on the right (Scale and Crop sections), then content back to the
left (the actual image and editing buttons), and finally content
underneath both columns (metadata).

2) If users select content to appear in two columns (which produces
three columns visually), content at the top is first, then comes a
column in the middle ("Scale" and "Crop" sections), then the column
in the left (the actual image and editing buttons), and then the content
at the bottom (the default metadata). After some of the content at the
bottom, the "Save" section is on the far right, and then if the user
added more boxes, these are last and visually placed after the default
metadata content.

Keyboard users benefit from a logical focus order which is consistent
with the reading order. Users who have a cognitive disability and have
difficulty reading may also be confused by an unexpected or illogical
focus order.

Remediation Guidance
Either change the visible layout with CSS to make the visual order match
the content order, or re-order the content in the DOM to match the
visual order.

Relevant standards

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-82 in Tenon's report

Attachments (3)

57182795-6f009f80-6e58-11e9-8165-1cdd43fd62df.png (176.1 KB) - added by anevins 6 months ago.
57182794-690abe80-6e58-11e9-8ea5-10883306a61f.png (274.9 KB) - added by anevins 6 months ago.
47136.diff (8.5 KB) - added by sabernhardt 6 weeks ago.
switches the order of two columns and sets both min-width and max-width for the first column

Download all attachments as: .zip

Change History (26)

#1 @afercia
6 months ago

  • Description modified (diff)

#2 @afercia
6 months ago

  • Milestone changed from Awaiting Review to 5.3

#3 @afercia
5 months ago

Note: the Screen Options and Help buttons order was fixed in [45503] / #45094.

#4 @afercia
5 months ago

To clarify, the two screenshots from the WPCampus report attached above illustrate the two different layout options available in the "Screen Options" settings:

  • first screenshot: 1 column option (produces two columns visually)
  • second screenshot: 2 columns option (produces three columns visually)

Also, worth considering users can add additional meta boxes.

http://cldup.com/nPudKeOs4l.jpg

#5 @karmatosed
3 months ago

  • Keywords needs-design-feedback added

#6 @audrasjb
3 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


3 months ago

#8 @karmatosed
3 months ago

  • Keywords needs-design-feedback removed

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


2 months ago

#10 @afercia
2 months ago

  • Keywords needs-design added

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


2 months ago

This ticket was mentioned in Slack in #core-media by afercia. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-media by afercia. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #design by afercia. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 weeks ago

#16 @karmatosed
7 weeks ago

I chatted with @afercia about this today and for me, this indicates the need to consider a redesign from ground up of the media interface. I know many already feel this. If we can from the start consider a11y and the best possible interactions, then we aren't forcing something or hitting the limits of an existing design. A lot of friction in changes is happening as we are limited through the existing design confines.

I am aware, by saying this I am suggesting this happens not in 5.3. However, this ticket and others should be fuel to get a redesign sooner and at the heart of any consideration.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-media by afercia. View the logs.


7 weeks ago

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


7 weeks ago

#20 @afercia
7 weeks ago

  • Milestone changed from 5.3 to Future Release

Discussed during today's accessibility bug-scrub: giving WordPress 5.3 Beta 2 is very close, sadly agreed to punt this ticket to Future Release. This ticket needs a major redesign of the Image Editor an realistically we're out of time as in more than 4 months there was no progress.

#21 @sabernhardt
6 weeks ago

It's almost certainly too late to make a change like this for 5.3.0 and I (too) would like a better edit screen in 5.4 or later, but the following patch might be a good start to fixing the order in 5.3.1.

In image-edit.php, I simply moved the imgedit-panel-content container above the imgedit-settings <div> and then added wp-clearfix to the imgedit-settings <div> (even though I didn't notice a specific need for the class).

The stylesheet introduces a bottom padding on imgedit-panel-content for when it stacks and also sets both min-width and max-width when on larger screens. (400 pixels is currently the maximum width and height of any cropped image here.)

.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
	float: left;
	padding: 3px 16px 20px 0;
}

@media only screen and (min-width: 783px) {
	.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
		min-width: 400px;
		max-width: calc( 100% - 266px );
	}
}

Note about box-sizing:
I chose to subtract the right padding value from the max-width rather than setting the box-sizing property. If box-sizing: border-box is preferable, then the padding value needs to be added to the min-width instead.

@media only screen and (min-width: 783px) {
	.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
		box-sizing: border-box;
		min-width: 416px;
		max-width: calc( 100% - 250px );
	}
}

@sabernhardt
6 weeks ago

switches the order of two columns and sets both min-width and max-width for the first column

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


4 weeks ago

#23 @afercia
4 weeks ago

  • Milestone changed from Future Release to 5.4
Note: See TracTickets for help on using tickets.