WCAG 3.2.3: Konsekvent navigering

Vad den här regeln innebär

WCAG framgångskriterium 3.2.3 — Konsekvent navigering (Nivå AA) anger att navigationskomponenter som upprepas på flera sidor på en webbplats måste förekomma i samma relativa ordning varje gång de påträffas, om inte användaren själv har utlöst en ändring i den ordningen. Kriteriet gäller för alla uppsättningar webbsidor som har ett gemensamt syfte eller ingår i samma webbplats eller applikation.

Formuleringen "samma relativa ordning" är viktig: WCAG kräver inte att navigeringen alltid innehåller samma antal objekt, och inte heller att inga andra element kan förekomma mellan navigationsobjekt. Det som krävs är att sekvensen av navigationslänkar, så som de upplevs av en användare som rör sig genom gränssnittet, förblir konsekvent från sida till sida. Om din primära navigering till exempel listar "Home", "Products", "About" och "Contact" i den ordningen på startsidan, måste samma objekt förekomma i samma sekvens på alla andra sidor där det navigationsblocket finns.

Kriteriet omfattar alla upprepade navigationsmekanismer: primära webbplatsmenyer, brödsmulor, länkgrupper i sidfoten, sidomenyer, hoppa-över-navigering-länkar, sökfält och alla andra interaktiva komponenter som hjälper en användare att förflytta sig på en webbplats. Det gäller oavsett om dessa komponenter implementeras som <nav>-landmärken, <ul>-listor med länkar, ARIA-förstärkta anpassade menyer eller något annat markupmönster.

Vad som räknas som godkänt: Navigationsblock förekommer i samma relativa ordning på varje sida där de upprepas. Objekt får läggas till, markeras eller markeras som aktiva (t.ex. att länken till den aktuella sidan särskiljs visuellt), så länge den övergripande sekvensen inte ändras. En användarinitierad omordning — till exempel en anpassningsbar instrumentpanel där användaren drar paneler till nya positioner — är också godkänd, eftersom ändringen har sitt ursprung hos användaren.

Vad som räknas som underkänt: En huvudnavigering som listar "Home → Products → Contact → About" på startsidan men listar "Home → About → Products → Contact" på en produktsida underkänner 3.2.3. På samma sätt skulle en webbplats som villkorligt infogar ytterligare länkar på godtyckliga positioner i navigeringen baserat på intern logik (utan användaråtgärd) underkännas.

Officiellt undantag: Specifikationen anger uttryckligen att kravet inte gäller när användaren har initierat ändringen i ordning. Detta är det enda normativa undantaget. Ändringar som drivs av systemet, serverlogik eller personaliseringsalgoritmer — som inte utlöses direkt av användaren — omfattas inte av detta undantag.

Varför det är viktigt

Konsekvent navigering är grundläggande för kognitiv tillgänglighet. Användare som förlitar sig på rumsligt minne och förutsägbara mönster för att orientera sig — inklusive personer med kognitiva funktionsnedsättningar, uppmärksamhetsstörningar, traumatiska hjärnskador eller åldersrelaterad kognitiv nedsättning — är starkt beroende av antagandet att en webbplats navigering kommer att finnas på samma plats och i samma ordning varje gång de möter den. När navigeringen skiftar oväntat måste dessa användare lära om layouten på varje sida, vilket dramatiskt ökar den kognitiva belastningen och risken för fel eller avhopp.

För blinda och synsvaga användare som navigerar med skärmläsare (NVDA, JAWS, VoiceOver) minskar konsekvent navigering tiden som läggs på att leta efter kända landmärken. En skärmläsaranvändare som har memorerat att länken "Contact" är det fjärde objektet i huvudnavigeringen kan trycka på Tab-tangenten fyra gånger på vilken sida som helst för att nå den — men bara om ordningen garanteras vara densamma. Okonsekvent ordning förstör denna effektivitet och tvingar användaren att lyssna igenom hela navigeringen vid varje sidladdning.

