Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
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="").