Accessible navigation patterns that scale
Practical principles for building menus that work with touch, keyboard, and assistive technology.
Navigation is one of the most frequently used parts of a website. It should remain predictable whether someone uses a mouse, a keyboard, touch input, or a screen reader.
Start with semantic HTML
Use a nav element with a useful accessible label. Links should remain links, while buttons should only trigger actions such as opening or closing a menu.
Preserve keyboard behavior
Every interactive control needs a visible focus state. The tab order should follow the visual reading order, and menus should close when the Escape key is pressed.
Test at different sizes
A navigation pattern that works on a large screen may become difficult to use on a phone. Test narrow viewports, long labels, zoomed text, and touch targets before considering the component complete.