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).
Remove visually-hidden interactive content from the accessibility tree
When hiding collapsible/interactive UI, set aria-hidden (alongside inert) so assistive tech doesn't expose it.
Bad example
| 1 | <div |
| 2 | inert={collapsed || undefined} |
| 3 | className={clsx('transition', collapsed && 'invisible')} |
| 4 | > |
| 5 | <a href="/latest">Latest</a> |
| 6 | </div> |
Explanation (EN)
`inert` blocks interaction and the element may look hidden, but the links remain in the accessibility tree, so screen reader users still encounter them. The visual and accessible states are out of sync.
Objašnjenje (HR)
`inert` blokira interakciju i element izgleda skriveno, ali linkovi ostaju u accessibility stablu, pa ih korisnici citaca ekrana i dalje nailaze. Vizualno i pristupacno stanje nisu uskladjeni.
Good example
| 1 | <div |
| 2 | aria-hidden={collapsed || undefined} |
| 3 | inert={collapsed || undefined} |
| 4 | className={clsx('transition', collapsed && 'invisible')} |
| 5 | > |
| 6 | <a href="/latest">Latest</a> |
| 7 | </div> |
Explanation (EN)
Adding `aria-hidden` together with `inert` removes the collapsed content from the accessibility tree, keeping the accessible state consistent with what sighted users see.
Objašnjenje (HR)
Dodavanje `aria-hidden` zajedno s `inert` uklanja sklopljeni sadrzaj iz accessibility stabla, cime pristupacno stanje ostaje uskladjeno s onim sto videci korisnici vide.
Notes (EN)
Using `|| undefined` keeps the attribute off the DOM entirely when false, rather than rendering aria-hidden="false".
Bilješke (HR)
Koristenje `|| undefined` u potpunosti uklanja atribut iz DOM-a kad je false, umjesto da renderira aria-hidden="false".