WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Label or Placeholder?

for

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

From: Ócsvári Áron
Date: Fri, Jul 29 2016 6:08PM
Subject: Label or Placeholder?
No previous message | Next message →

Hello,

on a web-form, every field has a placeholder, wich contains name of the
field (e.g. first name, e-mail address, etc). On this form there is no
label tag. Is it accessible (WCAG can accept it), or should developers
add the label tags too?


Thanks for your help!

Regards,

Aron

From: Jonathan Avila
Date: Fri, Jul 29 2016 9:01PM
Subject: Re: Label or Placeholder?
← Previous message | Next message →

> On this form there is no label tag. Is it accessible (WCAG can accept it), or should developers add the label tags too?

Aron, the label element is not the only way to provide an accessible name for a form field, however, use of placeholder alone would not meet WCAG 2 A/AA success criteria. Placeholder while used as fallback to calculate an accessible name is not meant to provide a name for a form field -- it's meant to be a hint, a placeholder -- the HTML5 spec discourages this as well. In addition, the placeholder is likely not as widely support by assistive technology. Keep in mind that form fields will also need visible labels -- and once data is entered into the field the placeholder will go away and will no longer provide a visual label for the form field.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ócsvári Áron
Sent: Friday, July 29, 2016 8:08 PM
To: WebAIM Discussion List
Subject: [WebAIM] Label or Placeholder?

Hello,

on a web-form, every field has a placeholder, wich contains name of the field (e.g. first name, e-mail address, etc). On this form there is no label tag. Is it accessible (WCAG can accept it), or should developers add the label tags too?


Thanks for your help!

Regards,

Aron

From: Maxability Accessibility for all
Date: Fri, Jul 29 2016 11:14PM
Subject: Re: Label or Placeholder?
← Previous message | Next message →

The following article may help you understand the problems and ways to make
placeholder accessible.
http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/

Thanks & Regards
Rakesh

On Sat, Jul 30, 2016 at 8:31 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > On this form there is no label tag. Is it accessible (WCAG can accept
> it), or should developers add the label tags too?
>
> Aron, the label element is not the only way to provide an accessible name
> for a form field, however, use of placeholder alone would not meet WCAG 2
> A/AA success criteria. Placeholder while used as fallback to calculate an
> accessible name is not meant to provide a name for a form field -- it's
> meant to be a hint, a placeholder -- the HTML5 spec discourages this as
> well. In addition, the placeholder is likely not as widely support by
> assistive technology. Keep in mind that form fields will also need visible
> labels -- and once data is entered into the field the placeholder will go
> away and will no longer provide a visual label for the form field.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Ócsvári Áron
> Sent: Friday, July 29, 2016 8:08 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Label or Placeholder?
>
> Hello,
>
> on a web-form, every field has a placeholder, wich contains name of the
> field (e.g. first name, e-mail address, etc). On this form there is no
> label tag. Is it accessible (WCAG can accept it), or should developers add
> the label tags too?
>
>
> Thanks for your help!
>
> Regards,
>
> Aron
>
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Jennifer Sutton
Date: Sat, Jul 30 2016 2:08PM
Subject: Re: Label or Placeholder?
← Previous message | Next message →

Below my name are two additional resources about why placeholders are
problematic. Issues go beyond accessibility.

Jennifer

11 reasons why placeholders are problematic — Simple = Human — Medium
https://medium.com/simple-human/10-reasons-why-placeholders-are-problematic-f8079412b960#.ex2quw2gy

Placeholders in Form Fields Are Harmful
http://www.nngroup.com/articles/form-design-placeholders/

From: Sean Murphy
Date: Sun, Jul 31 2016 5:03PM
Subject: Re: Label or Placeholder?
← Previous message | Next message →

Also place holder from my reading isn't support on all browsers.

Sean
> On 30 Jul 2016, at 1:01 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On this form there is no label tag. Is it accessible (WCAG can accept it), or should developers add the label tags too?
>
> Aron, the label element is not the only way to provide an accessible name for a form field, however, use of placeholder alone would not meet WCAG 2 A/AA success criteria. Placeholder while used as fallback to calculate an accessible name is not meant to provide a name for a form field -- it's meant to be a hint, a placeholder -- the HTML5 spec discourages this as well. In addition, the placeholder is likely not as widely support by assistive technology. Keep in mind that form fields will also need visible labels -- and once data is entered into the field the placeholder will go away and will no longer provide a visual label for the form field.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ócsvári Áron
> Sent: Friday, July 29, 2016 8:08 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Label or Placeholder?
>
> Hello,
>
> on a web-form, every field has a placeholder, wich contains name of the field (e.g. first name, e-mail address, etc). On this form there is no label tag. Is it accessible (WCAG can accept it), or should developers add the label tags too?
>
>
> Thanks for your help!
>
> Regards,
>
> Aron
>
> > > > > > >

From: Whitney Quesenbery
Date: Tue, Aug 09 2016 6:10AM
Subject: Re: Label or Placeholder?
← Previous message | No next message

There is a lot of usability evidence that placeholders (text within the
field) is a real problem for many, especially because of the very
inconsistent behaviors that exist.

Here's an article that she's written about it. Published several years ago,
but her feelings about this have not changed. She may have some more recent
notes in the UK GDS design patterns.
http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php


On Sun, Jul 31, 2016 at 7:03 PM Sean Murphy < = EMAIL ADDRESS REMOVED = > wrote:

> Also place holder from my reading isn't support on all browsers.
>
> Sean
> > On 30 Jul 2016, at 1:01 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> >> On this form there is no label tag. Is it accessible (WCAG can accept
> it), or should developers add the label tags too?
> >
> > Aron, the label element is not the only way to provide an accessible
> name for a form field, however, use of placeholder alone would not meet
> WCAG 2 A/AA success criteria. Placeholder while used as fallback to
> calculate an accessible name is not meant to provide a name for a form
> field -- it's meant to be a hint, a placeholder -- the HTML5 spec
> discourages this as well. In addition, the placeholder is likely not as
> widely support by assistive technology. Keep in mind that form fields will
> also need visible labels -- and once data is entered into the field the
> placeholder will go away and will no longer provide a visual label for the
> form field.
> >
> > Jonathan
> >
> > Jonathan Avila
> > Chief Accessibility Officer
> > SSB BART Group
> > = EMAIL ADDRESS REMOVED =
> > 703.637.8957 (Office)
> >
> > Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> > Check out our Digital Accessibility Webinars!
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Ócsvári Áron
> > Sent: Friday, July 29, 2016 8:08 PM
> > To: WebAIM Discussion List
> > Subject: [WebAIM] Label or Placeholder?
> >
> > Hello,
> >
> > on a web-form, every field has a placeholder, wich contains name of the
> field (e.g. first name, e-mail address, etc). On this form there is no
> label tag. Is it accessible (WCAG can accept it), or should developers add
> the label tags too?
> >
> >
> > Thanks for your help!
> >
> > Regards,
> >
> > Aron
> >
> > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > > > >
> > > > >
--
*Whitney Quesenbery*
(lists) = EMAIL ADDRESS REMOVED =
(work) = EMAIL ADDRESS REMOVED =