This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
9. This often includes a minimalistic
approach to the design of the form
controls.
10. 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.
14. Generally speaking, I am not a fan
of floating labels - except in some
specific circumstances.
15. The solution has some advantages
but also has potential User
Experience and Accessibility
issues.
16. The obvious question is: if you’re
not a fan, why give a presentation
about them?
17. Recently, the team I work with
suggested looking into floating
labels as an option. So, I decided to
try to create a non-JavaScript
version that was usable and
accessible.
18. Hopefully this presentation will
provide you with some things to
consider before using floating
labels, or help you make them more
usable and accessible.
23. This lack of clear identification could
be problematic for a range of
different audiences including
cognitive impaired and those that
are “technology challenged”.
29. 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 filled in.
40. Bottom line, if you are thinking
about using a floating label solution,
make sure you test with real users
to make sure it is suitable in the
proposed environment before going
too far!
41. And of course, make sure that any
solution is accessible to the widest
possible range of audiences and
assistive technologies.
45. 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.
49. 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.
54. 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.
55. This means we can display more
detailed instructions via the
placeholder, and then simpler
information via the label.
56. Add your first name
Example of a Floating Label showing placeholder
66. 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.
67. 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.
88. My final desired outcome was to try
to make a version that did not use
any JavaScript - unlike most of the
other examples I’d seen.
89. 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.
90. 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.
91. However, the solution does use
basic progressive enhancement,
so almost all of the functionality
should be stable for older browsers.
94. For this method, I needed the label
information to appear after the
form control in source order.
95. 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.
97. In an ideal world, label content
should be placed before all form
controls in source order - except
for radio buttons and checkboxes.
98. However, I used the “for” and “id”
attributes to explicitly associate
the label to the form control.
99. <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>
100. I also wrapped the label around the
form control and label content.
101. <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>
102. 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.
103. <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>
105. 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 modifiers.
BEM = Block, Element, Module
106. // module -‐ or parent element
.floating-‐label { }
// sub-‐module -‐ or child elements
.floating-‐label__control { }
.floating-‐label__label { }
// modifier
.floating-‐label__control-‐-‐disabled { }
107. <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>
109. 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.
110. 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.
120. I then need to style the various
states of the control - in this case
hover and focus.
121. // control when in hover
.floating-‐label__control:hover {
border: 1px solid $color-‐border;
}
122. // control when in focus
.floating-‐label__control:focus {
border: 1px solid $color-‐border;
border-‐bottom: 1px solid $color-‐border-‐focus;
outline: none;
}
123. I can also style the input once it has
been filled in using the valid
pseudo-class. Keep in mind that
this is only supported by the latest
browsers.
124. // 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;
}
126. 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”.
131. Finally, I am styling the
placeholders in their various
states. I’ve only included some of
the rules used in the final product as
they are quite extensive.
136. Floating labels are problematic
Adam Silver
https://medium.com/simple-human/floating-labels-are-a-bad-
idea-82edb64220f6
137. Are Float Labels Really That
Problematic After All?
Matt D. Smith
https://blog.prototypr.io/are-float-labels-really-that-
problematic-after-all-da7ffe7d5417