CODEWITHSUNDEEP
htmlformswai-ariascreen-readers
c_sea
c_sea

Reputation: 163

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

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?

Upvotes: 10

Views: 15842

Answers (3)

dkellner
dkellner

Reputation: 9906

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.

Upvotes: 13

unobf
unobf

Reputation: 7244

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>

Upvotes: 2

Tyler
Tyler

Reputation: 129

From what I was reading on a related post you should have no problem from screen readers when you set the font size to 0px. In his post, Rob uses the following code on the site as a live example.

#go { background: url(images/go.jpg); height: 25px; width: 41px; font-size: 0px; border:0; }

Upvotes: -1

Related Questions