Native visually hidden


Another CSS Naked Day is about to end. Once again it’s been a delight to find like-minded people by following the #CssNakedDay and #css_naked_day hashtags. Line length has been the only downside of the day, but even that could’ve been mitigated by looking at sites on mobile only.

Some people admitted to cheating. Usually for a good cause, e.g. charts that would otherwise have been inaccessible.

On one site however (I forgot which) it was about something as simple as keeping the styles for the .visually-hidden class in.

This reminded me of last year’s debate whether we need a native visually hidden in HTML or CSS.

So I did some searching online, and collected the results by compiling a list of links, because without doing that I’m fairly certain I’ll end up doing the same search next year.

In a nutshell, good points have been made on both sides.

Proponents usually argue this is such an established pattern, and universally needed, so the way to style it shouldn’t be a mess. But it is, and always has been, even back when we still called it .sr-only. Their point is, a CSS one-liner would certainly help.

The biggest counterargument is that .visually-hidden is a code smell for not-so-great design: How about *not* hiding the content for *everyone* in the first place?

All in favor

All opposed


None. I’m torn too. The debate will continue.

Let me end this piece with some neutral information.