Rules Hub
Coding Rules Library
Match alt text literally to text within the image
For images containing text, the alt attribute must mirror that text exactly to ensure equivalent access for screen readers.
Bad example
| 1 | // The image file visually displays the text: "Norges rikeste arvinger" |
| 2 | export const Logo = () => ( |
| 3 | <img |
| 4 | src="/logo/heirs.svg" |
| 5 | alt="Kapitals liste over Heirs" // ❌ Describes the concept, not the literal text |
| 6 | /> |
| 7 | ); |
Explanation (EN)
The `alt` text describes the resource conceptually or uses a translation that doesn't match the visual text. Screen reader users will hear something different from what is displayed.
Objašnjenje (HR)
`alt` tekst opisuje resurs konceptualno ili koristi prijevod koji ne odgovara vizualnom tekstu. Korisnici čitača ekrana čut će nešto drugačije od onoga što je prikazano.
Good example
| 1 | // The image file visually displays the text: "Norges rikeste arvinger" |
| 2 | export const Logo = () => ( |
| 3 | <img |
| 4 | src="/logo/heirs.svg" |
| 5 | alt="Norges rikeste arvinger" // ✅ Matches the visual text exactly |
| 6 | /> |
| 7 | ); |
Explanation (EN)
The `alt` text mirrors the text inside the image exactly. This ensures that users relying on assistive technology receive the exact same information as sighted users.
Objašnjenje (HR)
`alt` tekst točno odražava tekst unutar slike. To osigurava da korisnici koji se oslanjaju na pomoćne tehnologije dobiju istu informaciju kao i korisnici koji vide sliku.
Notes (EN)
If the image is purely decorative and contains no meaningful text, use an empty alt attribute (alt="").
Bilješke (HR)
Ako je slika isključivo dekorativna i ne sadrži značajan tekst, koristite prazan alt atribut (alt="").