E-mail List Archives
Thread: Float labels
Number of posts in this thread: 10 (In chronological order)
From: Gijs Veyfeyken
Date: Fri, Dec 11 2015 7:18AM
Subject: Float labels
No previous message | Next message →
Hi,
Are float labels WCAG-compliant?
Normal visible label elements are better, I know.
Just trying to figure out if it fails or not.
Demo's:
http://mds.is/float-label-demo/ <http://mds.is/float-label-demo/>;
http://mozmonkey.com/wp-content/files/PlaceholderLabels/ <http://mozmonkey.com/wp-content/files/PlaceholderLabels/>;
Thanks,
Gijs
---
Gijs Veyfeyken
AnySurfer - towards an accessible internet
http://www.anysurfer.be/en <http://www.anysurfer.be/en>;
Brussels - Belgium
From: Jonathan Avila
Date: Fri, Dec 11 2015 7:32AM
Subject: Re: Float labels
← Previous message | Next message →
> Are float labels WCAG-compliant?
I assume you are referring to small field labels that appear after a field has data entered into where previously the label was a placeholder. I support this design pattern as a way to meet SC 3.3.2 because IMO placeholder alone are not sufficient because they disappear when the field as input. I find with browser toolbars that many fields get auto populated and there needs to be a visual label present for the user to know what the field is for.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Moore,Michael (Accessibility) (HHSC)
Date: Fri, Dec 11 2015 7:45AM
Subject: Re: Float labels
← Previous message | Next message →
Can these float labels be configured to provide information to screen reading software to determine the accessible name for the input? Can they be positioned in a manner where they are usable for people using screen magnification? Do they have sufficient contrast? What happens to them on a mobile device?
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
From: Lucy Greco
Date: Fri, Dec 11 2015 11:29AM
Subject: Re: Float labels
← Previous message | Next message →
testing with nvda and firefox latused
the address feelds do not speak the lable so not accessable and i could
not find the lable on the screen at all untill i whent to the place holder
demo. so taking every thin in to account use both
On Fri, Dec 11, 2015 at 6:18 AM, Gijs Veyfeyken < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> Are float labels WCAG-compliant?
> Normal visible label elements are better, I know.
> Just trying to figure out if it fails or not.
>
> Demo's:
> http://mds.is/float-label-demo/ <http://mds.is/float-label-demo/>;
> http://mozmonkey.com/wp-content/files/PlaceholderLabels/ <
> http://mozmonkey.com/wp-content/files/PlaceholderLabels/>;
>
> Thanks,
>
> Gijs
>
> ---
> Gijs Veyfeyken
> AnySurfer - towards an accessible internet
> http://www.anysurfer.be/en <http://www.anysurfer.be/en>;
> Brussels - Belgium
> > > > >
--
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
From: Guy Hickling
Date: Fri, Dec 11 2015 3:24PM
Subject: Re: Float labels
← Previous message | Next message →
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
From: Steve Green
Date: Mon, Dec 21 2015 10:12AM
Subject: Re: Float labels
← Previous message | Next message →
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
From: Guy Hickling
Date: Mon, Dec 21 2015 4:54PM
Subject: Re: Float labels
← Previous message | Next message →
Steve, I think I'm inclined to agree with you. It's a neat looking
mechanism but doesn't actually offer much - other than potential for
forgetting the accessibility requirements! The first example given, the
http://mds.is/float-label-demo/ one, didn't even save space as the fields
allowed plenty of space between them for permanent labels.
Regards,
Guy Hickling
From: Patrick H. Lauke
Date: Mon, Dec 21 2015 6:55PM
Subject: Re: Float labels
← Previous message | Next message →
On 21/12/2015 23:54, Guy Hickling wrote:
> Steve, I think I'm inclined to agree with you. It's a neat looking
> mechanism but doesn't actually offer much - other than potential for
> forgetting the accessibility requirements! The first example given, the
> http://mds.is/float-label-demo/ one, didn't even save space as the fields
> allowed plenty of space between them for permanent labels.
Well, leaving aside the fact that us arguing over whether or not we
subjectively think the technique to be valuable or not is fairly futile,
as there clearly are designers/developers out there that DO think it has
merit as demonstrated by the fact they're actually using it, I'd offer a
(again, subjective, as we're really in the territory of UX, visual
design, and taste) counter argument here that these floating labels
actually do provide something: they make an initially empty form appear
visually harmonious, rather than a big expanse of label+blank form
control - immediately cutting in half the amount of elements that a user
has to take in visually at first glance; they also allow for a much
subtler, or even completely absent, border around the actual form
controls themselves; and arguably, the animated appearance of the
floating label once the user focuses on the form control adds a bit of
visual flair and visual confirmation that they're now focusing
on/interacting with that particular control.
Taking an "I don't think it's useful anyway" approach to something that
is actually being used is perhaps not the most productive of responses,
as I doubt it'll sway the minds of those who ARE using it. Neither is
"...and they'll forget to make it accessible", as that could be said
about any technique that deviates from using absolutely standard static
HTML.
IMO of course,
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: _mallory
Date: Tue, Dec 22 2015 3:59AM
Subject: Re: Float labels
← Previous message | Next message →
I've had to use similar techniques because it was a requirement that
forms look a certain way. Sometimes we have to do stupid songs and
dances because the graphics people are usually higher on the totem
pole, get paid more, get listened to more, and are the ones who
sell the product to the client. If we have no say otherwise, hacks
are our only hope. This is a hack. But it has a use.
_mallory
From: Patrick H. Lauke
Date: Tue, Dec 22 2015 4:05AM
Subject: Re: Float labels
← Previous message | No next message
On 22/12/2015 10:59, _mallory wrote:
> Sometimes we have to do stupid songs and
> dances because the graphics people are usually higher on the totem
> pole, get paid more, get listened to more, and are the ones who
> sell the product to the client.
And again purely subjectively, as a *user* I find nicely implemented
floating labels, in the right context, quite pleasant/delightful. So
it's not always just graphics people doing it for themselves...
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke