[New] - 3/13/2018

[Issue]

Standalone menus have two functionalities. When screen reader users navigate to it using a keyboard, on the first TAB screen reader announce link name such as "Level Access Test Site link", also if users activate the link it opens a new page and on the second TAB down arrow (separator) receive keyboard focus and screen reader announce nothing, through which users can open a menu.Standalones menus are attached to the list items in the main banner but this is not rendered to assistive technologies.This is not the standard behavior of menu and also, it does not follow the standard keyboard paradigm for a menu.

[User Impact]

Here, screen reader users never get to know that there are menu items and how they can access it. Since this does not follow standard keyboard paradigm, screen reader users get confused when they follow menu keyboard paradigm and they are not able to access menuitem.The name of the element may not be sufficient for users who can not see to determine that an attached menu is available.

[Code]

HTML:

...

[Expected behavior]

Scenario 1: Developers should:

• use the aria-haspopup attribute (OR include a textual description that indicates that a menu is attached),

• provide the toggle link a textual content or a aria-label,

• remove the separator role.

• need to inform users that how they can navigate to sub-item using keyboard. This is require since it does not follow standard keyboard paradigm of menu.

NATIVE MENU SYNTAX

• Heading with Level Start

• Native Button with Expandable State (via aria-expanded)

• Heading with Level End-Expandable Named Region Start (via role="region" plus aria-labelledby or aria-label)

• List of Native Links

• Expandable Named Region End

Scenario 2:

• Alternatively, need to use proper role of menu, menuitem, menubar for proper execution of menu. (Here, developers might be remove dual functionality where a link opens a new page).

SIMPLE ARIA MENU SYNTAX

Button Role with Attached Menu (via aria-haspopup="true" or aria-haspopup="menu")
Dynamically Rendered Menu Start (via role="menu" or role="menubar")
List of Menu Items (via role="menuitem", role="menuitemcheckbox", or role="menuitemradio")
Dynamically Rendered Menu End

[Reference links]

Developers can refer following links for menu:
https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/
http://whatsock.com/training/matrices/#menu
https://www.w3.org/TR/wai-aria-1.1/#menu
https://www.w3.org/WAI/tutorials/menus/