How to build an accessible navigation without breaking Google crawl?

Too many developers fall into the trap of overusing JavaScript, building dynamic menus that are unreadable by screen readers or poorly structured in HTML. The result? Google gets lost, and so do assistive technologies.

And now, with the European Accessibility Act (EAA) officially in force, things just got serious. Any digital service in the EU, e-commerce sites, apps, public services, etc, must be fully accessible, or face legal consequences. So an inaccessible navigation isn’t just bad UX anymore, it’s a legal liability.

Here’s how to build a clear, clean, SEO-friendly and accessible navigation. Spoiler: it’s not hard, and it’s not rocket science.

The <nav> element: Your best friend

The <nav> tag in HTML5 isn't decorative, it's a structural landmark for both Google and screen readers. It says: "This is important navigation content".

A good navigation structure includes:

• Clear HTML structure using <ul>, <li>, and <a>
  
• An aria-label for screen readers
  
• No JavaScript required to show basic content, Google should see everything immediately

Example:

<!-- ✅ Good -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/recipes">Recipes</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
</nav>

<!-- ❌ Bad -->
<div class="menu">
  <div onclick="location.href='/recipes'">Recipes</div>
  <div onclick="location.href='/blog'">Blog</div>
  <div onclick="location.href='/contact'">Contact us</div>
</div>

Google immediately understands the first one. The second? It doesn’t even know those are links.

No Links = No Crawl

Modern menus are often rendered entirely via JavaScript. For example:

<button id="burger-menu">☰</button>
<nav id="menu"></nav>

<script>
  document.getElementById('burger-menu').addEventListener('click', () => {
    document.getElementById('menu').innerHTML = `
      <ul>
        <li><a href="/recipes">Recipes</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact us</a></li>
      </ul>
    `;
  });
</script>

Problem #1: Google might not see your links

If Google can’t execute your JavaScript (or if there’s a script error), your navigation is invisible. That means your key pages won’t be crawled.

Problem #2: Broken accessibility

Screen readers read the DOM as it exists when the user starts navigating. If your menu is injected via JavaScript after an interaction, screen reader users may never know it exists. Some assistive tech can detect DOM changes—but not always, and not reliably if JS is slow or disabled.

Golden Rule: Your HTML must always contain the links. JavaScript can enhance but never replace them.

A fully functional, accessible & SEO-Friendly burger menu

Burger menus are common on mobile, but there’s no need to generate them with JavaScript. Here’s a clean, accessible implementation:

<nav aria-label="Main navigation">
  <button 
    id="burger-menu" 
    aria-expanded="false" 
    aria-controls="menu"
    aria-label="Open menu"
  >
    ☰
  </button>
  <ul id="menu" hidden>
    <li><a href="/recipes">Recipes</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
</nav>

<script>
  const burger = document.getElementById('burger-menu');
  const menu = document.getElementById('menu');

  function toggleMenu() {
    const isExpanded = burger.getAttribute('aria-expanded') === 'true';
    burger.setAttribute('aria-expanded', String(!isExpanded));
    menu.hidden = isExpanded;
  }

  // Click handler
  burger.addEventListener('click', toggleMenu);

  // Keyboard accessibility
  burger.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleMenu();
    } else if (e.key === 'Escape' && !menu.hidden) {
      e.preventDefault();
      toggleMenu();
      burger.focus(); // Return focus to the button
    }
  });
</script>

This version ticks all the boxes:

• The links are in the HTML from the start, Google sees them
• The button has proper ARIA attributes, screen readers understand what’s happening
• The menu is visually hidden but always in the DO
• Keyboard interaction is fully supported

TL;DR: SEO-Friendly Navigation Rules

• Use <nav> and proper ARIA attributes: great for screen readers and Google
• Always render links in raw HTML, never only via JavaScript
• Use semantic structure: <ul>, <li>, and <a> (in that order)
  
• Add ARIA attributes to improve accessibility, especially on dynamic menus

Need help building an accessible, SEO-optimized site? Reach out, we're here to help you avoid legal pitfalls and build better user experiences.