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

Question

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?

Answer 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.