WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#32346 closed defect (bug) (fixed)

Admin menu: improve accessibility when collapsed

Reported by: afercia Owned by: afercia
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch commit
Focuses: ui, accessibility Cc:

Description

Screen reader users may activate the "Collapse menu" item maybe without knowing for sure what that does but that control is announced by screen readers and can be activated, so there's always the chance someone will give it a try. While the menu visual change won't make any difference for totally blind users (though screen readers are used also by low vision users), the information available for Assistive Technologies will change.

Turns out that when the menu is collapsed, the first level menu item is hidden with display: none and so it's hidden from Assistive Technologies too. At this point there's only a dashicon, no text to be read out.

Here's how NVDA with Firefox reads out the menu, example limited to the "Posts" menu group:

Expanded menu:

Posts subMenu  link
list with 4 items
All Posts link
Add New link
Categories link
Tags link
out of list

Collapsed menu:

subMenu  link <-- the first level item is now just a dashicon, no text to be read out
list with 5 items <-- but only 4 are focusable
All Posts link
Add New link
Categories link
Tags link
out of list

To keep it simple, I'd propose to avoid any JavaScript and change the CSS part. No more display: none but a very simple off-left rule, as far as I see there's no reason to use the full screen-reader-text rule here.
Additionally, the first not-focusable item in the fly-out menu should be hidden from AT with an aria-hidden=true attribute.

Attachments (1)

32346.patch (1.3 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (16)

@afercia
5 years ago

#1 @afercia
5 years ago

  • Keywords has-patch added

Proposed patch is a first pass. The collapsed menu now should be read out by screen readers in the same exact way they do when it's expanded. Would like to propose this to be tested by the accessibility testers group. I've quickly tested with NVDA + Firefox, and here's the result:

Collapsed menu with patch applied:

Posts subMenu  link <-- now there's text to be read out
list with 4 items <-- notice the aria-hidden item won't even be counted
All Posts link
Add New link
Categories link
Tags link
out of list

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


5 years ago

#3 @kidsguide
5 years ago

  • Keywords needs-testing added
  • Version changed from 4.2 to trunk

#4 @kidsguide
5 years ago

  • Version changed from trunk to 4.2

#5 @rianrietveld
5 years ago

Credits to @badeyes for finding and reporting this issue :-)

#6 follow-up: @rianrietveld
5 years ago

Test results from @gab-nino on this patch:
I was able to activated the collapse menu option. VoiceOver can read the text inside the span of the collapse-button div. On the contrary, the background image of the same button, was totally invisible for the screen reader.
What I could not do is to open the menu again. The background image has not action attached to it. There is no a way to show the menu again.
I prepared a small video to show the behavior since is much easier to see that to explain it with words: https://youtu.be/hse7BycncjY

Question Rian:
Is this ticket related to #29958 and should this patch and 29958.6.diff both be implemented?

Last edited 5 years ago by rianrietveld (previous) (diff)

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

Replying to rianrietveld:

Is this ticket related to #29958 and should this patch and 29958.6.diff both be implemented?

This patch can go separately, it's not about the collapse control but it's about the menu collapsed state. Notice the menu auto-collapses under 960px viewport size so we should take care of accessibility even if users are not able to intentionally activate the collapse control. BTW #29958 would need a refresh...

#8 @afercia
5 years ago

  • Keywords needs-testing removed
  • Milestone changed from Awaiting Review to 4.3
  • Owner set to afercia
  • Status changed from new to assigned

#9 @afercia
5 years ago

  • Keywords commit added

#10 @afercia
5 years ago

Additionally, when the menu is folded (but not when auto-folded in responsive view) the current menu item should have an aria-haspopup="true" attribute like all the other menu items since it does have a fly-out sub-menu. Should probably be added and removed with JavaScript depending on the menu collapsed/expanded status.

Last edited 5 years ago by afercia (previous) (diff)

#11 @afercia
5 years ago

Will create a separate ticket for the aria-haspopup="true". Tested again the current patch with latest Firefox+NVDA and Chrome+ChromeVox, would propose for commit consideration.

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


5 years ago

#13 follow-up: @wonderboymusic
5 years ago

Why only -999px?

#14 in reply to: ↑ 13 @afercia
5 years ago

Replying to wonderboymusic:

Why only -999px?

Thinking the menu is just 300px wide 36px wide when collapsed. Do you want to add one more byte, just in case? No objections of course.

Last edited 5 years ago by afercia (previous) (diff)

#15 @wonderboymusic
5 years ago

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

In 32946:

Admin menu: improve accessibility when collapsed.

Props afercia.
Fixes #32346.

Note: See TracTickets for help on using tickets.