Webtilgængelighed: Sådan gør du det synligt, at dine links ikke er letlæselige for besøgende

Shame on me - the caption has not been written

Har du overvejet, hvordan at f.eks. svagtseende eller blinde navigere rundt på en hjemmeside?

De værktøjer de bruger til at navigere med, er dybt afhængige af en række HTML-attributter – lad mig vise dig, hvordan at du kan gøre det synligt for dig selv. Og så kan du gøre dit indhold det bedre 🙂

Links i HTML har en “title”-attribut. Den bruges til at lave en læsevenlig beskrivelse af det som linket fører. Det er ikke altid at den tekst som du klikker på, fortæller hvad linket reelt set fører dig hen til.

Du kan løse det hele med CSS

Med den her stump CSS

 

a:not([title]), a[title=""] {
  color: white;
  background: red;
  border: 2px solid yellow;
}

 

får du markeret links uden title-attribute med en tydelig ketchup/sennep visning 🙂