RE: Text entry box with a single underline...

And Reverse the DOM order of the label and the input to achieve floating
labels using CSS as many material design spawns do and you can get a failure
of 1.3.2 for certain arrangements of form elements as well ...  and then
there's the usability issue of the placeholder attribute text disappearing
at the very time it  is needed (in addition to failing 1.4.3 in desktop

-----Original Message-----
From: Alistair Garrison [] 
Sent: Wednesday, May 25, 2016 8:46 PM
To: list
Subject: Text entry box with a single underline...

Dear All, 

I've been asked a question about text entry box styling, but I thought I'd
also try and gain some wider input.

If effect, the developer wants to use a text entry box.  In isolation, the
background in the text entry box is black, the view it sits in is black, and
the box only has a single red border running along the bottom.  The label is
above the box.

In my opinion, the created text entry area is difficult for all users to
immediately perceive as a text entry area; simple not seeing it as a text
entry area.  In this configuration I've been thinking that 1.4.1 Use of
Color would be failed, due to the single red line being used as the only
indication that it is a text entry area, but surely there must be further
Success Criteria that are failed?

The developers have offered-up putting placeholder text in the box, but to
my mind this looks like an underlined heading - which again isn't great.

The developers are indicating that this design pattern is becoming more and
more common.

The question is then - are there any SC's or Failure Conditions I have
missed that would rule out styling a text area in this manner?  If not,
should there be?

Very best regards


Alistair Garrison 

Received on Thursday, 26 May 2016 10:44:47 UTC