Konsekvent navigering och identifiering i webbutiken

1 november 2026

Meny, sök, varukorg och ikoner ska ligga och heta likadant på varje sida. Så tolkar du WCAG 3.2.3 och 3.2.4, vad som går fel i butiker och hur du testar.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, vänd dig till Post- och telestyrelsen (PTS).

Kunden har hittat menyn på startsidan och lärt sig att Dam kommer först, sedan Herr och Barn, och att sökfältet ligger till höger om loggan. På kategorisidan ligger sökfältet plötsligt under menyn, och knappen som lade en tröja i varukorgen heter nu Köp. Det går att använda, men kunden måste börja om med att leta. Två kriterier på nivå AA handlar om just det: Konsekvent navigering (3.2.3) och Konsekvent identifiering (3.2.4). Guiden går igenom vad de kräver, var det går fel i en butik och hur du kontrollerar det. Punkten finns i checklistans grupp Hela butiken.

Vad kriterierna kräver

I W3C:s svenska översättning av WCAG 2.0 lyder 3.2.3 så här i sammandrag: navigeringsmetoder som upprepas på flera webbsidor inom en uppsättning av webbsidor ska presenteras i samma inbördes ordning varje gång, om inte användaren själv initierar en ändring. Kriteriet 3.2.4 säger att komponenter som har samma funktionalitet inom en uppsättning av webbsidor ska identifieras konsekvent.

Två saker i W3C:s förklaring är lätta att missa.

Det är ordningen som räknas, inte att allt finns överallt. W3C definierar samma inbördes ordning som samma position i förhållande till andra objekt, och skriver att objekt räknas som i samma ordning även om andra objekt har lagts till eller tagits bort. Teknik G61 ger ett exempel där sökformuläret saknas på en sida men resten av sidhuvudet ligger kvar i samma ordning. En undermeny som fälls ut eller en extra länk på en kategorisida bryter alltså inte mot kriteriet. Två länkar som byter plats med varandra gör det, och det är fel F66 i W3C:s lista.

Konsekvent betyder inte alltid identiskt. W3C skriver uttryckligen att identifieringen inte behöver vara likadan ord för ord. Pilen som länkar till nästa sida kan heta Gå till sida 4 på en sida och Gå till sida 5 på nästa, och det är fortfarande konsekvent. En användare ska kunna känna igen att det är samma funktion. Däremot räknas Sök på en sida och Hitta på en annan, för samma knapp, som fel (F31).

Begreppet uppsättning av webbsidor är viktigt för en butik. W3C definierar det som sidor med ett gemensamt syfte, skapade av samma upphovsman. I förklaringen av begreppet ges ett exempel som ligger nära vår vardag: i en webbutik delar produktsidorna samma navigering och identifiering, men när kunden går vidare till kassan byter mallen utseende och navigeringen tas bort. W3C konstaterar att kassasidorna då inte är en del av uppsättningen med produktsidor. En förenklad kassa utan fullständig meny bryter alltså inte i sig mot 3.2.3. Enligt vår läsning av definitionen bildar kassans sidor en egen uppsättning, så de bör vara konsekventa sinsemellan. Det är vår tolkning, inte W3C:s ord. Om du är osäker på just din butik, läs W3C:s definition och fråga PTS.

Var det händer i en butik

Sidhuvudet. Menyn, sökfältet, kontot och varukorgen ska ligga i samma relativa ordning på startsidan, kategorisidor, produktsidor och innehållssidor. En vanlig orsak till avvikelser är att olika mallar har byggts var för sig, till exempel en kampanjmall med eget sidhuvud. Det är vår bedömning, inte något W3C säger.

Menyn. Länkarna i huvudmenyn ska komma i samma ordning varje gång. Markera aktuell kategori i stället för att flytta den först. Undermenyer och extra länkar får tillkomma.

Sidfoten. Länkarna till frakt, retur, villkor och kontakt ska stå i samma inbördes ordning på alla sidor i butiken.

Varukorgen. Ikonen och namnet ska vara desamma överallt. Heter den Varukorg i sidhuvudet och Kassa i en ruta på produktsidan, och båda går till samma plats, är identifieringen inte konsekvent.

Knappar som gör samma sak. Lägg i varukorgen på produktsidan, i snabbvyn och på listningen är samma funktion. Teknik G197 lägger fast principen: samma text eller samma textalternativ för samma funktion. Behöver listningen särskilja produkterna kan namnet få ett tillägg, men det ska börja likadant. Det är vår rekommendation, W3C anger inte detta för knappar i listor.

Ikoner. W3C:s förklaring beskriver ett fel där två spara-knappar har olika ikoner, en diskett på en sida och en bockmarkering på en annan, trots att båda har namnet Spara. Namnet är samma men den som känner igen funktionen på bilden gör det inte. Samma funktion ska alltså ha samma ikon och samma namn. Tvärtom gäller att en ikon som används för olika saker, som en bockmarkering som ibland betyder godkänd och ibland inkluderad, ska ha olika textalternativ.

