Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

The Web Needs a Native .visually-hidden

This fantastic article by Ben Myers dives into the user need for textual content that is only available to assistive technologies, e.g.

<span aria-hidden="true">
	★★★☆☆
</span>
<span class="visually-hidden">
	3 out of 5 stars
</span>

Ben describes how we’ve arrived at the current standard implementation of ‘visually-hidden’ class:

.visually-hidden:not(:focus):not(:active) {
	border: 0;
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

But this approach is hacky, trying to visually hide text without removing them from the accessibility tree (which is what would happen if we simply wrote display: none or visibility: hidden). It’s also been tweaked over time, to capture more and more edge cases in browsers and devices. Therefore, it’s difficult to know which snippet of code to copy and paste for each project, and implementations in third party libraries are liable to stagnate.

Ben puts forward the case for a native solution: display: visually-hidden. It would be far cleaner than the ‘copypasta’ solution above. Ben opts for a CSS implementation rather than a HTML attribute such as hidden="visually", as this has some legacy display: none styling in libraries such as normalize.css. Even a new HTML attribute such as visuallyhidden would suffer from the HTML architecture insofar as “the failure mode for a browser that doesn’t recognize the new value yet would be to exclude the content from assistive technology output altogether”.

Ben also considers the merits of a new CSS property, such as element-visibility: visually-hidden, but wonders how this would work in combination with something like display: none.

So, here’s hoping for a display: visually-hidden value to be added! Ben recommends adding your thumbs up to the existing GitHub issue that proposes something like this.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.