E-mail List Archives

Re: Float labels

for

From: Steve Green
Date: Dec 21, 2015 10:12AM


I really don't see the point in this technique. If the float labels are in a large enough font to be readable, why not just display them permanently and get rid of the placeholder text?

It seems that the technique only 'works' if the float labels are much smaller than the other text, in which case some people won't be able to read them.

Steve Green

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Guy Hickling
Sent: 11 December 2015 22:24
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Float labels

It all depends... on how it's done. I took a look at the source code of the demo pages you included in your question. In the example done by MozMonkey.com, the clever part, the slide-up additional text, is done using HTML labels, with the "for" attribute correctly set. So far as I can see, that example should present no problem to AT (though I haven't tested it) - it's done by the book. Of course, as Mike says, all other accessibility rules need to be followed as well such as colour, contrast, and so on.

But the example at http://mds.is/float-label-demo/ (using floatlabels.js) is done showing the popup text a completely different way, in the JavaScript seemingly. There are no label elements in the markup, so for browsers or AT that don't read out placeholders, there won't be anything to tell blind people what the fields are for. I don't know what the current state of browsers and AT is regarding announcing placeholders to the user (does anyone else reading this know? - I'd like to know). But until we are sure all browsers pass placeholders to the AT, and all AT read them aloud, we should always have labels for fields.)

Apart from that it seems to me floating labels - they're a neat trick I haven't seen before - should be accessible if done the MozMonkey way. They address most of the usual concerns about placeholders of disappearing when the user most wants them.

Regards,
Guy Hickling
http://www.enigmaticweb.com