FLOAT­ING LA­BELS

La­bels are hot right now, but can they be in­tu­itive to use and ac­ces­si­ble? Russ Weak­ley ex­plains how

net magazine - - CONTENTS - Russ Weak­ley w: http://maxde­sign.com. au t: @russ­maxde­sign job: UX/UI de­vel­oper ar­eas of ex­per­tise: HTML, CSS/SCSS, ac­ces­si­bil­ity

Russ Weak­ley ex­plains how float­ing la­bels can be in­tu­itive to use and ac­ces­si­ble

Have you ever started to fill in a form field when the la­bel sud­denly shifted out of the field and floated above? This is re­ferred to as a ‘float­ing la­bel’. There are two com­monly used meth­ods used to achieve th­ese float­ing la­bels.

Method 1: La­bel only

In the static state, the la­bel is po­si­tioned on top of the form field. This la­bel is of­ten dis­played in a soft colour to look like place­holder text. When the form field re­ceives fo­cus, the la­bel moves up to sit above the form field. Dur­ing the process, the la­bel changes to a stronger colour.

Method 2: Place­holder and la­bel

In the static state, place­holder text is present in­side the form field. When the form field re­ceives fo­cus, the place­holder text be­comes in­vis­i­ble, and the la­bel ap­pears, mov­ing up to sit above the form field. As with the pre­vi­ous method, the la­bel also changes to a stronger colour.

With both meth­ods, the form fields are styled with a border-bot­tom only, rather than hav­ing borders around the en­tire field. This gives the im­pres­sion that users are typ­ing on a line rather than en­ter­ing in­for­ma­tion into a field. Method 1 is sim­pler to achieve as it only in­volves mov­ing the la­bel. Method 2 is more com­pli­cated, as it in­volves fad­ing the place­holder and mov­ing the la­bel. How­ever, Method 2 en­ables you to pro­vide slightly dif­fer­ent in­for­ma­tion for the place­holder and the la­bel. For ex­am­ple, you may want the ini­tial place­holder to be slightly more in­for­ma­tive (eg ‘Add you first name’) and then have a sim­pler la­bel (eg ‘First Name’).

Po­ten­tial is­sues

While float­ing la­bels have some ben­e­fits such as re­duc­ing vis­ual clut­ter, there is a range of po­ten­tial user ex­pe­ri­ence and ac­ces­si­bil­ity con­cerns.

Is it a form field?

As th­ese fields are styled with a border-bot­tom only, they don’t look like tra­di­tional form fields. Some types of users, es­pe­cially cog­ni­tive im­paired or tech­nol­ogy-chal­lenged users, may not be aware that th­ese are fields at all.

Low con­trast place­hold­ers

The ini­tial la­bel or place­holder text is of­ten pre­sented in an ex­tremely low con­trast colour, which means that it may not be read­able for some types of vi­sion-im­paired users.

Is it al­ready com­pleted?

At the other end of the spec­trum, if the ini­tial la­bel or place­holder text is pre­sented in a high con­trast colour, it could also be con­fus­ing for some users who may as­sume that the form fields are al­ready filled in.

La­bels that are too small

In some cases, the la­bels are dis­played in a tiny font size, which can be prob­lem­atic for some vi­sion­im­paired users.

Lack of fo­cus state

In many cases, the form fields have no vis­ual fo­cus

state when the form field has re­ceived fo­cus from the user.

This lack of vis­ual fo­cus state can cause sig­nif­i­cant is­sues for key­board-only users, as they may not be able to iden­tify which el­e­ment is currently in fo­cus. So let’s change that.

An ac­ces­si­ble ver­sion?

We’re go­ing to make an ac­ces­si­ble and in­tu­itive float­ing la­bel us­ing Method 2. Here are some of the de­sired out­comes:

St atic state

Be­fore any user in­ter­ac­tion with a form field, the place­holder should be vis­i­ble, and the la­bel should be hid­den. The place­holder should be of suf­fi­cient colour con­trast.

Hover state

When a user hov­ers over the form field, the place­holder and the form field should change in ap­pear­ance to in­di­cate that they are ‘in­ter­ac­tive’. To make the form fields more ‘dis­cov­er­able’ for users, the form field could dis­play a border on all sides of the el­e­ment.

