E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Joseph Sherman
Date: Fri, Dec 11 2015 12:25PM
Subject: iOS app login placeholder text
No previous message | Next message →

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

From: Paul Adam
Date: Fri, Dec 11 2015 3:44PM
Subject: Re: iOS app login placeholder text
← Previous message | Next message →

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 ADDRESS 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
>
> > > >

From: Jonathan Avila
Date: Fri, Dec 11 2015 4:04PM
Subject: Re: iOS app login placeholder text
← Previous message | Next message →

One solution is to add an icon in front of the input fields such as user icon and a password icon. Labels do not have to be textual as far as I know.

Jonathan

> On Dec 11, 2015, at 2:26 PM, Joseph Sherman < = EMAIL ADDRESS 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
>
> > > >

From: lists
Date: Sat, Dec 12 2015 12:08AM
Subject: Re: iOS app login placeholder text
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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
>>
>> >> >> >> >
> > > >

From: Chaals McCathie Nevile
Date: Sun, Dec 13 2015 5:57AM
Subject: Re: iOS app login placeholder text
← Previous message | Next message →

On Sat, 12 Dec 2015 02:04:13 +0300, Jonathan Avila
< = EMAIL ADDRESS REMOVED = > wrote:

> One solution is to add an icon in front of the input fields such as user
> icon and a password icon. Labels do not have to be textual as far as I
> know.

Indeed labels do not have to be textual, and in some cases it is helpful
if they are not - color pickers might an example.

Except that any icon needs to make sense, and I am not sure how you
communicate a sense of "password" without adding some text hint.

cheers

> Jonathan
>
>> On Dec 11, 2015, at 2:26 PM, Joseph Sherman < = EMAIL ADDRESS 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
>>
>> >> >> >> > > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: lists
Date: Sun, Dec 13 2015 6:19AM
Subject: Re: iOS app login placeholder text
← Previous message | No next message

For passwords, a key icon can be shown.

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

> On 13-Dec-2015, at 18:27, Chaals McCathie Nevile < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On Sat, 12 Dec 2015 02:04:13 +0300, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> One solution is to add an icon in front of the input fields such as user icon and a password icon. Labels do not have to be textual as far as I know.
>
> Indeed labels do not have to be textual, and in some cases it is helpful if they are not - color pickers might an example.
>
> Except that any icon needs to make sense, and I am not sure how you communicate a sense of "password" without adding some text hint.
>
> cheers
>
>> Jonathan
>>
>>> On Dec 11, 2015, at 2:26 PM, Joseph Sherman < = EMAIL ADDRESS 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
>>>
>>> >>> >>> >>> >> >> >> >> >
>
> --
> Charles McCathie Nevile - web standards - CTO Office, Yandex
> = EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com
> > > >