Here's another alternative [0], from a team well versed into usability and accessibility issues: "gov.uk Design System" puts the navigation at the top of the p

Here's another alternative [0], from a team well versed into usability and accessibility issues: "gov.uk Design System" puts the navigation at the top of the page inside their header component. > Use the header with navigation if you need to include basic navigation, contact or account management links. * A list of links is directly visible in wider screens * These are collapsed into the equivalent of a hamburger menu on smaller screens * The label "Menu" and a downwards-pointing arrow are shown instead of a "hamburger" icon * The possible interactions are highlighted on keyboard navigation (yellow border moves when Tab is pressed) * Degrades gracefully when JavaScript is disabled by leaving the menu expanded. I haven't taken the opportunity to check how this works with a screen reader. [0]: https://design-system.service.gov.uk/components/header/ https://design-system.service.gov.uk/components/header/