Everything you never wanted to know about visually-hidden

📝 Discussion Summary (Click to expand)

Three prevailing themes

Growing confusion over accessibility headlines
“The headlines are getting weirder every day.” – amelius
Criticism of the “visually‑hidden” CSS pattern
“visually‑hidden is the CSS equivalent of ‘I’m not touching you’ — technically accessible, technically invisible, and every frontend developer has a slightly different version that they swear is the correct one.” – elophanto_agent
Frustration with the lack of a proper CSS solution and standards inertia
“This is very frustrating as someone who has seen every iteration of this in practice. It’s wild to me that we don’t simply have a display: accessibility‑tree‑only CSS prop and be done with it.” – akersten
“The standards body bringing up ‘oh well what if you wind up using this and it confuses my idyllic sighted screen reader user because there's simply too much information’ is a pretty bad reason to not implement this into the standard.” – akersten

🚀 Project Ideas

Generating project ideas…

Provides a single, battle‑tested .visually-hidden class that guarantees accessibility and invisibility across all browsers.
Eliminates the “I’m not touching you” confusion by standardizing the implementation and documenting the rationale.
Offers a CDN‑ready bundle and a PostCSS plugin for automated linting.

Key	Value
Target Audience	Frontend developers, UI/UX designers, accessibility engineers
Core Feature	One‑click, cross‑browser visually hidden CSS with ARIA support
Tech Stack	CSS, PostCSS, npm, CDN (jsDelivr)
Difficulty	Medium
Monetization	Hobby

HN commenters lament the lack of a standard: “visually‑hidden is the CSS equivalent of ‘I’m not touching you’ … every frontend developer has a slightly different version that they swear is the correct one.”
A single, well‑documented class removes the need for custom hacks and reduces audit time.
The library can be forked into design systems, making it a discussion starter for standard‑setting bodies.

Scans a page for hidden elements, clip‑path tricks, and non‑standard visually‑hidden implementations.
Highlights problematic nodes and suggests the correct .visually-hidden class or display: accessibility-tree-only where supported.
Provides a quick‑fix button that injects the recommended CSS into the page.

Key	Value
Target Audience	Web developers, QA engineers, accessibility auditors
Core Feature	Real‑time DOM analysis and automated remediation suggestions
Tech Stack	Chrome Extension APIs, JavaScript, CSS, Web Accessibility API
Difficulty	Medium
Monetization	Revenue‑ready: Freemium (basic scan) + Pro (advanced audit, CI integration)

Addresses the frustration: “This is very frustrating … we’re stuck with clip path instead … just because they think that’s somehow better.”
Encourages best practices by turning the audit into an interactive learning tool.
Can be integrated into CI pipelines, sparking broader adoption.

A lightweight React component that renders its children only for assistive technologies, using aria-hidden="false" and role="presentation" under the hood.
Exposes a simple API: <ScreenReaderOnly>Hidden text</ScreenReaderOnly>.
Comes with TypeScript types and Storybook stories for quick adoption.

Key	Value
Target Audience	React developers, component libraries, accessibility teams
Core Feature	Declarative screen‑reader‑only rendering with zero visual impact
Tech Stack	React, TypeScript, Storybook, npm
Difficulty	Low
Monetization	Hobby

Solves the “display: accessibility-tree-only” gap by providing a ready‑made component that can be dropped into any React app.
HN users can quote: “wild to me that we don’t simply have a display: accessibility-tree-only CSS prop and be done with it.”
Encourages consistent accessibility patterns across projects and fuels discussion on standardizing such features.