Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML validation error: 'Possible misuse of aria-label' in header #1340

Closed
2 tasks done
Tracked by #2274
hannalaakso opened this issue May 13, 2019 · 7 comments · Fixed by #2427
Closed
2 tasks done
Tracked by #2274

HTML validation error: 'Possible misuse of aria-label' in header #1340

hannalaakso opened this issue May 13, 2019 · 7 comments · Fixed by #2427
Assignees
@36degrees
Labels
accessibility breaking change header
Milestone
v4.0.0

Comments

@hannalaakso
Copy link
Member

hannalaakso commented May 13, 2019 •
edited by vanitabarrett
Loading

The header with navigation throws the following warning in https://validator.w3.org/:

Possible misuse of aria-label.

This relates to

govuk-frontend/src/components/header/template.njk

Line 68 in fea29aa

<ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
which was inherited from govuk_template.

The WCAG specs state that aria-label can be used for:

  • Distinguishing navigation landmarks
  • Identifying region landmarks

We should review whether having aria-label in this context provides useful information for assistive technologies.

There is also a related issue where we hide the list inside the navigation element when showing/hiding the navigation. This means that a user can end up with an empty <nav></nav> element, which may cause issues/confusion for screenreader users. See comment for more context.

Done when

  • TBC
  • "Details of breaking change" section below completed to help with writing release notes

Details of breaking change

  • which users are affected: TBC
  • the change that’s been made: TBC
  • changes users will have to make: TBC
  • impact of users not making those changes: TBC
@hannalaakso hannalaakso added awaiting triage Needs triaging by team accessibility labels May 13, 2019
@36degrees
Copy link
Contributor

I wonder if the label should be applied to the nav, rather than the ul.

@hannalaakso
Copy link
Member Author

Yes that seems like a potential fix 👍 Tested moving it to nav and it's no longer flagged as an error. It also makes sense about what W3C says about

Distinguishing navigation landmarks

@kellylee-gds kellylee-gds added 🕔 hours A well understood issue which we expect to take less than a day to resolve. Priority: low and removed awaiting triage Needs triaging by team labels May 15, 2019
@36degrees 36degrees mentioned this issue Jun 7, 2019
Closed
@36degrees 36degrees self-assigned this Jun 7, 2019
@36degrees
Copy link
Contributor

Tried an initial stab at this in #1440 but it needs more investigation.

Specifically:

  • whether the relationship between the aria-label on the ul and the button which controls the ul (rather than the nav) is important
  • whether it's weird that the ul rather than the nav collapses, which means for AT users there will always be a nav landmark which may be empty.

@36degrees 36degrees removed their assignment Jun 12, 2019
@hannalaakso hannalaakso mentioned this issue Jul 9, 2019
Closed
2 tasks
@timpaul timpaul mentioned this issue Aug 28, 2019
Closed
25 tasks
@hannalaakso hannalaakso self-assigned this Sep 9, 2019
@hannalaakso hannalaakso removed their assignment Sep 9, 2019
@36degrees 36degrees self-assigned this Sep 13, 2019
@36degrees 36degrees added this to the v4.0.0 milestone Sep 13, 2019
@NickColley NickColley mentioned this issue Nov 1, 2019
Closed
@36degrees 36degrees mentioned this issue Dec 19, 2019
Open
1 task
@kellylee-gds kellylee-gds removed the 🕔 hours A well understood issue which we expect to take less than a day to resolve. label Mar 5, 2020
@hannalaakso
Copy link
Member Author

Notes from team discussion:

  • It can be useful to be able to label landmarks if there are multiple instances of the same thing on the page and you want to differentiate between them

@36degrees 36degrees self-assigned this Sep 14, 2020
@stevehook stevehook mentioned this issue Sep 22, 2020
Merged
6 tasks
@EoinShaughnessy
Copy link
Contributor

Just want to check my understanding...Is the breaking change here that we're going to ask users to apply aria-label to nav instead of ul? Also, what happens if they do not do this following the release?

@vanitabarrett
Copy link
Contributor

@EoinShaughnessy From my understanding at the moment, yes, that may be the change that users need to apply. I think it's definitely still possible that solution may change as I think it still needs testing with different assistive technologies to check how it performs.

There's also the related issue that because of the way the navigation is implemented, you can end up with empty <nav></nav> tags with no navigation inside - this is something that may confuse screenreader users. If we decide to make changes to fix that issue too, then there may be more changes for users to make.

@EoinShaughnessy
Copy link
Contributor

Thanks, @vanitabarrett!

@kellylee-gds kellylee-gds mentioned this issue Sep 15, 2021
Closed
45 tasks
36degrees added a commit that referenced this issue Nov 9, 2021
@36degrees
Move label in header to from list to nav
35ab6a7 
Move the 'Navigation menu' label from the `<ul>` to the parent `<nav>` element.

This has previously been flagged as a 'possible misuse of `aria-label`.'

According to WAI ARIA Practises 1.2 [2], it's recommended to label navigation regions, especially as 'if a page includes more than one navigation landmark, each should have a unique label' [3].

Lists can optionally be labelled, but this is only '_potentially_ beneficial for users of screen readers that support both list names and navigation among lists on a page'.

Applying the label to both the list and the parent navigation could be noisy – "Potentially a source of distracting or undesirable screen reader verbosity, especially if nested within a named container, such as a navigation region."

The provided examples [4] also apply the label consistently to the navigation region (albeit using `aria-labelledby`)

[1]: #1340 (comment)
[2]: https://www.w3.org/TR/wai-aria-practices-1.1/#naming_role_guidance
[3]: https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_navigation
[4]: https://www.w3.org/TR/wai-aria-practices-1.1/examples/landmarks/navigation.html
@36degrees 36degrees mentioned this issue Nov 9, 2021
Merged
36degrees added a commit that referenced this issue Dec 1, 2021
@36degrees
Move label in header to from list to nav
0f812d8 
Move the 'Navigation menu' label from the `<ul>` to the parent `<nav>` element.

This has previously been flagged as a 'possible misuse of `aria-label`.'

According to WAI ARIA Practises 1.2 [2], it's recommended to label navigation regions, especially as 'if a page includes more than one navigation landmark, each should have a unique label' [3].

Lists can optionally be labelled, but this is only '_potentially_ beneficial for users of screen readers that support both list names and navigation among lists on a page'.

Applying the label to both the list and the parent navigation could be noisy – "Potentially a source of distracting or undesirable screen reader verbosity, especially if nested within a named container, such as a navigation region."

The provided examples [4] also apply the label consistently to the navigation region (albeit using `aria-labelledby`)

[1]: #1340 (comment)
[2]: https://www.w3.org/TR/wai-aria-practices-1.1/#naming_role_guidance
[3]: https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_navigation
[4]: https://www.w3.org/TR/wai-aria-practices-1.1/examples/landmarks/navigation.html
@36degrees 36degrees changed the title Review if aria-label in header navigation is necessary HTML5 validation error: 'Possible misuse of aria-label' in header Jul 4, 2022
@36degrees 36degrees changed the title HTML5 validation error: 'Possible misuse of aria-label' in header HTML validation error: 'Possible misuse of aria-label' in header Jul 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@36degrees 36degrees

Labels
accessibility breaking change header
Projects
GOV.UK Design System cycle board
Archived in project
GOV.UK Frontend - Known issues flagged by validators or automated testing tools
Status: Fixed
Milestone
v4.0.0
Development

Successfully merging a pull request may close this issue.

Improve the screen reader experience for the header menu alphagov/govuk-frontend
5 participants
@36degrees @hannalaakso @vanitabarrett @kellylee-gds @EoinShaughnessy