Creating Acessible floating labels

Accessible 
Floating 
Labels
Accessible 
Floating 
Labels
Creating

Git Repo:
https://github.com/russmaxdesign/floating-label
Demo:
https://russmaxdesign.github.io/floating-label/

Floating labels are labels that are
associated with form controls such
as input and textarea elements.

These ﬂoating labels are initially
displayed on top of the form control,
and then “ﬂoated” up and out of
the form control when it receives
focus.

Label
Example of a Floating Label in static state

Label
Example of a Floating Label in focus state

This often includes a minimalistic
approach to the design of the form
controls.

This means that input and
textarea elements are often
displayed with a border-bottom
only, so that they appear more like
lines to write on rather than inputs
to enter data into.

Generally speaking, I am not a fan
of ﬂoating labels - except in some
speciﬁc circumstances.

The solution has some advantages
but also has potential User
Experience and Accessibility
issues.

The obvious question is: if you’re
not a fan, why give a presentation
about them?

Recently, the team I work with
suggested looking into ﬂoating
labels as an option. So, I decided to
try to create a non-JavaScript
version that was usable and
accessible.

Hopefully this presentation will
provide you with some things to
consider before using ﬂoating
labels, or help you make them more
usable and accessible.

Concern 1.
Is it a form control?

My main concern is that if a
minimalist design approach is used,
it may not be clear to users that the
element is actually a form control
at all.

First name
Last Name
Email
Example of form using floating labels - in static state

This lack of clear identiﬁcation could
be problematic for a range of
diﬀerent audiences including
cognitive impaired and those that
are “technology challenged”.

Concern 2.
Low contrast labels

The initial labels often have very low
contrast - trying to replicate the
appearance of a placeholder.

First name
Last Name
Email
Example of form using floating labels showing low contrast labels

This means that critical information
- the form labels themselves - may
not be readable for some types of
vision impaired users.

Concern 3.
Is it already ﬁlled in?

At the other end of the spectrum, if
the label has a strong contrast it
could then be mistaken for a value
- as if the form control has already
been ﬁlled in.

First name
Last Name
Email
Example of form using floating labels showing high contrast labels

Again, this could be problematic for
cognitive impaired and/or
“technology challenged” users.

Concern 4.
Labels are too small

In some cases, the labels are
displayed in a very small font-
size.

First name
Last Name
Email
Example of form using floating labels with a very small font-size

This can be problematic for anyone
with diminished eye-sight -
especially when it is critical
information like a form label.

Concern 5.
Lack of focus state

In many cases, the form controls
and labels have no focus state.

This can cause major issues for
keyboard-only users as they may
not be able to identify the elements
that are currently in focus.

Bottom line, if you are thinking
about using a ﬂoating label solution,
make sure you test with real users
to make sure it is suitable in the
proposed environment before going
too far!

And of course, make sure that any
solution is accessible to the widest
possible range of audiences and
assistive technologies.

While there are a range of diﬀerent
methods that can be used to create
ﬂoating labels, the two most
common methods are:

In the static state, the label is
displayed on top of the input.
When the input receives focus, the
label is animated upwards so that it
sits above the input.

Label
Example of a Floating Label showing label in static state

Label
Example of a Floating Label showing label in focus state

Method 2:
Placeholder and label

In the static state, the placeholder
is displayed inside the input. When
the input receives focus, the
placeholder becomes invisible, and
the label is animated into view,
above the input.

Placeholder
Example of a Floating Label showing placeholder in static state

Placeholder
Label
Example of a Floating Label showing placeholder fading and label appearing

Label
Example of a Floating Label showing label above input

We will be looking at how to achieve
a usable and accessible version of
the second method because it
allows us to display a separate
placeholder and label value.

This means we can display more
detailed instructions via the
placeholder, and then simpler
information via the label.

Add your ﬁrst name
Example of a Floating Label showing placeholder

First name
Example of a Floating Label showing label

A lot of the outcomes listed below
are to help these ﬂoating label
controls to be more discoverable.

Before any user interaction with a
form control, the placeholder
should be visible and the label
should be hidden

Placeholder
Example of a Floating Label showing placeholder

The placeholder should be of
suﬃcient color contrast.

Placeholder
Placeholder text set to #666 - AA Compliant

If a user hovers over the form
control, the placeholder and form
control should change in
appearance to indicate that the
form control is interactive.

Ideally, the form control could
change in hover state so that the
border appears on all sides of the
element - to help make it more
discoverable.

Placeholder
Example of a Floating Label in static state

Placeholder
Example of a Floating Label in hover state

If a user focuses on the form control
(via mouse click or by tabbing to the
element), four things should
happen:

The placeholder should gradually
fade to invisible.

The label should animate into view
above the form control.

A border should appear on all sides
of the form control.

Additionally, the form control's
bottom border should change in
color - to help indicate that is is
now in “edit mode”.

Label
Placeholder
Example of a Floating Label showing placeholder fading and label appearing

When focus leaves the form control,
two things should happen:

The label should remain in view but
change color to indicate that it is
no longer in “edit mode” and has
been completed.

The form control’s border-bottom
color should return to the original
border-bottom color.

User value here
Label
Example of a Floating Label in post-focus state

My ﬁnal desired outcome was to try
to make a version that did not use
any JavaScript - unlike most of the
other examples I’d seen.

I think JavaScript plays an important
role in modern web development,
but it concerns me that developers
are relying on JavaSCript for
simple things like positioning and
animated form labels.

