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

FWIW - It’s not just a yellow underline, but a pop up element and the words “Search southwest.com” in large gray text above the yellow text.
I do find it usable, but not because it still looks a bit like a search box.

Hope this helps.

Elizabeth


> On May 25, 2016, at 11:12 AM, Glenda Sims <glenda.sims@deque.com> wrote:
> 
> I've also seen this design pattern recently.  As a customer of Southwest Airlines, when I click on the search icon (small magnifying glass in top right corner of www.southwest.com)....the search field that is shown is not a box...but a yellow underline with a label above, placeholder text and a search icon button.  
> 
> I'm under the impression that usability has been conducted on this design pattern with real humans...and that it has been favorable. 
> 
> I agree this could be a problem for cognitive users and could be addressed in the coga extension.
> 
> Glenda
> 
> glenda sims    |   team a11y lead   |    deque.com    |    512.963.3773      
> 
> web for everyone. web on everything. -  w3 goals
> 
> On Wed, May 25, 2016 at 9:48 AM, Jonathan Avila <jon.avila@ssbbartgroup.com> wrote:
> > My gut feeling here would be that the styling will potentially be a problem for all sighted users, and not specifically an accessibility problem - so a general usability, rather than accessibility, problem.
> 
> My internal feeling is that this is a bigger issue for people with low vision and cognitive disabilities and is likely an accessibility issue.  GoFundMe has this issue in Chrome -- they had no borders on the input fields at all -- in IE there are borders.
> 
> Jonathan
> 
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> jon.avila@ssbbartgroup.com
> 703.637.8957 (Office)
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
> 
> 
> -----Original Message-----
> From: Patrick H. Lauke [mailto:redux@splintered.co.uk]
> Sent: Wednesday, May 25, 2016 7:19 AM
> To: w3c-wai-ig@w3.org
> Subject: Re: Text entry box with a single underline...
> 
> On 25/05/2016 11:45, Alistair Garrison wrote:
> > 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?
> 
> My gut feeling here would be that the styling will potentially be a problem for all sighted users, and not specifically an accessibility problem - so a general usability, rather than accessibility, problem.
> 
> Though it could be argued that certain user groups with cognitive disabilities may be more affected (I'm saying that without any evidence, empirical or otherwise, so take it with a pinch of salt).
> 
> P
> --
> Patrick H. Lauke
> 
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> 
> 

=-=-=-=-=-=-=-=-=-=-=-=-=
Elizabeth J. Pyatt, Ph.D.
Instructional Designer
Teaching and Learning with Technology
Penn State University
ejp10@psu.edu, (814) 865-0805 or (814) 865-2030 (Main Office)

210 Rider Building  (formerly Rider II)
227 W. Beaver Avenue
State College, PA   16801-4819
http://www.personal.psu.edu/ejp10/psu
http://tlt.psu.edu

Received on Wednesday, 25 May 2016 15:38:33 UTC