WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Float labels

for

From: Guy Hickling
Date: Dec 11, 2015 3:24PM

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