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

• I think it was Ben Myers who started the debate by making the initial case for it: »Native visually hidden«.
• Ben’s pal W. Evan Sheehan followed up with his toughtful take: »Web Native “Visually Hidden”«.
• Even though not part of last year’s debate, this list wouldn’t be complete without mentioning »Inclusively hidden« by Scott O’Hara, which he wrote in 2017.

All opposed

• I only brought up Scott to bring him in again on this side. He wrote so so many words, and those words ended up being the poster-child argument against a native way: »Visually hidden content is a hack that needs to be resolved, not enshrined«.

Conclusion?

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

Let me end this piece with some neutral information.

• In Bootstrap (at least in versions 3, 4 and 5), you’ll find a helper class to hide content visually.
• James Edwards wrote about »The anatomy of visually hidden«.
• His article contains a reference to a discovery by Manuel Matuzović: »Visually hidden links with 0 dimensions«.