WCAG 3.2.4 Konsekvent identifiering

Delar som gör samma sak på flera sidor ska heta och se ut på samma sätt. Det gäller knappar, ikoner, länkar och deras alternativtexter. Den som använder skärmläsare känner igen en funktion på namnet, och den som har svårt att läsa känner igen den på ikonen. I en webbutik gäller det framför allt köpknappen, varukorgen, sökningen och favoriterna.

• Köpknappen heter ”Köp” i produktlistan, ”Lägg i varukorgen” på produktsidan och ”Add to cart” i snabbköpsfönstret.
• Varukorgen har ikonen av en kasse på vissa sidor och en vagn på andra.
• Ikonen för favoriter heter ”Spara” på en sida och ”Önskelista” på en annan i skärmläsaren.
• Sökknappen har namnet ”Sök” i sidhuvudet men ”Skicka” på söksidan.
• Länken till kundtjänst heter ”Hjälp”, ”Kontakt” och ”Kundservice” på olika ställen.

Bestäm ett namn och en ikon för varje återkommande funktion och använd samma komponent överallt. Namnet får säga mer när det behövs, men ska börja likadant.

<!-- I produktlistan -->
<button>Lägg i varukorgen <span class="dold">Ullkofta grå</span></button>

<!-- På produktsidan -->
<button>Lägg i varukorgen</button>

<!-- Samma ikon och namn i sidhuvudet på alla sidor -->
<a href="/varukorg"><svg aria-hidden="true">...</svg> Varukorg</a>

Kontrollera själv

Gratistestet larmar när en knapp eller länk saknar namn, men inte när samma funktion har olika namn på olika sidor. Jämför köpknappen, varukorgen och sökningen på startsidan, i en kategori och på en produktsida, både texten som syns och namnet som skärmläsaren läser upp.

• Understanding 3.2.4 Consistent Identification hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 3.2.4 har samma lydelse i WCAG 2.1.