WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: iOS app login placeholder text

for

From: lists@srinivasu.org
Date: Dec 12, 2015 12:08AM

I really like the recent implement ion on LinkedIn's iOS app for login form.

They do have placeholder labels but as you touch input field labels slightly jumps up and still visible. No color contrast issues.

Regards,
Srinivasu Chakravarthula | @csrinivasu
Sent from my iPhone 5C

> On 12-Dec-2015, at 04:14, Paul Adam < <EMAIL REMOVED> > wrote:
>
> Labels are required to be visible so placeholder won't work as it disappears.
>
> Placeholder also has insufficient contrast according to WCAG.
>
> You can give the inputs an accessible name via the accessibilityLabel property if this is a Native Swift or Objective-C app. If it's HTML you can use an aria-label to create an accessible name.
>
> WCAG requires labels to be visible but the impact to the user is not critical if you only had placeholders with no visible labels for a simple login page.
>
> Impact may be serious or moderate because the user will not always see a visible text string explaining what they should type into the input.
>
> If this were a search input with a search button the search button's text would serve as the visible label of the input according to WCAG's H65 technique.
>
> So you're just 1 input away from passing via H65! But you've got 2 inputs so I guess they need labels right :)
>
> <h2>Failing WCAG Visible Labels Requirement</h2>
> <input type=text placeholder=Username aria-label=Username>
> <input type=password placeholder=Password aria-label=Password>
> <input type=submit value=Login>
> <h2>Passing WCAG Visible Labels Requirement</h2>
> <input type=search placeholder=Search... aria-label=Search>
> <input type=submit value=Search>
>
> http://jsbin.com/dibarecudo/edit?html,output
>
> I think the biggest problem with not having a visible label for the login form is that the user may forget if they need to type their Email Address or Username as the login input and now they'd have to backspace the value text to make the placeholder reappear to confirm what they'd need to type.
>
> Good form error validation and suggestions is also a key part here and if you have that then the impact of not having the 2 visible labels is smaller.
>
> Hope this helps!
>
> Thanks!
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
>> On Dec 11, 2015, at 1:25 PM, Joseph Sherman < <EMAIL REMOVED> > wrote:
>>
>> We are developing an iOS app to grab info from our course system. The login page is standard username and password, just two blank fields. Currently they are using only placeholder text in both fields, which is obviously problematic for all users. I hate placeholder text, but can't get them to change as of yet. Is lack of visual labels acceptable for standard login forms?
>>
>> Is there a way to add hidden labels for VoiceOver in iOS apps? Is there a good solution for other users other than real labels?
>>
>> Joseph
>>
>> >> >> >> >
> > > >