What you will learn
- Build a navigation menu that adapts from mobile to desktop
- Check colour contrast, tap target size and keyboard access
- Use correct HTML elements so components work with assistive technology
A responsive component should work for everyone, not just look right. Start with the correct elements: links that go somewhere should be <a> elements, and controls that do something should be <button> elements. These are keyboard accessible by default. A <div> with a click handler is not, and screen readers do not announce it as a control, so avoid using one in place of a button.
Check colour contrast between text and its background. The WCAG guidelines ask for a contrast ratio of at least 4.5 to 1 for normal body text, and browser developer tools can measure it. On touch screens, make buttons and links large enough to tap comfortably, with space between them. Never remove focus outlines unless you replace them with a clearly visible alternative.
Navigation is a common challenge. On wide screens, links can sit in a row. On phones, a common pattern is a menu button that shows and hides the links. The button should say what it does, for example with visible text or an aria-label, and should report whether the menu is open using aria-expanded. You will add the toggle behaviour with JavaScript in the next module.