OData / odataorg.github.io

Staging site and collaboration repository for http://www.odata.org
MIT License
63 stars 101 forks source link

Announce menuitem role in navbar in NVDA screen reader #227

Closed habbes closed 4 years ago

habbes commented 4 years ago

Issue

Repro Steps: ​​​

1.Start NVDA​ 2.Hit the URL "https://www.odata.org/" to open Odata website​ 3.Tab till 'Blog', 'Ecosystem', 'Getting Involved' controls​ 4.Verify NVDA is announcing the role for 'Blog','Ecosystem','Getting Involved' controls or not​ ​

Actual Result: ​​​

NVDA is not announcing the role for 'Blog', 'Ecosystem', 'Getting Involved' controls​ ​

Expected Result:​

NVDA should read the role for 'Blog', 'Ecosystem', 'Getting Involved' controls​

Proposed fix

According to this issue the fact NVDA does not announce "menu item" whenever it reads a control with a menu item role is not a bug, it's intentional.

However, I did find that if I kept the role="menuitem" in the <li> elements only and not in the enclosed <a> elements, then it did announce "menu item" after reading the text of the menu link. But surprisingly in this case, the "menu item" part does not get announced in Windows Narrator.

The workaround that worked for both Narrator and NVDA was to simply use aria-label attributes for the <a> elements in the list items, giving them labels like "Blog menuitem". Both NVDA and Narrator read the aria-label. But Narrator reads both the aria-label and the role, leading to the screen reader announcing "Blog menu item menu item". To avoid that issue, I removed the role attribute from the list items and their links. Instead, I replaced the role=menubar of the enclosing ul element with role=navigation.