Can font size be set to 0px to hide labels, and still be readable by screen readers

html forms wai-aria screen-readers

12,069

Solution 1

My recommendation:

.magic-text {
    color:transparent;
    font-size:0;
}

This will hide your text properly; font-size itself should be enough but some browsers behave differently, so we make it transparent (invisible) in those. As for those browsers who don't get convinced by font-size, selecting may reveal your text but it's a very low price to pay; also it can be avoided by locally disabling selection. If it's not an option, you can still hide your text using z-index and relative (or even absolute) positioning:

.magic-text {
    position:relative;
    z-index:-99;  /* or just -1, whatever */
}

This will do the trick.

Solution 2

To hide text visually, but make it available for screen readers use the clip rect offscreen technique made popular by Snook.ca http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

The technique is to apply a class to the text (on a span inside the label) with the following CSS applied.

.screen-reader-text {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}

In the past the following CSS has been used but this is not longer recommended because of focus problems on iOS devices and problems with RTL languages.

.screen-reader-text {
  position: absolute !important;
  left: -9999em;
  top: -9999em;
}

Here is an example using also the clip-path technique with fallbacks for older browsers

<!doctype html>
<html>
<head></head>
<body>
<style>
    .screen-reader-text {
        position: absolute !important;
        height: 1px; width: 1px; 
        overflow: hidden;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
    }
    .background-image {
        background-image: url('https://cdn3.iconfinder.com/data/icons/abstract-1/512/go_B-512.png');
        background-size:cover;
        width:50px;
        height:50px;
    }
</style>
    <button class="background-image"><span class="screen-reader-text ">Go</span></button>
</body>
</html>

12,069

c_sea

Updated on June 13, 2022

Comments

c_sea almost 2 years

I need to implement a form with placeholder text and no visible labels, but still have it be accessible to non-sighted users. Setting a text-indent: -9999px on the labels hides them, but adds extra space to the form. Is there any reason not to just set the font size to 0px? Will it still be readable by screen readers?
- Jukka K. Korpela over 9 years
  
  Don’t you think it should be accessible to sighted users, too? See w3.org/TR/html5/forms.html#the-placeholder-attribute
- c_sea over 9 years
  
  I found this to be the recommended method to hide text offscreen, but still have it be screen-readable: .hidden {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} See webaim.org/techniques/css/invisiblecontent
unobf over 9 years

I would definitely not recommend this approach because although I believe most screen readers today will still read this label, in the past, screen readers have not read this and its not one of the recommended techniques so they might change in the future
c_sea over 9 years

That sounds good, but it seems clip is deprecated, see developer.mozilla.org/en-US/docs/Web/CSS/clip, and clip-path is not supported in IE at all
unobf about 9 years

note: clip-path is actually not yet supported by any browsers, so the clip rect technique will work for a long time
Joe Maffei over 5 years

This technique does not work well to hide table headers (at least not on macOS using VoiceOver). It makes tables impossible to navigate using the keyboard. The font-size: 0 trick works just fine.
Joe Maffei over 5 years

I understand that VoiceOver on macOS is not the best screen reader out there, but this technique is the only one that seems to work to visually hide table headers but make them accessible via VoiceOver. The clip trick breaks table navigation.
Steven Mouret over 5 years

This technic is ok for accessibility but result in search engine penalties as they may interpreted to be malicious more information.
dkellner over 5 years

Hiding something from one kind of device and showing it to another, this is something people do and it should not be penalized. But the question itself was technical, so the answer is technical too. A proper markup or media query that makes crawlers understand what they're dealing with is the author's responsibility - it's probably been addressed already, not part of this question. I mean, thanks anyway, but I don't see the problem in answering what's being asked.
norbidrak about 5 years

@StevenMouret Article is from 2014 and they recommend using deprecated "clip" method, so I wouldn't treat it so seriously. Also go to main google page, and look for their outline ... h1's are hidden from users ... Would they penalize themselves ??
Steven Mouret about 5 years

@norbidrak On h1, Google does not use font-size: 0. But he use clip property in the same way as the WebAIM article I'm referring to.
norbidrak about 5 years

@StevenMouret My point was that there is no such a thing like search engine penalties for hiding content. It's just like medieval people were afraid of devil, some people were talking about him, but no one ever seen him.
dkellner about 5 years

That's the point - no one could possibly even have the chance to see such a devil. To actually KNOW why you can be penalized, you have to keep all factors strictly the same, then change only one, and see what happens - and then repeat this a couple of times. No one does that to a real business site. So yes, it's a myth and only anecdotal reasoning supports it. The best someone can do is avoid unnecessary duplications and hints that a crawler can classify as deception - but that's as far as it goes.
user3748764 almost 5 years

@norbidrak Search engines do use advanced heuristics to detect hidden content and can degrade a page or site ranking if their algorithms consider it manipulative. They explicitly discourage hiding content. support.google.com/webmasters/answer/66353 blogs.bing.com/webmaster/2014/08/27/web-spam-filtering blogs.bing.com/webmaster/2009/03/19/…
dkellner almost 5 years

It's okay; hiding content for the sake of false relevance generation, that's a no-no and should be penalized. But the smarter those heuristics get, the clearer it should become that some modifications are actually made to IMPROVE readability and user experience. No search engine would penalize that - for obvious reasons.
Ricardo Vigatti over 2 years

outdated. use @dkellner's answer.