Förklara att nya flikar öppnas

Silktide hittar länkar som öppnas i en ny flik eller ett nytt fönster och rapporterar de länkar som inte anger detta. Besökare bör varnas innan en länk tar dem bort från sidan de befinner sig på.

Varför detta är viktigt

Att öppna en ny flik utan förvarning bryter mot besökarens förväntningar: bakåtknappen slutar fungera, och besökaren kanske inte alls förstår att en ny flik har öppnats. Användare av kanske inte hör någon ledtråd om att sammanhanget har ändrats, och personer med kognitiva svårigheter eller begränsad webberfarenhet kan bli strandsatta och osäkra på hur de ska återvända. Några varningens ord i länktexten förhindrar allt detta.

Den bästa lösningen är ofta att inte öppna nya flikar alls – låt besökarna välja. När du måste göra det kontrollerar den här kontrollen att länken anger det, vilket stöder framgångskriterium 3.2.5 (Ändring på begäran), ett krav på .

Så åtgärdar du problemet

Ta helst bort target="_blank" så att länken öppnas normalt.
När en ny flik är motiverad lägger du till en förklaring i länktexten:

<a href="products.html" target="_blank">
  Products (opens in new tab)
</a>

För en bildlänk lägger du till förklaringen i :

<a href="products.html" target="_blank">
  <img src="products.jpg" alt="Products (opens in new tab)">
</a>

Om du vill täcka många länkar samtidigt kan lägga till texten automatiskt:

/* Adds the warning to every new-tab link */
a[target="_blank"]::after {
  content: " (opens in new tab)";
}

Alternativt kan du använda en -etikett, som ändrar det som läses upp utan att ändra länkens utseende. Observera att aria-label ersätter länkens text helt, så etiketten måste upprepa den:

<a href="products.html" target="_blank" aria-label="Products (opens in new tab)">
  Products
</a>

En ikon räcker inte – varningen måste finnas som text som en skärmläsare kan läsa upp (en ikons alt-text räknas).

Så testar Silktide detta

Hitta alla länkar på sidan med target="_blank", attributet som öppnar en ny flik eller ett nytt fönster, och hoppa över element som du har undantagit från kontroller.
Samla in varje länks läsbara text: dess textinnehåll, alternativtext och elementens titeltext inuti länken, eventuell ARIA-etikett samt text som lagts till med CSS ::before och ::after.
Godkänn länken om texten innehåller en igenkänd förklaring: ”new tab”, ”new window”, ”new browser tab”, ”new browser window” eller ”external link” (motsvarande walesiska uttryck känns också igen).
Rapportera alla andra länkar som öppnar nya flikar.

Felsökning

Min länk förklarar detta med andra ord

Endast fraserna ovan känns igen. Om din formulering är en verklig motsvarighet, till exempel ”opens in a popup”, kan du antingen standardisera till en igenkänd fras eller resultatet.

”Fönster” eller ”flik”?

Nästan alla moderna webbläsare öppnar länkar med target="_blank" i en flik, så ”opens in new tab” är vanligtvis tydligare, även om båda godkänns.