To hide content while keeping it accessible, use CSS techniques like the visually-hidden class with clip and position properties. 1. Apply position: absolute and clip to move content off-screen while keeping it available to screen readers. 2. Use a modern approach with clip-path and white-space: nowrap for better compatibility. 3. Avoid display: none or visibility: hidden as they remove content from accessibility. 4. Consider ARIA attributes like aria-label to provide context without visible text. 5. Always test with screen readers and avoid overusing hidden labels where visible ones are beneficial.

When you want to hide content but still keep it accessible—like for screen readers or other assistive tools—you need to strike a balance between visual hiding and accessibility. The goal is to make sure the content isn’t visible on screen but remains available to technologies that users rely on for navigation and comprehension.

Here’s how to do it right:

Use clip and position: absolute for visually hiding elements

One of the most reliable methods is using CSS to clip the element and position it off-screen. This keeps the content out of sight but still accessible to screen readers.

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

This method has been around for a while and works well across browsers and screen readers. It's especially useful for things like form labels that you might want to visually hide but still be announced by assistive tech.

Just make sure:

• You don’t accidentally hide more than intended.
• The positioning doesn’t cause unexpected layout shifts.

Try the visually-hidden class approach (modern update)

A modern alternative builds on the above idea but uses clip-path and better positioning to ensure compatibility with newer devices and zoom levels.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

This version avoids some of the quirks from older implementations and plays nicely with high zoom levels and responsive designs.

Why this works:

• clip-path is more future-proof than the older clip.
• white-space: nowrap prevents potential reflows in some screen readers.

Don’t use display: none or visibility: hidden

These are not good options if your goal is to hide content but keep it accessible.

• display: none completely removes the element from the document flow and hides it from everyone, including screen readers.
• visibility: hidden also hides the content from assistive tools, even though it preserves layout space.

So if you're hiding something important for accessibility reasons—like a label or instruction—avoid these properties.

Consider ARIA attributes when appropriate

Sometimes, instead of hiding actual text, you can use ARIA attributes to provide context without showing anything visually.

For example:

<button aria-label="Close modal">X</button>

In this case, the button shows just an "X", but screen readers will read "Close modal". That way, you don't have to add visible text just for accessibility.

Use this when:

• You want concise UI.
• You’re confident the ARIA label accurately conveys the purpose.

But remember:

• Always test with real screen readers if possible.
• Don’t overuse it—some interfaces still benefit from visible labels.

Basically, hiding content accessibly comes down to using the right CSS techniques and knowing when to lean on ARIA. It’s not complicated, but it does require attention to detail.

The above is the detailed content of How can you hide content accessibly?. For more information, please follow other related articles on the PHP Chinese website!