För motoriskt nedsatta användare som förlitar sig på enbart tangentbordsnavigering, switch-styrning eller ögonstyrning har varje extra tangenttryckning eller huvudrörelse en verklig kostnad. Förutsägbar navigering minskar antalet interaktioner som krävs för att nå ofta besökta destinationer. Enligt Världshälsoorganisationen lever över 1,3 miljarder människor världen över med någon form av funktionsnedsättning, varav många är beroende av hjälpmedel som drar direkt nytta av konsekventa, förutsägbara gränssnitt.

För användare med lässvårigheter såsom dyslexi är det redan ansträngande att skanna en navigationsrad. Konsekvent positionering och ordning innebär att de kan förlita sig på visuella ankare — position, form, färg — istället för att läsa om etiketter varje gång.

Ett konkret scenario från verkligheten: föreställ dig en patient som använder ett sjukhus webbplats för att boka återbesök. Navigeringen på startsidan listar "Services", "Appointments", "Doctors" och "Contact" i den ordningen. Patienten går till en läkarprofil och letar efter "Appointments" på andra positionen — men på den sidan har navigeringen organiserats om så att "Doctors" kommer först följt av "Appointments". Patienten, som redan är stressad, måste skanna igenom hela menyn igen. För en användare med kognitiv funktionsnedsättning eller begränsad läsförmåga kan denna friktion vara skillnaden mellan att slutföra uppgiften och att ge upp helt.

Utöver tillgänglighet har konsekvent navigering mätbara SEO- och användbarhetsfördelar. Sökmotorers crawlers följer navigationslänkar för att upptäcka och indexera innehåll; en stabil länkstruktur förbättrar crawl-effektivitet och intern länkkraft. Användbarhetstester visar konsekvent att förutsägbar navigering minskar tiden för att slutföra uppgifter och felprocenten för alla användare, inte bara för dem med funktionsnedsättningar.

Relaterade Axe-core-regler

WCAG 3.2.3 kräver manuell testning. Det finns ingen automatiserad axe-core-regel som kan flagga inkonsekvent navigationsordning, eftersom automatiserade verktyg saknar det tvärsidiga sammanhang som behövs för att jämföra navigationssekvenser. En automatiserad skanner utvärderar en enskild sida isolerat och kan inte observera om navigeringen på den sidan skiljer sig från navigeringen på tjugo andra sidor på samma webbplats.

• Manuell jämförelse mellan sidor (ingen axe-regel-ID): Testare måste besöka flera sidor inom samma webbplats och manuellt registrera ordningen på navigationsobjekten på varje sida, och sedan jämföra dessa anteckningar. Automatiserade verktyg kan inte utföra denna kontroll eftersom de skulle behöva tolka flera sidor samtidigt, upprätthålla tillstånd över sidladdningar och tillämpa semantiska bedömningar av vilka element som utgör samma navigationskomponent — allt sådant som kräver mänsklig kontextuell bedömning.
• Varför automatisering inte räcker: Även heuristiska verktyg som flaggar navigationsrelaterade problem kontrollerar vanligtvis förekomsten av navigationslandmärken (såsom axe-regeln landmark-one-main eller region), inte konsekvensen i ordning över sidor. Jämförelse av ordning kräver en metodik för granskning på webbplatsnivå, inte en skanning av en enskild sida. Det är därför 3.2.3 klassas som ett kriterium som kräver manuell granskning i alla större ramverk för tillgänglighetstestning, inklusive axe-core, Lighthouse och IBM Equal Access Checker.

Hur man testar

