pharos
pharos copied to clipboard
Storybook/Site: Implicit list of links
The problem The top level of the Sidenav component contains a set of visually grouped links that are not marked up as part of a list. Screen reader users will perceive the navigation region and then each individual link without giving context to how they are each associated.
The solution
Developers can add <ul>
and <li>
elements appropriately to give semantic structure to the top level of navigation.
Additional information The menu items that are part of the collapsible sections do utilize this explicit list structure, the same practice should be used for all sets of grouped links.
We should fix the examples we have both on the Pharos site itself as well as in the story for this component, but the choice of the content is ultimately up to the consumer, so teams will also need to fix this themselves.