RGAA Navigation Accessibility Audit (Theme 12)

Audits a web page against the 11 criteria of RGAA v4.1.2 Theme 12: Navigation.

Audit procedure

Step 1: Gather navigation data

(() => {
  const nav = {};

  // Navigation systems
  nav.navElements = [];
  document.querySelectorAll('nav, [role="navigation"]').forEach(el => {
    nav.navElements.push({
      tag: el.tagName.toLowerCase(),
      ariaLabel: el.getAttribute('aria-label'),
      ariaLabelledby: el.getAttribute('aria-labelledby'),
      linkCount: el.querySelectorAll('a').length,
      firstLinks: Array.from(el.querySelectorAll('a')).slice(0, 5).map(a => ({
        text: a.textContent.trim().substring(0, 40),
        href: a.href?.substring(0, 80)
      }))
    });
  });

  // Search form
  nav.searchForm = null;
  const searchInput = document.querySelector('input[type="search"], [role="search"] input, input[name*="search"], input[name*="query"], input[name*="q"]');
  if (searchInput) {
    const searchContainer = searchInput.closest('[role="search"], form');
    nav.searchForm = {
      hasRoleSearch: !!document.querySelector('[role="search"]'),
      inputType: searchInput.type,
      inputLabel: searchInput.getAttribute('aria-label') || document.querySelector(`label[for="${searchInput.id}"]`)?.textContent.trim(),
      isInNav: !!searchInput.closest('nav, [role="navigation"]')
    };
  }

  // Skip links
  nav.skipLinks = [];
  const firstLinks = Array.from(document.querySelectorAll('a[href^="#"]')).slice(0, 10);
  firstLinks.forEach(a => {
    const target = a.getAttribute('href');
    const targetEl = target && target.length > 1 ? document.querySelector(target) : null;
    nav.skipLinks.push({
      text: a.textContent.trim().substring(0, 60),
      href: target,
      targetExists: !!targetEl,
      targetTag: targetEl?.tagName.toLowerCase(),
      targetRole: targetEl?.getAttribute('role'),
      isVisible: getComputedStyle(a).position !== 'absolute' || getComputedStyle(a).clip !== 'rect(0px, 0px, 0px, 0px)',
      becomesVisible: !!a.matches(':focus-within, :focus') || a.className.includes('skip') || a.className.includes('sr-only')
    });
  });

  // Sitemap link
  nav.sitemapLink = null;
  document.querySelectorAll('a').forEach(a => {
    const text = a.textContent.trim().toLowerCase();
    if (text.includes('plan du site') || text.includes('sitemap') || text.includes('plan de site')) {
      nav.sitemapLink = { text: a.textContent.trim(), href: a.href?.substring(0, 100) };
    }
  });

  // Landmark regions
  nav.landmarks = [];
  document.querySelectorAll('header, footer, main, nav, aside, [role="banner"], [role="main"], [role="contentinfo"], [role="navigation"], [role="complementary"], [role="search"], [role="region"]').forEach(el => {
    nav.landmarks.push({
      tag: el.tagName.toLowerCase(),
      role: el.getAttribute('role') || el.tagName.toLowerCase(),
      ariaLabel: el.getAttribute('aria-label'),
      ariaLabelledby: el.getAttribute('aria-labelledby')
    });
  });

  // Tab order check: get all focusable elements in DOM order
  const focusable = document.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
  nav.focusableCount = focusable.length;
  nav.positiveTabindexCount = document.querySelectorAll('[tabindex]:not([tabindex="0"]):not([tabindex="-1"])').length;

  // Keyboard shortcut attributes
  nav.accesskeys = [];
  document.querySelectorAll('[accesskey]').forEach(el => {
    nav.accesskeys.push({
      key: el.getAttribute('accesskey'),
      tag: el.tagName.toLowerCase(),
      text: el.textContent.trim().substring(0, 40)
    });
  });

  return JSON.stringify(nav, null, 2);
})()