Hjälp och kontakt. G197 har ett exempel där två länkar till sidan Kontakta oss har samma länktext, Kontakt, både högst upp och längst ned. Samma regel rekommenderar vi mellan meny och sidfot: ett namn per destination. W3C skriver samtidigt att en länk i sidfoten och en annan länk inne i en policytext, som leder till kontakt men är olika formulerade, inte nödvändigtvis är upprepade instanser av samma komponent.

Responsivt. Enligt W3C kan en sökknapp ha den synliga texten Sök på dator och bara ett förstoringsglas i mobilen, så länge båda har det tillgängliga namnet Sök. Det är alltså tillåtet att visa det olika, men namnet som läses upp ska vara detsamma.

Så gör du

Bygg sidhuvud, meny och sidfot en gång och låt alla sidmallar använda samma komponent. Då blir ordningen densamma av sig själv. Bestäm sedan ett namn och en ikon för varje återkommande funktion och skriv ned dem i en kort lista som alla som arbetar med butiken kan läsa. Det är vår rekommendation och inget W3C-krav, men det är den enklaste vägen till att slippa glidning över tid.

Så här kan en delad sidhuvudskomponent se ut:

<header>
  <a href="/" aria-label="Butiknamn, startsidan">Butiknamn</a>
  <nav aria-label="Huvudmeny">
    <ul>
      <li><a href="/dam">Dam</a></li>
      <li><a href="/herr" aria-current="page">Herr</a></li>
      <li><a href="/barn">Barn</a></li>
      <li><a href="/rea">Rea</a></li>
    </ul>
  </nav>
  <form role="search" action="/sok">
    <label for="sokfalt">Sök</label>
    <input id="sokfalt" type="search" name="q">
    <button type="submit">Sök</button>
  </form>
  <a href="/varukorg">Varukorg</a>
</header>

Ordningen är logga, meny, sök, varukorg på varje sida. På Herr-sidan är det bara aria-current som ändras, inte positionen.

Och så här kan en ikonknapp se ut när samma ikon och samma namn används på alla sidor:

<a href="/varukorg">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
    <path d="M3 4h2l2 11h11l2-8H6"
          fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  <span>Varukorg</span>
</a>

Texten Varukorg ligger i span och ger länken sitt namn. Ikonen är dold för skärmläsare så att namnet inte läses två gånger. Om du döljer texten visuellt i mobilen, behåll den för skärmläsare och använd samma ord som på datorn.

Så testar du

Välj fem sidtyper: startsida, kategori, produkt, innehållssida som Frakt och retur, och varukorgen.
Tabba genom sidhuvudet på varje sida och skriv ned ordningen: meny, sök, konto, varukorg. Jämför listorna. Det är i praktiken testproceduren i G61, som ber dig lista återkommande komponenter och kontrollera att de ligger i samma relativa ordning.
Öppna menyn på varje sida och jämför länkarnas ordning, som i F66.
Hitta funktioner som återkommer: sök, varukorg, konto, favoriter, lägg i varukorgen, kontakt. Jämför synlig text och tillgängligt namn. Högerklicka, välj Inspektera, och läs aria-label eller länktexten. F31 testar just att namnen är desamma.
Jämför ikonerna. Är det samma bild överallt för samma funktion?
Titta på mobilen också. Ändras ordningen i den layouten?

Gör om testet varje gång en mall ändras.

Vad AccessAudit kontrollerar

Det gratis testet på butik.nightwave.se/tillganglighet läser källkoden på upp till fem sidor men bedömer varje sida för sig, så det jämför inte ordning eller namn mellan sidorna. Månadsgranskningen kör axe-core i en riktig webbläsare, och axe-core 4.11 har ingen regel för 3.2.3 eller 3.2.4. Granskningens egna kontroller jämför inte heller sidor med varandra. Du behöver därför göra testet ovan själv. Rapporterna pekar däremot ut saknade namn på knappar och länkar: gratistestet med kontrollerna för knappar och länkar utan namn, månadsgranskningen med axe-core-reglerna button-name och link-name. Ett namn som saknas kan inte vara konsekvent, så rätta de fynden först. Det är en teknisk granskning mot WCAG och inte juridisk rådgivning.

Börja här

Kontrollera att alla sidmallar använder samma sidhuvud, meny och sidfot.
Skriv ned namnet och ikonen för sök, varukorg, konto och köpknapp.
Gå igenom fem sidtyper med Tab och jämför ordningen.
Kontrollera kampanjsidor och landningssidor, eftersom de ofta har egna mallar.

Källor

Alla källor lästa 2026-10-31.