In order to meet all of the desired
outcomes, I’ve had to use one
experimental CSS selector. This
means that this one aspect of the
solution will only work in more
modern browsers.

However, the solution does use
basic progressive enhancement,
so almost all of the functionality
should be stable for older browsers.

For this method, I needed the label
information to appear after the
form control in source order.

This allowed me to style the label
based on the state of the input.
For example, I was then able to
change the style of the label when
the control was in focus.

// adjacent sibling selector
.floating-‐label__control:focus + .floating-‐label__label { }

In an ideal world, label content
should be placed before all form
controls in source order - except
for radio buttons and checkboxes.

However, I used the “for” and “id”
attributes to explicitly associate
the label to the form control.

<div class="floating-‐label">
<label for="input1">
<input class="floating-‐label__control" type="text"
placeholder="Add your first name" id="input1" required>
<span class="floating-‐label__label">First Name</span>
</label>
</div>

I also wrapped the label around the
form control and label content.

Finally, I placed the label content
inside a span element, so that I
could style the label content
separately to the overall label and
the form control.

For this solution I used a BEM-like
naming conversion to make the
solution day to understand for other
developers. This meant writing the
selectors as modules, sub-modules
and modiﬁers.
BEM = Block, Element, Module

// module -‐ or parent element
.floating-‐label { }
// sub-‐module -‐ or child elements
.floating-‐label__control { }
.floating-‐label__label { }
// modifier
.floating-‐label__control-‐-‐disabled { }

<div class="floating-‐label">
<label for="input1">
<input class="floating-‐label__input" type="text"
placeholder="Add your first name" id="input1" required>
<span class="floating-‐label__label">First Name</span>
</label>
</div>

I’m going to quickly show some of
the SCSS used to create the final
floating label solution. I won’t
show all of it, but you can check out
the repo for the finer details if
interested.

Also, I am using SCSS rather than
CSS as it gives me a little bit more
control - allowing me to set some
variables that can be used multiple
times across the various rules.

All of the variables can be deﬁned
once at the top of the SCSS ﬁle.

// variables
$color-‐input-‐text: #000;
$color-‐placeholder: #666;
$color-‐placeholder-‐hover: #000;
$color-‐placeholder-‐disabled: #ccc;
$color-‐label: #1f7c8a;
$color-‐label-‐focus: #3655b1;
$color-‐border: #ddd;
$color-‐border-‐focus: #3655b1;
$color-‐disabled-‐background: #f5f5f5;
$label-‐size: 14px;

I need to set the parent to
position: relative as I’m going
to position the label content relative
to this parent.

// floating-‐label
.floating-‐label {
position: relative;
margin: 30px 0 40px;
}

For the controls, I am going to set
the border to transparent, then
reset the border-‐bottom to a soft
gray.

// control
.floating-‐label__control {
width: 100%;
border: none;
border: 1px solid transparent;
border-‐bottom: 1px solid $color-‐border;
padding: .5em;
resize: none;
color: $color-‐input-‐text;
background: #fff;
}

I then need to style the various
states of the control - in this case
hover and focus.

// control when in hover
.floating-‐label__control:hover {
border: 1px solid $color-‐border;
}

// control when in focus
.floating-‐label__control:focus {
border: 1px solid $color-‐border;
border-‐bottom: 1px solid $color-‐border-‐focus;
outline: none;
}

I can also style the input once it has
been ﬁlled in using the valid
pseudo-class. Keep in mind that
this is only supported by the latest
browsers.

// control when in focus and valid -‐ filled in
.floating-‐label__control:valid {
border: 1px solid transparent;
border-‐bottom: 1px solid $color-‐border;
padding-‐left: 0;
}

Next, I need to set position:
absolute on the label content and
initially position it down over the
top of the input. It also has an initial
opacity of “0”.

// label
.floating-‐label__label {
position: absolute;
top: -‐15px;
left: 0;
opacity: 0;
color: $color-‐label-‐focus;
font-‐size: $label-‐size;
}

When the input comes into focus, I
will then style the label content so
that the opacity transitions from
“0” to “1”.

// label when in focus
.floating-‐label__control:focus + .floating-‐label__label {
opacity: 1;
transition: .5s ease;
-‐webkit-‐transform: translateY(-‐5px);
transform: translateY(-‐5px);
}

Finally, I am styling the
placeholders in their various
states. I’ve only included some of
the rules used in the ﬁnal product as
they are quite extensive.

// placeholder
::-‐webkit-‐input-‐placeholder {
opacity: 1;
color: $color-‐placeholder;
}

// placeholder hover
.floating-‐label__control:hover::-‐webkit-‐input-‐placeholder {
color: $color-‐placeholder-‐hover;
}

// placeholder -‐ become hidden when in focus
.floating-‐label__control:focus::-‐webkit-‐input-‐placeholder {
opacity: 0;
transition: 1s ease;
}

Floating labels are problematic
Adam Silver

https://medium.com/simple-human/floating-labels-are-a-bad-
idea-82edb64220f6

Are Float Labels Really That
Problematic After All?
Matt D. Smith

https://blog.prototypr.io/are-float-labels-really-that-
problematic-after-all-da7ffe7d5417

Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

Creating Acessible floating labels

More Related Content

What's hot (20)

Similar to Creating Acessible floating labels (20)

More from Russ Weakley (13)

Recently uploaded (20)

Creating Acessible floating labels