Page MenuHomePhabricator

[Spike] Investigate how to make slide-over menu accessible
Closed, DuplicatePublic

Description

Investigate how we can indicate that a menu is open/closed to voiceover

Background
These elements of the page are currently somewhat confusing. If you manage to open a menu, voiceover still thinks you are at the same spot in the document, instead of moving you into the menu. I found an implementation and explanation that might be useful to fix this.

1: http://marcysutton.com/page-scrolling-in-mobile-safari-voiceover/
2: https://a11ywins.tumblr.com/post/116427997643/voiceover-accessible-slide-menu
3: http://codepen.io/marcysutton/pen/JoQqVw

P.S. These should probably be oojs UI elements, so that they can be reused properly.

Event Timeline

ovasileva renamed this task from Slide-over menu's are not accessible to [Spike] Investigate how to make slide-over menu accessible.Oct 12 2016, 3:21 PM
ovasileva triaged this task as Medium priority.
ovasileva updated the task description. (Show Details)
Jdlrobson subscribed.

Given the mention of OOjs UI elements, I'm assuming this is generic to all menus...

@Volker_E I'm curious if the new no-JS menu I've proposed in is more accessible (see T225213)

So the markup of current hamburger button (link) fails in screen readers, as there's no clear connection for AT between the trigger and the menu.
With :target that would actually be provided! 💯

Additionally we should either turn the link into a button element or add at least role=button to it.

Edit
Should have been clearer with above, if changing this to a button we would go actually a different route as :target needs to be triggered by a link. The one quest here is though to expose the link as button to AT as it's clearer as button than as link so role=button should be attached.

Change 539974 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Main menu works without JavaScript using :target selector

https://gerrit.wikimedia.org/r/539974

Change 539974 abandoned by Jdlrobson:
Main menu works without JavaScript using :target selector

Reason:
Approach in https://gerrit.wikimedia.org/r/559179 is now being used.

https://gerrit.wikimedia.org/r/539974