creating acessible floating labels

AccessibleFloatingLabels

AccessibleFloatingLabels

Creating

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

Demo: https://russmaxdesign.github.io/floating-label/

https://github.com/russmaxdesign/floating-label

https://russmaxdesign.github.io/floating-label/

What are floating labels?

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

These floating labels are initially displayed on top of the form control,

and then “floated” 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.

Traditional Input

Floating Input

Why use them?

Generally speaking, I am not a fan of floating labels - except in some

specific 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 floating

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 floating

labels, or help you make them more usable and accessible.

What are the concerns?

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 identification could be problematic for a range of different 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 filled 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 filled 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.

Test, test, test

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!

And of course, make sure that any solution is accessible to the widest

possible range of audiences and assistive technologies.

Two main methods

While there are a range of different methods that can be used to create

floating labels, the two most common methods are:

Method 1: Label only

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

PlaceholderLabel

Example of a Floating Label showing placeholder fading and label appearing

Label

Example of a Floating Label showing label above input

Which one to use?

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 first name

Example of a Floating Label showing placeholder

First name

Example of a Floating Label showing label

Desired outcomes

A lot of the outcomes listed below are to help these floating label

controls to be more discoverable.

Static state

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 sufficient color contrast.

Placeholder

Placeholder text set to #666 - AA Compliant

Hover state

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


Placeholder

Example of a Floating Label in hover state

Focus 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”.

Placeholder


LabelPlaceholder


Label


Post focus state

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.

Placeholder


LabelPlaceholder


Label


User value here

Label

Example of a Floating Label in post-focus state

No JavaScript

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.

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.

The markup

Label placement

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.




</div>

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.




</div>

The class names

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

// module -‐ or parent element .floating-‐label { }

// sub-‐module -‐ or child elements

.floating-‐label__control { }

.floating-‐label__label { }

// modifier .floating-‐label__control-‐-‐disabled { }

The SCSS

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.

Variables

All of the variables can be defined once at the top of the SCSS file.

// 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;

Parent

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; }

Control

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 filled 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); }

placeholder

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.

// 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; }

More…

Floating labels are problematic Adam Silver

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

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

Are Float Labels Really That Problematic After All?

Matt D. Smithhttps://blog.prototypr.io/are-float-labels-really-that-

problematic-after-all-da7ffe7d5417

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

Education