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.

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

Global footer navigation should not use five separate nav landmarks #402

Closed
joedolson opened this issue May 31, 2023 · 2 comments · Fixed by #455
Closed

Global footer navigation should not use five separate nav landmarks #402

joedolson opened this issue May 31, 2023 · 2 comments · Fixed by #455
Assignees
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer

Comments

@joedolson
Copy link

The global footer navigation is currently structured as five separate navigation landmarks. This is only one navigation group, and should be in a single navigation menu.

Additionally, these navigation menus have no accessible name. As individual sections, there isn't really any reasonable name for these menus - they aren't distinct collections of information. But as a single navigation menu, 'Footer' would be a perfectly reasonable name for the menu.

This would significantly help in reducing aural clutter for screen readers, since there are currently 9 navigation landmarks in global scope.

@ryelle ryelle added Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer labels May 31, 2023
@ryelle
Copy link
Contributor

ryelle commented May 31, 2023

Technically, this is because each column of links is a separate nav block. We could investigate using one nav block and using CSS to make them columns, maybe.

There are a few other requirements, which could probably be flexible

  • Each column's content should stay consistent across screen sizes, and reading order should be down each column. They are roughly in content-groups, even if it's not very distinct.
  • Each link should stay as a navigation-link block, since there's a filter applied to update the URLs on the rosetta (locale-specific) sites, like https://ja.wordpress.org/.

There's some additional discussion about the content of these menus here: #364

@joedolson
Copy link
Author

It would definitely improve the end user experience to have only one nav block with CSS to manipulate the layout. Alternately, having multiple lists inside a single nav container, but I don't know if that's achievable using the nav block.

@ryelle ryelle added this to the Navigation Iteration milestone Sep 20, 2023
@ryelle ryelle self-assigned this Sep 25, 2023
ryelle added a commit that referenced this issue Oct 2, 2023
…er. (#455)

* Global Footer: Switch multiple nav blocks to lists inside a nav wrapper.

Fixes #402

* Add an aria-label to the navigation

* Global Footer: Remove scroll padding fix

This is not necessary on the footer items, because they are not full-width (the edge-spacing on the footer handles this).
@ryelle ryelle moved this to ✅ Done in WordPress.org Redesign Oct 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants