aria-label for heading menu duplicates information provided by the aria-expanded attribute

[dav-idc]

This issue is from May 2023 external accessibility audit report.

Usability issue

A menu button contained additional text which is not required.

Issue ID:
DAC_Usability_Menu_Button_01

URLs:
https://govuk-frontend-pr-3503.herokuapp.com/full-page-examples/task-list

Screen shots

The menu button has been provided with an ‘aria-label’ adding the phrase ‘show or hide’ to the accessible name. However, as the ‘aria-expanded’ already conveys the functionality and current state, the show or hide text may add some confusion.

Current code ref(s)

body > header > div > div.govuk-header__content > nav > button

<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" aria-expanded="true">Menu</button>

User comments

No user comment provided.

Solution

Consider removing the ‘show or hide’ from the accessible name and just use ‘menu’ in conjunction with the ‘aria-expanded’, as this already conveys the appropriate functionality and state of the component.

[querkmachine]

Seems like a simple fix, but to overthink it for a bit:

If we change the label to only read 'Menu' then the default aria-label is going to be identical to the button text, which becomes another (arguable) redundancy. This would also mean we have three separate Nunjucks parameters that default to to the text 'Menu': navigationLabel, menuButtonLabel and menuButtonText.

Should we do something to make it so that the aria-label attribute is only set if the value is provided and that value is different from the text of the button?

[36degrees]

@querkmachine I'm assuming #3791 wasn't a breaking change as it's listed as a fix in the release notes? Just wondering whether we should backport it and release it in v4.70.

[querkmachine]

@36degrees Not a breaking change to my eyes, no.

It could be bumped to a recommended change to remove the aria-label if it's the same as the button text, as that's redundant, but even then there's no harm by it still being present that I'm aware of.