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).
Put ARIA/presentation role on the SVG root, not on inner elements
Apply role="presentation"/aria attributes to the <svg> element itself, not to implementation-detail children like <use>, so screen readers treat the whole graphic consistently.
Bad example
| 1 | <svg className="h-5 w-5"> |
| 2 | <use href={`${sprite}#arrow-left`} role="presentation" /> |
| 3 | </svg> |
Explanation (EN)
The role is placed on <use>, which is just an implementation detail of how the icon is referenced. The <svg> itself still exposes a generic graphics role to assistive technology, so the presentation hint does not apply to the element the user's tooling actually sees.
Objašnjenje (HR)
Atribut role je stavljen na <use>, koji je samo implementacijski detalj načina na koji se ikona referencira. Sam <svg> i dalje pristupačnim tehnologijama izlaže generičku grafičku ulogu, pa se naznaka da je riječ o dekoraciji ne primjenjuje na element koji čitač ekrana zapravo vidi.
Good example
| 1 | <svg className="h-5 w-5" role="presentation"> |
| 2 | <use href={`${sprite}#arrow-left`} /> |
| 3 | </svg> |
Explanation (EN)
The presentation role sits on the <svg> root, so screen readers treat the entire graphic as decorative. The inner <use> stays a pure implementation detail and needs no ARIA attributes.
Objašnjenje (HR)
Uloga presentation je na korijenskom <svg> elementu, pa čitači ekrana cijelu grafiku tretiraju kao dekorativnu. Unutarnji <use> ostaje čisti implementacijski detalj i ne treba mu nijedan ARIA atribut.
Notes (EN)
When an icon is meaningful, instead give the <svg> a role="img" and an accessible name (aria-label or <title>) on the root, again not on inner nodes.
Bilješke (HR)
Kad ikona nosi značenje, korijenskom <svg> umjesto toga dodaj role="img" i pristupačno ime (aria-label ili <title>), opet na korijenu, a ne na unutarnjim čvorovima.