pharos icon indicating copy to clipboard operation
pharos copied to clipboard

Storybook/Site: Implicit list of links

Open sirrah-tam opened this issue 1 year ago • 1 comments

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.

Screen Shot 2023-04-07 at 10 53 40 AM|450 Screen Shot 2023-04-07 at 10 55 56 AM|450

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.

sirrah-tam avatar Apr 07 '23 18:04 sirrah-tam

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.

daneah avatar Jul 07 '23 19:07 daneah