[New] - 3/13/2018

[Issue]

All menus inside "Sites" dialog have two functionalities.When screen reader users navigate to it using a keyboard, on the first TAB "star" receive focus and announces "Remove from favorites"; on the second TAB screen reader announce link name such as "Gradebook test again link", also if users activate the link it opens a new page and; on the third TAB down arrow (separator) receive keyboard focus and screen reader announce, through which users can open a menu.Menus are attached to the list items in the top 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.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]

Developers should:

• "favorites" icon needs to have the unique alternative name since there are multiple icons and all have the same name. An accessible title such as "remove Gradebook test again from favorites".

• 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.

• 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)

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/

[Compliant code]

HTML:

...