Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#33060 closed defect (bug) (fixed)

Screen readers: moving focus and animations (the Publish box)

Reported by: afercia's profile afercia Owned by: iseulde's profile iseulde
Milestone: 4.3 Priority: normal
Severity: normal Version:
Component: Posts, Post Types Keywords: has-patch
Focuses: accessibility, javascript Cc:


Noticed for the first time during Press This development in the 4.2 release cycle and reproduced in other places too, for example in the Customizer, in the Media Views and in the Post Publish box.

Will use the Publish box as an example, since it's easier to understand, and as scope of this ticket.

Testing with Firefox + NVDA, here's what happens when clicking the Edit link to change the post publish date: since focus is moved during the animation NVDA gets lost for some milliseconds and starts reading out the document from the start, announcing the document title multiple times, together with a very explanatory "unknown". A lot of noise for users :)

In the screenshot below, in the NVDA speech viewer the first highlighted box is when focus is on the "Edit" link. After activating the link, all that stuff gets read out until NVDA finally understand focus is on a new element (the second highlighted box).

With just a small change, moving the focus when the animation is complete makes a huge difference, see screenshot below:

While browsers move focus immediately, turns out screen readers may not understand an element is getting visible until the animation is complete.

Will submit a patch for the Publish box. I'd also strongly recommend to take into consideration this for all future developments: sliding panels, highly animated interfaces, Media Views getting updated, etc. they all should try to detect when animations or UI updates are complete and just then move the focus, when needed.

Attachments (2)

33060.patch (3.6 KB) - added by afercia 9 years ago.
33060.2.patch (3.4 KB) - added by iseulde 9 years ago.

Download all attachments as: .zip

Change History (7)

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

9 years ago

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

9 years ago

9 years ago

#3 @afercia
9 years ago

  • Keywords has-patch added

Please notice the proposed patch here assumes patch to be already in.

The patch does two things:

  • when opening the panels, move focus when the animation is complete
  • moves focus back to the Edit links when clicking OK or Cancel

Many other things should be done for accessibility here, but they're out of the scope of this ticket, for example:

  • moving back focus to the Edit links should be complete before the sliding up animation starts, there's no guarantee for this and I'm a bit reluctant to use setTimeout
  • logically related inputs should be grouped in fieldset elements with a proper legend
  • non-link links used as UI controls should be buttons
  • some of these things should be done also for the Comment Status box in comment.php. will open a new ticket

9 years ago

#4 @iseulde
9 years ago

  • Owner set to iseulde
  • Resolution set to fixed
  • Status changed from new to closed

In 33352:

Publish box: move focus when the animation is done

Also move the focus back to 'edit' when saving changes.

Props afercia.
Fixes #33060.

#5 @iseulde
9 years ago

  • Component changed from Administration to Posts, Post Types
  • Milestone changed from Awaiting Review to 4.3
  • Version 4.2 deleted
Note: See TracTickets for help on using tickets.