Keyboard Accessible Side Menu Dribble

This is actually a re-imagining of tuts-plus by Envato menu's. It's not been commissioned by them and is a personal hobby project.

I Love their colours but as a full-screen HD & UHD user they just were not large and bold enough for me.

I originally made this in 2015, but as I have a gap between my next engagement I thought I'd dial A11y up to 11. Neither the tutsplus website nor my original experiment with the menu style were keyboard accessible, neither used screen-reader helpers to ensure visually impaired users could use the menu.

This bypasses the "skip to content" anti-pattern instead embedding the menu in the side-bar. Perhaps a skip-to-menu link could be used instead.

It's not-yet responsive, but does cope with scaling all the way up to 500% and is usable on an old iphone device I own.

Standard tab-navigation is the order of the day with this. You can get to the menu using shift+tab from the get-go, like accessing a footer nav. By default the example is setup to navigate content first, and navigation second.

.sr-only utility class provided to ensure all menu's have text that is screen-reader compatible and extreme left positioning is used to remove menus from the canvas to stop z-index fighting.

What would be nice to work-out would be non-JS shortcuts like using cursor keys as this is quite a large nav (~100 items). This is another reason to not have before content, and to default to not skip-to-content IMO.

I'd specifically welcome feedback or links to resources on improving complex interfaces using such gargantuan menu's for keyboard or non-pointer access.

One alternative I have decided may work would be omitting the nav until the user navigates to an area, reducing the choices to ~20 for the nav, but requiring multiple navigation actions (hops) to traverse the menu.