Visibility Helpers

Visibility Helpers

Visibility helpers distinguish between visually hiding an element and removing it from layout, with special utilities for screen-reader-only content.

Core concept

Explain invisible versus display-none and the purpose of visually-hidden content for labels or instructions that should remain available to assistive technologies.

Using it in a real interface

Use visually-hidden text to give an icon-only button a meaningful accessible name. Explain why hiding the text with display:none would not provide the same result.

Implementation notes

Do not hide content simply because it is inconvenient on one screen size. If content is essential, redesign the layout so it remains available rather than removing it.