1. Kör en automatiserad skanning för grundläggande sammanhang: Använd axe DevTools, Lighthouse eller ett webbläsartillägg på representativa sidor för att bekräfta att navigationselement är korrekt markerade som <nav>-landmärken eller med role='navigation'. Även om dessa verktyg inte flaggar ordningsinkonsekvenser hjälper de dig att identifiera vad som behandlas som navigering över sidorna. Dokumentera eventuella problem med landmärkesstrukturen innan du går vidare till manuella kontroller.
2. Välj ett representativt urval av sidor: Välj minst fem till tio sidor från olika delar av webbplatsen — startsida, en kategorisida, en produkt- eller artikeldetaljsida, en formulärsida och kontaktsidan. Om webbplatsen har tusentals sidor, använd ett stratifierat urval som täcker alla större mallar. Registrera URL och sidtyp för varje.
3. Kartlägg navigationsordningen manuellt: Öppna på varje vald sida webbläsarens tillgänglighetsträd (Chrome DevTools → Accessibility-panelen, eller Firefox Accessibility Inspector) och lista varje länk i huvudnavigeringen i den ordning de förekommer i DOM:en. Notera också ordningen så som den visas visuellt. Om CSS ändrar ordningen visuellt (t.ex. med flex-direction: row-reverse eller order-egenskaper) kan den visuella ordningen skilja sig från DOM-ordningen — båda måste vara konsekventa.
4. Jämför mellan sidor: Placera dina listor över navigationsordning sida vid sida. Flagga alla sidor där sekvensen av gemensamma navigationsobjekt skiljer sig från den baslinje som etablerats på startsidan. Notera vilka objekt som flyttats och i vilken riktning.
5. Tangentbordsnavigeringstest (NVDA + Firefox): Öppna NVDA, starta Firefox och navigera till startsidan. Tryck på D för att hoppa till nästa landmärkesregion och hitta huvudnavigeringen. Använd Tab-tangenten för att gå igenom navigationslänkarna och säg högt eller notera ordningen. Navigera sedan till en andra sida (t.ex. en inre artikelsida) och upprepa. Lyssna efter eventuella förändringar i sekvensen av länkuppläsningar.
6. Skärmläsartest (VoiceOver + Safari på macOS): Aktivera VoiceOver (Command + F5), öppna Safari och använd Web Rotor (Control + Option + U) för att öppna menyn för länkar eller landmärken. Navigera till huvudnavigeringen och notera ordningen på objekten. Upprepa på minst tre olika sidtyper och jämför.
7. JAWS + Chrome-test: Öppna JAWS, starta Chrome och tryck på R för att cykla genom regioner tills du når huvudnavigeringen. Tabba genom länkarna och registrera ordningen. Upprepa över olika sidtyper.
8. Kontrollera användarinitierade undantag: Om webbplatsen erbjuder personaliserings- eller navigationsanpassningsfunktioner, verifiera att omordning endast sker efter en uttrycklig användaråtgärd (t.ex. att användaren klickar på "Customize Menu" och drar objekt). Bekräfta att det omordnade tillståndet sedan bevaras konsekvent — den nya ordningen ska i sig förbli konsekvent över alla sidor efter att användaren har ställt in den.

Hur man åtgärdar

Inkonsistent server-side rendering — Felaktigt

<!-- Homepage navigation -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<!-- Product detail page navigation — order changed by CMS template -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/products'>Products</a></li>
  </ul>
</nav>

Inkonsistent server-side rendering — Korrekt

<!-- Shared navigation partial (e.g., _nav.html or a component) used on every page -->
<!-- The active page is indicated with aria-current, not by reordering -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/' aria-current='page'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- On the Products page, only aria-current moves — the order stays identical -->

CSS-visuell omordning skapar inkonsekvens — Felaktigt

<!-- DOM order: Home, Products, About, Contact -->
<!-- CSS on interior pages uses flex order to visually move Contact first -->
<style>
  /* Applied only on interior page templates */
  nav ul li:last-child { order: -1; }
</style>
<nav aria-label='Main navigation'>
  <ul style='display:flex'>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Visual order becomes Contact, Home, Products, About — inconsistent with homepage -->

CSS-visuell omordning skapar inkonsekvens — Korrekt

