Build navigation that is accessible to screen readers, easy for search engines to crawl, and clear for users by using semantic HTML structures.
What it is
Navigation best practices involve structuring site links using semantic HTML elements. The core components are the <nav> landmark element, unordered lists (<ul>) for grouping links, and ARIA attributes like aria-current to indicate active states. This structure creates a predictable hierarchy for assistive technologies and crawlers.
Why it matters
- Accessibility: Screen reader users can jump directly to navigation landmarks and understand list context.
- SEO: Search engines better understand site structure and internal link relationships when markup is semantic.
- Maintainability: Standardized patterns make code easier to read, style, and update across large projects.
- User Experience: Clear visual indicators of the current page help users orient themselves within the site.
Syntax or steps
- Wrap primary navigation in a
<nav>element with anaria-labelif multiple navs exist. - Use an unordered list (
<ul>) inside the nav to group links logically. - Place each link (
<a>) inside a list item (<li>). - Add
aria-current="page"to the anchor tag representing the current page.
Example
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about" aria-current="page">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>The <nav> element defines the region. The aria-label distinguishes this from other potential navigation areas (like footer). The <ul> provides list semantics, allowing screen readers to announce "list of 3 items." The aria-current="page" attribute on the About link tells assistive technology that this is the user's current location, which should also be styled visually via CSS.
Common mistakes
- Using divs instead of lists: Links wrapped in
<div>lose list semantics, making it harder for screen reader users to navigate quickly. - Missing labels on multiple navs: If you have header and footer navigation, both need distinct
aria-labels (e.g., "Main" vs "Footer") so users know where they are jumping. - Relying only on color: Visual cues must be paired with
aria-currentor text changes for accessibility compliance. - Nesting interactive elements: Never place buttons or inputs inside navigation links; keep anchors simple.
When to use it
| Approach | Best For | Limitations |
|---|---|---|
| Semantic Nav + Lists | Standard websites, blogs, corporate sites requiring high accessibility scores. | Requires strict adherence to HTML standards; slightly more verbose than raw links. |
| Raw Link Groups | Simple footers or minimal single-page apps where structure is trivial. | Poor accessibility support; screen readers may not identify them as navigation regions. |
Practice
Guided Exercise: Create a navigation bar with three links: Home, Services, and Contact. Mark "Services" as the current page. Ensure the nav has an aria-label.
Challenge: Add a second navigation section for social media links below the main one. How do you ensure screen readers distinguish between the two?
Hint: Use different aria-label values, such as "Social Media" for the second nav.
Quick check
Question: Why is aria-current="page" preferred over just adding a CSS class like .active?
Answer: CSS classes are visual only. aria-current communicates state to assistive technologies, ensuring non-visual users know which page is active.
Summary
Accessible navigation relies on semantic HTML: use <nav> landmarks, <ul> lists for grouping, and aria-current for state indication. These habits improve usability for everyone while boosting SEO and maintainability.