hidden vs invisible vs sr-only is one of the most common decision points we see. Here is the honest breakdown.
The short version#
Three ways to hide with different layout and a11y semantics.
Point by point#
| Aspect | Analysis |
|---|---|
| Layout | hidden removes the box; invisible keeps it; sr-only keeps it 1px-clipped |
| Screen readers | hidden & invisible hide from AT; sr-only is FOR AT |
| Animation | invisible/sr-only can transition; hidden cannot |
| Recipes | Toggles: hidden; alignment ghosts: invisible; a11y labels: sr-only |
Bottom line#
Pick based on your constraint, not ideology — and remember the comparison pages link to hands-on recipes so you can verify the claim in your own project within minutes.
Related comparisons#
comparisons/index|All comparisons