Skip to content

Instantly share code, notes, and snippets.

@luxplanjay

luxplanjay/visually-hidden.css

Last active January 13, 2026 11:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save luxplanjay/6f6936b1bba7afe006fa9317b07b6045 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save luxplanjay/6f6936b1bba7afe006fa9317b07b6045 to your computer and use it in GitHub Desktop.
Download ZIP
Visually hidden CSS pattern
Raw
visually-hidden.css
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
@oleksandr-danylchenko
Copy link

oleksandr-danylchenko commented Jan 13, 2026

Unfortunately, I found that setting both width and height to 1px may not work properly for the focus-only links in iOS VoiceOver.
The VO will announce it once reached, but it won't receive the DOM focus. On click, some internal "clickability" check won't mark the link as the event's target. That'll cause the app to ignore any custom click handlers with default prevention.
After I leave just the width or just the height, the VO navigation works better, and the link is marked as a target.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment