search

wet-boew / GCWeb

Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System
https://wet-boew.github.io/GCWeb/
Other
93 stars 130 forks source link

[BUG] Canada.ca Menu - aria-label exceeds 250 characters #2174

Open alfredoscaini opened 1 year ago

alfredoscaini commented 1 year ago

Required information

Description There is currently an aria-label attached to the 'Menu' button. The attribute length exceeds 250 characters. This is cumbersome for a screen reader user and really redundant. Persons who use these tools are aware of how keyboard navigation works.

The issue is this text which is intended to assist users who are blind but sighted users use keyboard navigation as well. Keyboard users are also persons with mobility or cognitive disorders. We cannot assume only a blind user would need this information.

It forces a user to listen to this text every time they go to the main navigation very cumbersome and not really effectively required.

To Reproduce

  1. Go to Canada.ca's homepage https://www.canada.ca/en.html
  2. Observe the Menu (aria-label)
  3. Scroll down to '....'
  4. See error

Expected behaviour Consider shortening this label text (or removing). It is not providing an equal experience for all users. It also is not required for screen reader users they already know how keyboard navigation works.

Who shall do the work? I am asking for Principal publisher to please do the work

Additional information (optional)

Desktop/Smartphone (please complete the following information)

Screenshots If applicable, add screenshots to help explain the bug.

Additional context WCAG 2.0 Success Criterion 2.1.1 Keyboard (Level A)

EricDunsworth commented 1 year ago

Moved this over to GCWeb since it's unrelated to WET (not to mention WET's mega menu doesn't have similar behaviour).

On a side note, I find aria-label to be kind of an odd choice as things stand. That setup causes screen readers to announce the button's description instead of its actual label ("Main menu"). On my end, Firefox + NVDA end up announcing "menu button" somewhere along the way... but I'm not sure where it's picking up "menu" from :S (still says that even when I rename all "menu" content and menu-related markup in devtools).