Rules Hub
Coding Rules Library
Prefer concise alt text without redundancy
Ensure alt text accurately mirrors the image content or function without adding redundant context or filler words.
Bad example
| 1 | // Bad: Adds redundant context ("Official list of...") that is not in the image |
| 2 | <img |
| 3 | src="/logos/top-100-players.svg" |
| 4 | alt="Official list of Top 100 Players" |
| 5 | /> |
Explanation (EN)
The alt text includes filler words ("Official list of") that likely aren't part of the image's visual text. This adds noise for screen reader users who already know the site context.
Objašnjenje (HR)
Alt tekst uključuje suvišne riječi ("Official list of") koje vjerojatno nisu dio vizualnog teksta slike. To stvara buku korisnicima čitača zaslona koji već znaju kontekst stranice.
Good example
| 1 | // Good: Matches the visible text "Top 100 Players" exactly |
| 2 | <img |
| 3 | src="/logos/top-100-players.svg" |
| 4 | alt="Top 100 Players" |
| 5 | /> |
Explanation (EN)
The alt text provides exactly what the image conveys—nothing more, nothing less. If the logo says "Top 100 Players", the alt text should simply match it.
Objašnjenje (HR)
Alt tekst pruža točno ono što slika prenosi—ništa više, ništa manje. Ako logo kaže "Top 100 Players", alt tekst bi trebao to jednostavno preslikati.