Web component: Mega Menu - "The essentials, Hybrid Cloud" are read as menu options for screen reader users. #5081
Assignees
Labels
accessibility
Has accessibility requirement
adopter support
bug
Something isn't working
dev
Needs some dev work
package: web components
Work necessary for the IBM.com Library web components package
severity 2
Affects major functionality, has a workaround
Sprint Must Have
Milestone
Comments
Praveen-sr
added
accessibility
RobertaJHahn
added
Sprint Must Have
Airtable Done
adopter support
dev
RobertaJHahn
added
the
package: web components
|
@Praveen-sr can this be tested again? I'm tabbing through the menu and JAWS doesn't identify the "The essentials" or "Hybrid Cloud" text, should I be using some other keyboard command? |
|
@annawen1 Re tested this on web component, issue still exists
|
|
@Praveen-sr Ah ok, thank you for the detailed steps - will try that |
|
@Praveen-sr I tried the steps you mentioned, tabbing to the "what is hybrid cloud" link then using the arrows keys to navigate. I am using a Virtual Machine and am trying to figure out how to enable audio but for now I have JAWS subtitles/captioning enabled and I do not see it mentioning "menu" when I navigate to the "The essentials" or "Hybrid cloud" text. I've posted a video. Please let me know if there is anything I'm missing or I should try. JAWS.megamenu.test.mov |
|
@Praveen-sr I tried with JAWS 2020 version on both Firefox and Chrome but still can't replicate the issue Screen.Recording.2021-02-10.at.3.12.57.PM.mov |
|
@annawen1 Hi, Ram was not able to screen record JAWS audio, instead he is provided the JAWS speech history, |
kodiakhq bot
pushed a commit
that referenced
this issue
Feb 12, 2021
### Related Ticket(s) Web component: Mega Menu - "The essentials, Hybrid Cloud" are read as menu options for screen reader users. #5081 ### Description This PR removes the `role='menu'` from the `ul` as it is unnecessary and conflicts with the elements placed in the megamenu/dropdown. PR here from carbon-for-ibm-dotcom where we removed the menu role from our own version of the header menu #4624 The dropdown menu/megamenu shouldn't have the role="menu" applied as listed here: Example Disclosure for Navigation Menus | WAI-ARIA Authoring Practices 1.1 https://www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-navigation.html <img width="950" alt="Screen Shot 2020-12-03 at 4 25 20 PM" src="https://user-images.githubusercontent.com/54281166/101090282-661c0680-3584-11eb-8dd0-b43ca6f9aa7e.png"> ### Changelog **Changed** - grab the `bx--header-menu` element and remove the `role` attribute <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
IgnacioBecerra
pushed a commit
to IgnacioBecerra/ibm-dotcom-library
that referenced
this issue
Feb 22, 2021
…em#5160) ### Related Ticket(s) Web component: Mega Menu - "The essentials, Hybrid Cloud" are read as menu options for screen reader users. carbon-design-system#5081 ### Description This PR removes the `role='menu'` from the `ul` as it is unnecessary and conflicts with the elements placed in the megamenu/dropdown. PR here from carbon-for-ibm-dotcom where we removed the menu role from our own version of the header menu carbon-design-system#4624 The dropdown menu/megamenu shouldn't have the role="menu" applied as listed here: Example Disclosure for Navigation Menus | WAI-ARIA Authoring Practices 1.1 https://www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-navigation.html <img width="950" alt="Screen Shot 2020-12-03 at 4 25 20 PM" src="https://user-images.githubusercontent.com/54281166/101090282-661c0680-3584-11eb-8dd0-b43ca6f9aa7e.png"> ### Changelog **Changed** - grab the `bx--header-menu` element and remove the `role` attribute <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Detailed description
On JAWS FF
Issue:
Screen reader is not supposed to identify the mentioned texts (The essentials, Hybrid Cloud) as "menus". And if they are headings visually, They have to be identified as "heading" instead.
Additional information
The text was updated successfully, but these errors were encountered: