WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Placeholder

for

From: Bim Egan
Date: Mar 16, 2019 12:41AM

An alternative to placeholders that may be worth looking at is accessible
floating labels. This uses CSS and Jquery to position the explicit label
over the text box so that it *looks* like a placeholder. The difference is
that when the field receives focus the label doesn't disappear, it moves up
above the field and remains visible. It's explained in the following post:
https://allthingssmitty.com/2016/09/25/accessible-floating-labels/

So the designers get the clean look they want and users get the permanent
access to the label they need.

The example in the blog post does have colour contrast issues, both when
it's showing like a placeholder and when it moves up to its permanent
position, Otherwise it seems to work in several browsers. Not tested on
mobile though.

Bim

-------------
Bim Egan
Skype phone: 01223 96 87 96
Personal Email: <EMAIL REMOVED>
Skype ID: bim.accessequals

Coordinator: Describe Online
W: www.describe-online.com
E: <EMAIL REMOVED>
----------------------------------------
Partner: AccessEquals
W: www.accessequals.com
E: <EMAIL REMOVED>