...
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.