CSS clip: an accessible version of display:none;

By Geoff Muskett

The problem with display:none is that screen readers ignore it, generally. Which is not great if you’re hiding navigation, for example. So recently I’ve been using the following to as an alternative:

HTML

<span class="whatever">menu</span>
<ul>
<li>something</li>
<li>something else</li>
</ul>

jQuery

$('ul').addClass('element-invisible');
$(".whatever").click(function () {
$("ul").toggleClass('element-invisible');
});

CSS

.element-invisible {
 position: absolute !important;
 clip: rect(1px, 1px, 1px, 1px);
}

Anything I want to hide, I’ll use jQuery to give it the class “element-invisible”, which applies the CSS clip property, to hide the element visually. But it’s still there, so screen readers can still read it. And if JavaScript is disabled it just displays.

Then just toggle the class when an element is clicked, so it visually shows and hides. Done.

Comments

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.