Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#33544 closed defect (bug) (fixed)

Post meta box toggles not accessible.

Reported by: joedolson's profile joedolson Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 4.4 Priority: high
Severity: major Version:
Component: Posts, Post Types Keywords: has-patch commit
Focuses: ui, accessibility, administration Cc:


The handlediv buttons used for toggling post metabox panels are not accessible for several reasons:

1) They do not have a label.
2) They are not focusable elements.
3) They don't announce their current state.

The attached patch changes the <div> into a <button>, adds a screen-reader-text hidden label which provides context, uses aria-expanded to indicate current state, and toggles that state based on the state of the postbox.

One of the consequences of this issue is that if any metabox gets closed (by another user, for example), then a screen reader user will never be able to access that panel. As such, this is a major issue.

Attachments (3)

33544.patch (1.9 KB) - added by joedolson 9 years ago.
Improve metabox accessibility
33544.2.patch (2.2 KB) - added by SergeyBiryukov 9 years ago.
33544.focus.png (3.9 KB) - added by SergeyBiryukov 9 years ago.

Download all attachments as: .zip

Change History (10)

9 years ago

Improve metabox accessibility

#1 @joedolson
9 years ago

  • Milestone changed from Awaiting Review to 4.4

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

9 years ago

#3 @rianrietveld
9 years ago

Hey Joe, tested 33544.patch with keyboard and VoiceOver.
It works good.

One remarks: the screen-reader-text is (for example) "Click to toggle Publish panel". But that's only available for users who can't use a mouse, maybe click is not the right verb here?

#4 @SergeyBiryukov
9 years ago

  • Keywords commit added

33544.2.patch adjusts the button width and height to preserve the current padding and improve focus styling.

On the screenshot, left is the current state, middle is 33544.patch, and right is 33544.2.patch.

#5 @joedolson
9 years ago

  • Keywords commit removed

Thanks for that clean up, Sergey!

Regarding the text - no, I don't think that's a problem. 'Click' is used as a generic term to mean 'activate' - it's far too common across the web to be a major problem for understanding. Any term that would actually be appropriate would be too verbose (e.g. "Active this link" or "Press enter", etc.), so I think that using the common term to have concise text is more important.

It's the same scenario as saying that you're going to "Go see a movie" -- blind people use that phrase, even though they aren't *literally* going to see anything.

#6 @joedolson
9 years ago

  • Keywords commit added

Whoops; simultaneity had me accidentally remove the commit keyword. Putting it back!

#7 @SergeyBiryukov
9 years ago

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

In 33762:

Make post meta box toggles accessible.

props joedolson.
fixes #33544.

Note: See TracTickets for help on using tickets.