Gå til indhold
SilktideHjælp

Skærmlæserlinks

Silktide finder linkelementer, der er forkert udformet på måder, som gør, at de ikke fungerer med – links uden læsbar tekst, links uden destination og løse tomme linktags, der er efterladt på siden.

For at et link kan fungere med hjælpeteknologi, skal det både have en destination (en href-attribut) og noget læsbart i sig:

<!-- Fungerer: destination og læsbar tekst -->
<a href="/about">Om os</a>

<!-- Fungerer: et billedlink med alternativ tekst -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>

Hvorfor det er vigtigt

En annoncerer hvert link ud fra dets tekst. Et link med en destination, men uden tekst, annonceres blot som "link" – brugeren kan aktivere det, men har ingen idé om, hvor det fører hen. Et link med tekst, men uden destination, ser klikbart ud, men fører ingen steder hen. Begge mønstre bryder den grundlæggende aftale, der gør det muligt for personer, som bruger hjælpeteknologi, at navigere på en side via dens links.

Sådan retter du det

  1. For et link med en destination, men uden læsbar tekst: Tilføj tekst i linket eller , hvis det kun indeholder et billede.
  2. For et link med tekst, men uden destination: Tilføj den manglende href, eller hvis elementet reelt er et mål, som andre links skal springe til, skal du i stedet flytte dets id til et element, der ikke er et link:
<!-- Forældet målanfører, frarådes i HTML5 -->
<a name="example"></a>

<!-- Foretrækkes: et id på et normalt element -->
<div id="example">...</div>
  1. For tomme <a></a>-tags uden nogen attributter overhovedet: Fjern dem, da de ikke tjener noget formål. De efterlades ofte af redigeringsprogrammer eller scripts.
  2. Hvis elementet reelt er en knap – det udløser en handling i stedet for at navigere – skal du bruge et <button>-element eller tilføje role="button" til det eksisterende tag.

Sådan tester Silktide dette

  1. Find hvert <a>-element på siden, og læs dets tekst (herunder billeders alt- tekst og tekst tilføjet af CSS), dets href og eventuelle id- eller name-attributter.
  2. Markér tre problemmønstre:
    • Et link med en href, men uden læsbar tekst.
    • Et element med tekst og et id eller name, men uden href – et mål, der udgiver sig for at være et link, eller et link, der mangler sin destination.
    • Et helt tomt anker uden tekst, href, id eller name.
  3. To mønstre markeres bevidst ikke:
    • <a> med tekst, men uden href, id eller name – HTML5 tillader dette som et "pladsholderlink", der ofte udfyldes senere af .
    • Tomme ankre med et id eller name, men uden href – disse er forældede springmål, ikke links.

Få mere at vide

Sidst opdateret

Var denne side nyttig?