Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#36909 closed defect (bug) (fixed)

Media modal: improve the tab order for better accessibility

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch media-a11y commit
Focuses: ui, accessibility, javascript Cc:


See #30386 and #30512.

The accessibility work on the Media views has been on hold for a while, discussed a bit this topic during a recent accessibility chat on Slack and decided to try small steps and propose small improvements in small, clearly understandable, tickets.

In #30512 we learned a lot, and also done some mistakes :) but that ticket has probably a too broad scope, hence the decision for smaller tickets.

One of the main issues for keyboard and screen reader users in the Media Modal is about the tab order. In the screenshot below, the initial state of the media modal makes sense and the order is:

  • menu sidebar
  • top toolbar
  • attachments grid

By the way, when one or more attachments get selected, the "Details" sidebar appears on the right and focus is automatically moved to the right sidebar. We'll discuss moving focus as a separate issue, for now please consider the tab order when the Details sidebar appears, see in the screenshot below where the main elements that compose the media modal are highlighted with a colored background:

In the source, the Details sidebar comes before the attachments grid. To experiment how much this can be annoying and confusing for keyboard and screen reader users, please test using only your keyboard to navigate through the modal. The tab order will be:

  • 1) menu sidebar
  • 2) 3) 4) top toolbar
  • 5) is initially hidden
  • 6) attachments grid
  • now navigate through attachments and press Spacebar to select one of them
  • once an attachment gets selected, focus is moved to 5) the Details sidebar
  • keep tabbing through the details and at the end of the sidebar...
  • will be again in 6) the attachments grid and you will have to navigate through all the attachments again to finally land on 7) and have a chance to insert the image

The proposed change is to simply move the Details sidebar after the attachments grid. This would greatly improve the tab order. From a logical point of view, it also makes more sense to get the "details" of the selection after the selected item.

Since the modal layout is built with main containers that are absolutely positioned, the change would be very simple and doesn't require any CSS.

Worth considering that the media grid may have hundreds of attachments... it would be great to have also some sort of mechanism to allow keyboard users to "skip" the list of attachments, but this should be probably handled in #30386.

Attachments (1)

36909.diff (1.4 KB) - added by afercia 8 years ago.

Download all attachments as: .zip

Change History (9)

8 years ago

#1 @afercia
8 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.6
  • Owner set to afercia
  • Status changed from new to assigned

#2 @afercia
8 years ago

  • Keywords media-a11y added

#3 follow-up: @ocean90
8 years ago

  • Keywords commit added

36909.diff looks good to me.

Noticed some unrelated behavior: As soon as you're in the sidebar with the details you can't escape it with Shift+Tab anymore. It stucks at the Edit Image link. Is there already a ticket for that?

#4 in reply to: ↑ 3 @afercia
8 years ago

Replying to ocean90:

Is there already a ticket for that?

Yes, see #36900

#5 @boonebgorges
8 years ago

In 37608:

Add tests demonstrating query cache invalidation on comment CRUD actions.

See #36909.

#6 follow-up: @boonebgorges
8 years ago

Groan, [37608] should have pointed to #36906.

#7 in reply to: ↑ 6 @afercia
8 years ago

Replying to boonebgorges:

Groan, [37608] should have pointed to #36906.

@boonebgorges you're always welcome to the accessible side of WP :)

#8 @afercia
8 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 37610:

Accessibility: match the visual and tab order in the Media Modal grid.

By moving the Details sidebar after the attachments grid, the tab order is
greatly improved for keyboard users and matches the logical and visual order.

Fixes #36909.

Note: See TracTickets for help on using tickets.