För att beskriva externa länkar och länkar som öppnas i ny flik för skärmläsare är en väg att gå något i stil med den här lösningen:
Först, börja med att lägga in en gömd div med beskrivningar:
<div hidden>
<span id="new-window-0">Opens in a new window</span>
<span id="new-window-1">Opens an external site</span>
<span id="new-window-2">Opens an external site in a new window</span>
</div>
Sen kopplar du en av dessa beskrivningar in i vår länk:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0">
My site
</a>
Resultatet blir då i skärmläsare att följande läses upp (eftersomaria-describedby="new-window-0”i exemplet pekar på texten i vår gömda div:
“My site, Länk - Opens in a new window”
För att länka till ex. facebook som i vårt fall är en extern länk i en ny flik gör vi så här och kopplar istället så här:
<a href="https://facebook.com" target="_blank" rel="noopener" aria-describedby="new-window-2">
Facebook
</a>
Resultatet blir då i skärmläsare:
“Facebook, Länk - Opens an external site in a new window”
Så vi kan alltså använda oss av de olika id:n som ligger i vår gömda div för att beskriva i kod vilken typ av länk det handlar om.
För att det sedan visuellt ska synas för användare att det rör sig om en extern länk eller en länk som öppnas i ny flik så gör vi så här:
<a href="https://facebook.com" target="_blank" rel="noopener" ="new-window-2">
Facebook
<img src="new-window.svg" alt="">
</a>
Vi använder fortfarandearia-describedby som i exemplet för skärmläsare. Vi ser genom att ha med ett tomt alt-attribut till att bilden räknas som dekorativ för skärmläsare. Så glöm inte bort att ha med alt-attributet på den ikon som visuellt ska visa användare att det rör sig om en extern länk eller en länkar som öppnas i ny flik,
Använder du <svg> för ikonen så se till att använda dig av focusable="false" och aria-hidden="true" för att se till att användare inte tabbar till ikonen eller att en skärmläsare börjar läsa upp något som inte ger användaren någon nyttig information.