Add aria-current to active header menu link #406
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tombye
approved these changes
Jun 13, 2025
Contributor
tombye
left a comment
tombye
left a comment
There was a problem hiding this comment.
Thanks for this Andrew. Works as expected when tested with the WCAG primer (Notify doesn't link to docs pages in our header so I can't test with our docs).
It also touches code that will just be the same whatever flavour of docs you have so good to go 👍🏻
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What’s changed
This PR adds
aria-current="page"to the currently highlighted menu item in the page header. I believe this fixes #403, an accessibility issue where the currently active link was only conveyed using a change of colour.I've tested this on the example site using VoiceOver on Safari and Chrome. The currently active page reads correctly as "current page", and any non-current pages do not include this label.
Identifying a user need
This came out of accessibility testing in the WCAG Primer working group by Shabana Ali. As the information is only conveyed visually and not programmatically, we believe it currently fails WCAG (1.3.1 Info and Relationships - level A).