WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 8 days ago

#47136 accepted defect (bug)

Reading and focus order do not match visual order

Reported by: anevins Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report needs-design
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 5 months ago.
57182794-690abe80-6e58-11e9-8ea5-10883306a61f.png (274.9 KB) - added by anevins 5 months ago.

Download all attachments as: .zip

Change History (13)

#1 @afercia
5 months ago

  • Description modified (diff)

#2 @afercia
4 months ago

  • Milestone changed from Awaiting Review to 5.3

#3 @afercia
3 months ago

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

#4 @afercia
3 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
6 weeks ago

  • Keywords needs-design-feedback added

#6 @audrasjb
6 weeks ago

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

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


4 weeks ago

#8 @karmatosed
4 weeks ago

  • Keywords needs-design-feedback removed

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


3 weeks ago

#10 @afercia
8 days ago

  • Keywords needs-design added

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


8 days ago

Note: See TracTickets for help on using tickets.