---
title: "How to Make an Interactive Element Invisible but Accessible – Master.dev Blog"
url: https://daily.dev/posts/how-to-make-an-interactive-element-invisible-but-accessible-master-dev-blog-pbvhswnt5
source_url: https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible
type: article
source: "Frontend Masters"
published: 2026-07-08T13:44:12.734Z
updated: 2026-07-08T13:44:36.621Z
tags: ["css", "html", "accessibility"]
reading_time: 7
upvotes: 5
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Make an Interactive Element Invisible but Accessible – Master.dev Blog

**[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 7 min read · 5 upvotes · 0 comments

## Summary

A technique for hiding interactive UI elements (share buttons, skip links, copy buttons) while keeping them accessible to hover, focus, find-in-page, and fragment navigation. The approach combines the HTML `hidden="until-found"` attribute with CSS `contain-intrinsic-size: auto none` to reserve layout space and prevent layout shift. A 1ms `@keyframes` animation briefly renders the element so its size is captured, while `opacity: 0` prevents flickering. The element is then revealed via `&:is(:hover, :focus, :not([hidden]))`. Quirks include find-in-page content persisting after discovery and Safari requiring Tab+Option for button focus.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible>

---

Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/how-to-make-an-interactive-element-invisible-but-accessible-master-dev-blog-pbvhswnt5)