Make WordPress Core

Opened 6 weeks ago

Last modified 7 days ago

#47136 new defect (bug)

Reading and focus order do not match visual order

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

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 (2)

57182795-6f009f80-6e58-11e9-8165-1cdd43fd62df.png (176.1 KB) - added by anevins 6 weeks ago.
57182794-690abe80-6e58-11e9-8ea5-10883306a61f.png (274.9 KB) - added by anevins 6 weeks ago.

Download all attachments as: .zip

Change History (6)

#1 @afercia
6 weeks ago

  • Description modified (diff)

#2 @afercia
5 weeks ago

  • Milestone changed from Awaiting Review to 5.3

#3 @afercia
7 days ago

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

#4 @afercia
7 days 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.


Note: See TracTickets for help on using tickets.