<!-- Use consistent DOM order and consistent CSS across all templates -->
<!-- Do not use CSS 'order' property to rearrange navigation items differently per template -->
<nav aria-label='Main navigation'>
  <ul style='display:flex'>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Same DOM order and same CSS flex order on every page template -->

Dynamisk navigering omordnad av algoritm — Felaktigt

<!-- JavaScript reorders nav links based on most-visited analytics without user action -->
<script>
  // Anti-pattern: fetches user behaviour data and reorders nav items automatically
  fetch('/api/user-nav-preferences').then(r => r.json()).then(order => {
    const nav = document.querySelector('nav ul');
    order.forEach(id => nav.appendChild(document.getElementById(id)));
  });
</script>
<nav aria-label='Main navigation'>
  <ul>
    <li id='nav-home'><a href='/'>Home</a></li>
    <li id='nav-products'><a href='/products'>Products</a></li>
    <li id='nav-about'><a href='/about'>About</a></li>
    <li id='nav-contact'><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Dynamisk navigering omordnad av algoritm — Korrekt

<!-- If personalisation is desired, require an explicit user action and keep order stable otherwise -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Personalisation button lets user reorder — change only applies after they interact -->
<button type='button' aria-controls='main-nav-list' id='customize-nav'>Customize Navigation Order</button>
<!-- The user-chosen order is then persisted consistently across all pages -->

Vanliga misstag

• Att använda olika CMS-mallar som var och en definierar navigering oberoende, vilket gör att subtila skillnader i ordning smyger sig in över tid när mallar uppdateras separat istället för från en enda delad komponent eller partial.
• Att lyfta fram "utvalda" eller "säsongsbetonade" navigationsobjekt till olika positioner baserat på marknadsföringskampanjer utan att säkerställa att resten av navigationsordningen förblir oförändrad — till exempel att tillfälligt flytta "Sale" till position två på vissa sidor och position fem på andra.
• Att använda CSS order, flex-direction: row-reverse eller CSS Grid-placering för att visuellt ordna om navigationsobjekt på olika sätt i olika sidmallar, vilket skapar en mismatch mellan den visuella ordningen (som seende användare ser) och DOM-ordningen (som tangentbords- och skärmläsaranvändare följer).
• Att infoga kontextkänsliga navigationsobjekt på godtyckliga positioner — till exempel att lägga till en "Back to Category"-länk som det andra objektet på produktsidor men inte på andra sidor, vilket flyttar ned alla efterföljande objekt en position och bryter den förväntade sekvensen.
• Att låta A/B-testning eller analysplattformar ordna om navigationslänkar som en del av experimentvarianter, utan att beakta att omordningen tillämpas inkonsekvent över sidor och sessioner.
• Att behandla brödsmulor som undantagna från detta kriterium när de i själva verket är en upprepad navigationsmekanism — brödsmulor som förekommer på olika positioner i förhållande till andra sidelement i olika mallar bryter också mot 3.2.3.
• Att ordna om navigeringen i sidfoten på ett annat sätt än huvudnavigeringen när länkarna i sidfoten duplicerar huvudnavigeringen — om båda förekommer på varje sida måste båda upprätthålla konsekvent ordning oberoende och i relation till varandra.
• Att tillämpa JavaScript-drivna navigationsförbättringar som ordnar om objekt baserat på scrollposition, vyportsstorlek eller sessionsdata utan användarinitiering — till exempel en megameny som dynamiskt lyfter fram olika toppnivåkategorier beroende på vilken del av webbplatsen användaren befinner sig i.
• Att inte granska navigationskonsekvens efter en webbplatsomdesign eller CMS-migrering, i tron att utvecklare naturligt kommer att återskapa den ursprungliga ordningen när olika sidtyper i själva verket byggs om från grunden av olika teammedlemmar.
• Att blanda ihop "konsekvent navigering" med "samma navigering på varje sida" — team drar ibland felaktigt slutsatsen att tillägg eller borttagning av navigationsobjekt för vissa användarroller (t.ex. inloggad vs. gäst) bryter mot 3.2.3. Det gör det inte, så länge den relativa ordningen för gemensamma objekt förblir oförändrad.

