Titel på tom alt-tekst

Silktide finder billeder, der er markeret som dekorative med tom alternativ tekst, men som også har en titel. De to attributter modsiger hinanden, og hjælpemiddelteknologi håndterer konflikten uforudsigeligt.

<!-- Problem: alt siger "spring mig over", title siger "læs mig" -->
<img src="logo.png" alt="" title="Virksomhedslogo">

<!-- Rettet: reelt dekorativt -->
<img src="logo.png" alt="">

<!-- Rettet: reelt meningsfuldt -->
<img src="logo.png" alt="Virksomhedslogo">

Hvorfor det er vigtigt

En tom alt="" angiver, at et billede er dekorativt, og fortæller en skærmlæser, at det skal springes over. En title-attribut annonceres dog stadig af nogle skærmlæsere – så det samme billede er tavst for nogle brugere og taler for andre. Uanset hvad forfatteren havde til hensigt, er resultatet forkert for nogen.

title-attributten er generelt upålidelig: Den vises som regel kun som et værktøjstip, når musen holdes over den, så brugere af tastatur og berøringsskærm heller aldrig ser den.

Sådan retter du det

1. Hvis billedet er dekorativt, skal du fjerne title-attributten og beholde den tomme alt="".
2. Hvis billedet er meningsfuldt, skal du flytte beskrivelsen til alt-teksten og fjerne title.
3. Brug aldrig title som erstatning for alt-tekst – den er ikke pålideligt tilgængelig for nogen.

Sådan tester Silktide dette

1. Find hvert billede på hver side.
2. Vælg billeder, hvor alt-attributten er til stede, men tom.
3. Rapportér hvert af disse billeder, som også har en ikke-tom title-attribut.

Få mere at vide

• Understanding Success Criterion 1.1.1: Non-text Content (WCAG 2.2)
• Technique H67: Using null alt text and no title attribute on img elements
• Dekorative billeder
• Manglende alt-tekst