Before and after
Below is the kind of menu Pandu replaces, built the way many sites still ship it: hover-only dropdowns, tiny text, no phone layout. Try it with the Tab key, then try the menu at the top of this page.
Before: the old menu
Live, not a picture. Point at Trips to see its dropdown, then press Tab: focus skips every link inside it.
LERENG OUTFITTERS
After: Pandu
It is the menu at the top of this page. Press Tab from the address bar, or jump back up and open Trips with Enter.
| Check | Old menu | Pandu |
|---|---|---|
| Reach every link with the keyboard | No: dropdown links are only shown on mouse hover | Yes, in reading order, plus arrow-key shortcuts |
| Screen reader knows a section opens | No: the label is a plain span | Yes: a button with aria-expanded and aria-controls |
| Says which page you are on | No | Yes: aria-current="page" and an underline |
| Works on a 320 px phone | No: the bar scrolls sideways | Yes: Menu button and a drawer with accordions |
| Touch on a tablet | Hover menus need a second tap or never open | Tap opens; hover is only used with a real mouse |
| Text size and targets | 11 px text, 22 px tall targets | 15 px text, 44 px targets |
| Works with JavaScript off | Yes, but only by mouse | Yes: links, hover and focus panels, and a :target drawer |
| Reduced motion, high contrast | Not considered | Both handled |
| Adding a link | Edit HTML in every page and the hover CSS | Add one <li> in your nav template |
| Weight | About 1 KB | 7.1 KB gzipped |
The old menu is a reconstruction for comparison, not anyone's real site.