HTML & CSS Interview Question #133

How do you visually hide text while keeping it available to screen readers?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Sometimes visible text must be replaced by a visual treatment while an accessible text label remains available. A visually-hidden utility can position a small element outside normal visual presentation without using display: none or visibility: hidden.

Detailed Explanation

Sometimes visible text must be replaced by a visual treatment while an accessible text label remains available. A visually-hidden utility can position a small element outside normal visual presentation without using display: none or visibility: hidden.

Use this pattern only when hidden text genuinely improves the accessible name or context. Native visible labels are preferable when they fit the design, and the exact utility should be tested with current browsers and assistive technologies.

Code Example

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

<button>
    <span class="visually-hidden">Close dialog</span>
    ×
</button>