Fo­cus state

When a user fo­cuses on the form field (via a mouse click or by tab­bing to the el­e­ment), four things should hap­pen: The place­holder should grad­u­ally fade so that it be­comes in­vis­i­ble. The la­bel should an­i­mate into view above the form field. A border should ap­pear on all sides of the form field to make it more dis­cov­er­able. The form field’s bot­tom border should change in colour - this is to help in­di­cate that is now in ‘edit mode’.

Post fo­cus state

When a user has suc­cess­fully com­pleted the form field, and fo­cus has left the form, two things should then hap­pen: The la­bel should re­main in view but change colour to in­di­cate that it is no longer in ‘edit mode’ and has been com­pleted. The form field’s border-bot­tom colour should re­turn to the orig­i­nal border-bot­tom colour.

The markup

The fol­low­ing steps will help to make the markup more ac­ces­si­ble.

La­bel place­ment

Ide­ally, la­bel con­tent should al­ways be placed be­fore form con­trols - ex­cept in the car of ra­dio but­tons and check­boxes. How­ever, for this method, we need the la­bel to be placed after the form field. This en­ables us to style the la­bel based on the state of the in­put. For ex­am­ple, we’re able to style the la­bel in a spe­cific way when the field is in fo­cus. To make sure the pat­tern is ac­ces­si­ble, we can wrap the la­bel around the la­bel and form field, and use the for and id at­tributes to ex­plic­itly as­so­ciate each la­bel with its form field.

<div class=” float­ing- la­bel”> <la­bel for=” text1”> <in­put class=” float­ing- la­bel__­field” type=” text” place­holder=”Add your first name” id=” text1” re­quired > < span class=” float­ing- la­bel__la­bel”>First Name</span> </ la­bel> </div>

We can place the la­bel con­tent in­side a span el­e­ment so that it can be styled sep­a­rately to the over­all la­bel and the form field.

< span class=” float­ing- la­bel__la­bel”>First Name</span>

Class names

We’re go­ing to use a nam­ing con­ven­tion that de­fines el­e­ments as ei­ther ‘mod­ules’ (the par­ent el­e­ment), ‘sub-mod­ules’ (child el­e­ments of the par­ent el­e­ment), or ‘mod­i­fiers’ (slight mod­i­fi­ca­tions of the par­ent or child el­e­ments).

The mod­ule will be given a class name of ‘float­ing-la­bel’. Sub-mod­ules are flagged us­ing a double un­der­score (float­ing-la­bel__­some­thing). Mod­i­fiers are flagged us­ing a double dash (float­inglabel—some­thing). While this nam­ing con­ven­tion may seem strange at first, it en­ables any­one to eas­ily de­ter­mine the re­la­tion­ship be­tween the par­ent and child el­e­ments, and when th­ese el­e­ments are mod­i­fied.

<div class=” float­ing- la­bel”> <la­bel for=” text1”> <in­put class=” float­ing- la­bel__­field” type=” text” place­holder=”Add your first name” id=” text1”

re­quired > < span class=” float­ing- la­bel__la­bel”>First Name</span> </ la­bel> </div>

The re­quired att ribute

We want to change the ap­pear­ance of the form field and la­bel when it has been com­pleted. While this would be easy to achieve us­ing JavaScript, we will use a work­around so it can be achieved us­ing CSS only. For this rea­son, we are go­ing to add the re­quired at­tribute to the form field. We can then use the :valid CSS se­lec­tor to change the ap­pear­ance of the field and la­bel once ‘valid’ in­for­ma­tion has been en­tered.

<in­put class=” float­ing- la­bel__­field” type=” text” place­holder=”Add your first name” id=” text1” re­quired >

SCSS

We’re go­ing to use SCSS rather than CSS to set vari­ables to use mul­ti­ple times across the rules.

Vari­ables

All of the vari­ables can be de­fined once at the top of the SCSS file.

// vari­ables