Relation till Turkiets tillgänglighetsreglering

Turkiets Presidential Circular No. 2025/10, publicerad i den officiella tidningen (nr 32933) den 21 juni 2025, fastställer bindande tillgänglighetskrav för ett brett spektrum av offentliga och privata aktörer som driver digitala tjänster i Turkiet. Cirkuläret kräver överensstämmelse med internationellt erkända tillgänglighetsstandarder — där WCAG 2.2 Nivå AA fungerar som primär teknisk referens — och kopplar efterlevnad till Erişilebilirlik Logosu (Accessibility Logo), ett certifieringsmärke som utfärdas av Ministeriet för familje- och socialtjänster till aktörer som uppnår den nödvändiga tillgänglighetsnivån.

WCAG 3.2.3 Konsekvent navigering är ett kriterium på nivå AA, vilket innebär att det är ett obligatoriskt krav för aktörer som vill erhålla Erişilebilirlik Logosu. Organisationer som inte tillhandahåller konsekvent navigering i sina digitala tjänster kommer inte att uppfylla den fullständiga AA-överensstämmelseprofil som krävs för certifiering, oavsett deras resultat på andra kriterier.

Följande typer av aktörer omfattas av Presidential Circular 2025/10 och måste därför behandla efterlevnad av 3.2.3 som en rättslig skyldighet snarare än en rekommendation om bästa praxis:

• Offentliga institutioner och myndigheter på alla nivåer, inklusive ministerier, kommuner och statligt anslutna organ, vars webbplatser och digitala portaler måste vara konsekvent navigerbara i alla avsnitt.
• E-handelsplattformar som är verksamma i Turkiet, där navigationskonsekvens är särskilt kritisk eftersom användare rör sig mellan startsida, kategori-, produkt-, kundvagns- och kassasidor — vilka vanligtvis alla delar samma navigationsrad.
• Banker och finansiella institutioner som regleras enligt turkisk banklagstiftning, vars internetbanker och informationswebbplatser måste tillhandahålla förutsägbar navigering för alla kunder, inklusive dem med kognitiva eller motoriska funktionsnedsättningar.
• Sjukhus och vårdgivare, där patienter — ofta i stressade situationer — förlitar sig på konsekvent navigering för att hitta tidsbokning, provsvar och kontaktuppgifter för akuta ärenden utan kognitiv friktion.
• Telekomföretag med 200 000 eller fler abonnenter, vars kundportaler, supportsajter och gränssnitt för kontohantering måste upprätthålla navigationskonsekvens över potentiellt tusentals sidor och användarvända mallar.
• Resebyråer och privata transportföretag, där bokningsflöden i flera steg som omfattar sökning, val, passageraruppgifter och betalningssidor måste presentera navigering i en konsekvent ordning genom hela resan.
• Privatskolor auktoriserade av Ministry of National Education (MoNE), vars webbplatser betjänar elever, föräldrar och personal — inklusive personer med inlärningssvårigheter som är starkt beroende av förutsägbar navigering för att få tillgång till utbildningsresurser.

För organisationer i Turkiet som bygger eller granskar digitala tjänster bör 3.2.3 integreras i kvalitetsäkringsprocessen på mall- och komponentdesignnivå. Att använda en delad navigationskomponent som renderas från en enda sanningskälla — oavsett om det är ett server-side-include, en komponent i ett frontendramverk eller ett globalt element i ett headless CMS — är både den mest tillförlitliga tekniska lösningen och den mest försvarbara efterlevnadshållningen enligt cirkulärets krav. Tillgänglighetsgranskningar som lämnas in som en del av ansökningsprocessen för Erişilebilirlik Logosu bör inkludera verifiering av navigationsordning över sidor som ett dokumenterat teststeg.