Teknisk lösning på hur vi kan skriva länkar i kod
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">Öppnas i en ny flik</span>
<span id="new-window-1">Öppnar en extern webbsida</span>
<span id="new-window-2">Öppnar en extern webbsida i en ny flik</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 - Öppnas i en ny flik”
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 - Öppnar en extern webbsida i en ny flik”
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.
Vanliga problem med länkar i aria-describedby och hur man kan undvika dem:
Aria-describedby används när man vill ge extra information till en länk som öppnas. Det behövs inte alltid förklaring genom "describedby" för att en skärmläsare ska förstå att en ny flik har öppnats när en länk klickas på.
I första kodexemplet kan det vara förvirrande för skärmläsare eftersom "div"-elementet är dolt (hidden), vilket får skärmläsaren att hoppa över innehållet. Detta påverkar "aria-describedby" som refererar till detta dolda innehåll.
<div hidden>
<span id="new-window-0">Öppnas i en ny flik</span>
</div>
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0">
My site
</a>
Om man vill försäkra sig om att länkar läses upp korrekt med "aria-describedby" och hänvisning till en specifik "div", kan man ta bort "hidden"-attributet från HTML-strukturen och istället ändra stilen på "div" så att det inte syns på sidan. I exemplet nedan ändrar man klassen "new-window-0" och tillämpar stilregler för att göra det osynligt:
<div class="new-window-0">
<span id="new-window-0">Öppnas i en ny flik</span>
</div>
<style>
.new-window-0 {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
</style>
Sedan kan detta användas enligt första kodexemplet:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0"> My site </a>
Detta tillvägagångssätt hjälper till att undvika eventuella problem med att skärmläsare inte läser upp länkar. Det bör noteras att olika skärmläsare kan hantera "aria" -taggar på olika sätt. Det som fungerar bra för till exempel NVDA kanske inte fungerar på samma sätt för exempelvis JAWS eller VoiceOver.