Make MathJax contextual menu properly accessible

[jcsteh]

The MathJax contextual menu inserts clickable divs at the end of the document, but it does not focus them in any way or expose semantic information. For screen reader users (and perhaps users of other assistive technology products), these are difficult to locate. Most users wouldn't even realise this menu had appeared, let alone know how to use it. This can all be fixed with ARIA and keyboard handling.

Things that need to be done:

• The menu items need to be focused. Either set tabindex="-1" for all menu items and focus the item or set tabindex="-1" on the root of the menu, focus that and set aria-activedescendant on it to indicate the active item.
• Menus need to be given an ARIA role of menu. Menu items need to be given appropriate menu item roles (menuitem, menuitemcheckbox, menuitemradio).
• There needs to be an appropriate hierarchical relationship between submenu items and their submenu. Either the DOM positioning needs to be changed or aria-owns needs to be used.
• Appropriate keyboard navigation needs to be implemented; e.g. up/down arrows to move between items, left/right arrows to enter/exit submenus, enter to activate an item.

/cc @pkra

[pkra]

Thanks of the feedback -- that's extremely helpful!

I'm wondering how the menu should be triggered, e.g., for users using keyboard navigation. Should it be permanently in the DOM? If yes, any particular position / markup to make it apparent?

Also, would you say http://adobe-accessibility.github.io/Accessible-Mega-Menu/ is a good resource?

[jcsteh]

I'm wondering how the menu should be triggered, e.g., for users using keyboard navigation.

Screen reader users can right click it easily enough. However, that's not true for keyboard users who aren't screen reader users. Perhaps the expression could be in the tab order and the context menu key (e.g. the Applications key/shift+f10 in Windows) could be intercepted to open it, just as right click does.

Should it be permanently in the DOM?

I don't think it should be, since it's meant to be a contextual menu and contextual menus aren't generally available until they're activated.

Also, would you say http://adobe-accessibility.github.io/Accessible-Mega-Menu/ is a good resource?

The problem with their solution is that they intentionally don't use the menuitem* roles. They want the items to be treated as links, but this causes screen reader to treat the content as a document instead of a menu. I'd probably recommend that you stick to the ARIA authoring practices for menus, which Adobe do reference.

[pkra]

Thanks for the additional info, @jcsteh, much appreciated!

[pkra]

Just some notes from other discussions.

• we probably need to disable outlines caused by adding equations to the tabindex (since browser do not honor clipping, making the outlines look extremely messy/irritating).
• so we need to provide a visual cue (maybe along the lines of the unfinished discvoerability UI).