Everything you never wanted to know about visually-hidden

4 days ago

The article explores the history and evolution of the 'visually-hidden' CSS class, used to hide elements visually while keeping them accessible to screen readers.
Originating in the early 2000s, the technique was developed to address accessibility needs, particularly for 'skip navigation' links and form labels.
Over the years, the 'visually-hidden' class has accumulated various properties to handle browser quirks and ensure no visual artifacts, though many may now be obsolete.
Modern alternatives like 'clip-path: circle(0)' or 'transform: scale(0)' are proposed as simpler solutions, but thorough testing is required to ensure compatibility.
The article questions whether a native 'visually-hidden' solution should be standardized, but experts argue it could encourage misuse rather than solving underlying accessibility issues.
The key takeaway is that 'visually-hidden' should be used sparingly, as it often masks poor design decisions, and semantic HTML remains the best practice for accessibility.

Hasty Briefsbeta