Labels and place-holders in form inputs

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Labels and place-holders in form inputs

Userite
I have an application that uses “placeholder” text inside a forms input field to tell the user what is required. This helps the form to be displayed well on a small screen such as a mobile phone. However I still need to include the <label> element (hidden via CSS) to comply with WCAG and ensure that *all* screen reader users can always know what is required.  My problem is that some screen-readers read both the <label> and the placeholder.
Any suggestions or comments warmly welcomes
Richard
 
Reply | Threaded
Open this post in threaded view
|

RE: Labels and place-holders in form inputs

Balusani, Shirisha

·         Provide label as you were doing by using hidden CSS

·         For place holder provide format to enter by using aria-describedby to tie the information to the input field

(or )

Add the place holder below the input field.

 

Thanks

Siri

 

 

From: Userite [mailto:[hidden email]]
Sent: Monday, August 01, 2016 2:17 PM
To: [hidden email]
Subject: Labels and place-holders in form inputs

 

I have an application that uses “placeholder” text inside a forms input field to tell the user what is required. This helps the form to be displayed well on a small screen such as a mobile phone. However I still need to include the <label> element (hidden via CSS) to comply with WCAG and ensure that *all* screen reader users can always know what is required.  My problem is that some screen-readers read both the <label> and the placeholder.

Any suggestions or comments warmly welcomes

Richard

 

Reply | Threaded
Open this post in threaded view
|

RE: Labels and place-holders in form inputs

Jim Homme
In reply to this post by Userite

Hi,

In my experience, if you have both a label and a placeholder, NVDA and JAWS ignore the placeholder altogether.

 

Jim

 

 

==========

Jim Homme,

Accessibility Consultant,

Bender HighTest Accessibility Team

Bender Consulting Services, Inc.,

412-787-8567,

[hidden email]

http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions

E+R=O

 

From: Userite [mailto:[hidden email]]
Sent: Monday, August 01, 2016 3:17 PM
To: [hidden email]
Subject: Labels and place-holders in form inputs

 

I have an application that uses “placeholder” text inside a forms input field to tell the user what is required. This helps the form to be displayed well on a small screen such as a mobile phone. However I still need to include the <label> element (hidden via CSS) to comply with WCAG and ensure that *all* screen reader users can always know what is required.  My problem is that some screen-readers read both the <label> and the placeholder.

Any suggestions or comments warmly welcomes

Richard

 

Reply | Threaded
Open this post in threaded view
|

RE: Labels and place-holders in form inputs

Beranek, Nicholas
In reply to this post by Userite

Hi Richard,

 

I request that you not rely on the placeholder attribute to convey meaning. I understand that you have a <label> that is positioned offscreen, but a lack of visible labels fails SC 3.3.2 Labels or Instructions. Labels are not just for screen reader users. Not to mention, the placeholder itself disappears once the field receives focus and the user types in information.

 

I would leverage a different technique such as positioning the <label> element on top of the form control (like the placeholder is now) and then send it above the form control once the field receives focus and info is typed in.

 

Nick Beranek

Capital One

 

From: Userite [mailto:[hidden email]]
Sent: Monday, August 01, 2016 3:17 PM
To: [hidden email]
Subject: Labels and place-holders in form inputs

 

I have an application that uses “placeholder” text inside a forms input field to tell the user what is required. This helps the form to be displayed well on a small screen such as a mobile phone. However I still need to include the <label> element (hidden via CSS) to comply with WCAG and ensure that *all* screen reader users can always know what is required.  My problem is that some screen-readers read both the <label> and the placeholder.

Any suggestions or comments warmly welcomes

Richard

 



The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

Reply | Threaded
Open this post in threaded view
|

Re: Labels and place-holders in form inputs

Userite
Dear All,
Thank you all for your helpful comments and suggestions.
Richard