$ color- in­put-text: # 000; $ color- place­holder: #767676; $ color- place­holder- hover: # 000; $ color- place­holder- dis­abled: # ccc; $ color- la­bel: green; $ color- la­bel-fo­cus: blue; $ color- border: # ddd;

$ color- border-fo­cus: blue; $ color- dis­abled- back­ground: # f5f5f5; $la­bel- size: 14px;

Mod­ule

The float­ing-la­bel mod­ule needs to be given po­si­tion:

rel­a­tive as we’re go­ing to po­si­tion the la­bel con­tent rel­a­tive to this el­e­ment.

// float­ing- la­bel

. float­ing- la­bel { po­si­tion: rel­a­tive; mar­gin: 30px 0 40px; }

Form fields

For form fields, we can set the border to trans­par­ent, then re­set the border-­bot­tom to soft grey.

// field

. float­ing- la­bel__­field { width: 100%; border: none; border: 1px solid trans­par­ent; border- bot­tom: 1px solid $ color- border; pad­ding: .5em; re­size: none; color: $ color- in­put-text; back­ground: # fff; }

We then need to style the var­i­ous states of the field - hover, fo­cus and valid.

// field when in hover

. float­ing- la­bel__­field: hover {

border: 1px solid $ color- border; }

// field when in fo­cus

. float­ing- la­bel__­field: fo­cus { border: 1px solid $ color- border; border- bot­tom: 1px solid $ color- border-fo­cus ! im­por­tant; out­line: none; }

// field when valid - filled in

. float­ing- la­bel__­field: valid { border: 1px solid trans­par­ent;

border- bot­tom: 1px solid $ color- border; pad­ding- left: 0; }

La­bel

The la­bel con­tent needs to be set with po­si­tion: ab­so­lute so that we can move it when needed. In the ini­tial static state, this la­bel con­tent is po­si­tioned down over the form field us­ing top: -15px, and the opac­ity is set to 0 so that it can­not be seen.

// la­bel

. float­ing- la­bel__la­bel { po­si­tion: ab­so­lute; top: -15px; left: 0; opac­ity: 0; color: $ color- la­bel- fo­cus; font- size: $ la­bel- size; }

When the form field comes into fo­cus, we can change the la­bel opac­ity to 1 so that it is fully vis­i­ble. We need to set tran­si­tion to de­ter­mine how quickly the la­bel will move and trans­lateY to de­ter­mine where the la­bel will even­tu­ally be po­si­tioned.

// la­bel when in fo­cus

. float­ing- la­bel__­field: fo­cus + . float­ing- la­bel__la­bel { opac­ity: 1;

tran­si­tion: .5s ease; - we­bkit-trans­form: trans­lateY(- 5px);

trans­form: trans­lateY(- 5px); }

When the form field has been filled in, we can change the colour while keep­ing the same tran­si­tion and trans­lateY val­ues as above.

// la­bel when valid ( filled in)

. float­ing- la­bel__­field: valid + . float­ing- la­bel__la­bel { opac­ity: 1; color: $ color- la­bel;

tran­si­tion: .5s ease; - we­bkit-trans­form: trans­lateY(- 5px);

trans­form: trans­lateY(- 5px); }

We also need to set the la­bel colour when the form field is in fo­cus and valid.

// la­bel when in fo­cus and valid ( filled in)

. float­ing- la­bel__­field: fo­cus: valid + . float­ing- la­bel__la­bel {

color: $ color- la­bel- fo­cus; }

Place­holder

Fi­nally, we need to style the var­i­ous states of the place­holder. In the ex­am­ple be­low, only the we­bkit ver­sion is shown, but we could in­clude -moz

place­holder and -ms-in­put-place­holder ver­sions in the fi­nal ver­sion.

/ place­holder hover

. float­ing- la­bel__­field: hover::- we­bkit- in­put- place­holder {

color: $ color- place­holder- hover; }

// place­holder - be­come hid­den when in fo­cus

. float­ing- la­bel__­field: fo­cus::- we­bkit- in­put- place­holder { opac­ity: 0;

tran­si­tion: 1s ease; }

So, there you have it. Hope­fully a more ac­ces­si­ble and in­tu­itive float­ing la­bel.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.