E-mail List Archives
Thread: Dealing With Screen Readers Ignoring placeholder attributes
Number of posts in this thread: 6 (In chronological order)
From: Jim Homme
Date: Tue, Jun 05 2018 6:10PM
Subject: Dealing With Screen Readers Ignoring placeholder attributes
No previous message | Next message →
Hi,
I noticed that if a form field contains a label tag and a placeholder attribute that both NVDA and JAWS omit the placeholder information. What is the best way to ensure that screen readers report the information in the placeholder if we want to communicate formatting information. For example, a phone number format or password rules piece of instruction? I want to cover for situations where screen real estate is limited. I alwo want people who are sighted to benefit from the helpful information.
Thanks.
Jim
=========Jim Homme
Product Manager
Digital Accessibility
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
People with disabilities, access job openings at https://www.benderconsult.com/careers/job-openings
From: John Foliot
Date: Wed, Jun 06 2018 6:43AM
Subject: Re: Dealing With Screen Readers Ignoring placeholder attributes
← Previous message | Next message →
From the W3C HTML 5 Recommendation:
The placeholder attribute
<https://www.w3.org/TR/html5/sec-forms.html#the-placeholder-attribute>
...
The placeholder attribute should not be used as a replacement for a label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label>. For a longer
hint or other advisory text, place the text next to the control.
Use of the placeholder attribute as a replacement for a label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label> can reduce
the accessibility and usability of the control for a range of users
including older users and users with cognitive, mobility, fine motor skill
or vision impairments. While the hint given by the control's label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label> is shown at
all times, the short hint given in the placeholder attribute is only shown
before the user enters a value. Furthermore, placeholder text may be
mistaken for a pre-filled value, and as commonly implemented the default
color of the placeholder text provides insufficient contrast and the lack
of a separate visible label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label> reduces the
size of the hit region available for setting focus on the control.
So... the @label value IS NOT supposed to be used for labeling a form
control, and support across screen readers for that feature is inconsistent
and non-standard. You might want to investigate aria-label here, to take
advantage of the fact that ARIA over-rides other semantics:
<label for="id">Telephone Number</label> <input type="text" name="phone"
autocomplete="tel" aria-label="telephone number, in format XXX dash XXX
dash XXXX" id="tel">
HTH
JF
On Tue, Jun 5, 2018 at 8:10 PM, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> I noticed that if a form field contains a label tag and a placeholder
> attribute that both NVDA and JAWS omit the placeholder information. What is
> the best way to ensure that screen readers report the information in the
> placeholder if we want to communicate formatting information. For example,
> a phone number format or password rules piece of instruction? I want to
> cover for situations where screen real estate is limited. I alwo want
> people who are sighted to benefit from the helpful information.
>
> Thanks.
>
> Jim
>
>
>
> =========> Jim Homme
> Product Manager
> Digital Accessibility
> Bender Consulting Services
> 412-787-8567
> https://www.benderconsult.com/our%20services/hightest-
> accessible-technology-solutions
> People with disabilities, access job openings at
> https://www.benderconsult.com/careers/job-openings
>
>
> > > > >
--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
= EMAIL ADDRESS REMOVED =
Advancing the mission of digital accessibility and inclusion
From: Jonathan Avila
Date: Wed, Jun 06 2018 6:51AM
Subject: Re: Dealing With Screen Readers Ignoring placeholderattributes
← Previous message | Next message →
There is also the aria-placeholder property<https://labs.levelaccess.com/index.php/ARIA_placeholder_property> but the support is limited. With JAWS 2018 it appears to only be announced when there is no content in the field.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office
Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of John Foliot
Sent: Wednesday, June 06, 2018 8:43 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Dealing With Screen Readers Ignoring placeholder attributes
From the W3C HTML 5 Recommendation:
The placeholder attribute
<https://www.w3.org/TR/html5/sec-forms.html#the-placeholder-attribute>
...
The placeholder attribute should not be used as a replacement for a label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label>. For a longer
hint or other advisory text, place the text next to the control.
Use of the placeholder attribute as a replacement for a label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label> can reduce
the accessibility and usability of the control for a range of users
including older users and users with cognitive, mobility, fine motor skill
or vision impairments. While the hint given by the control's label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label> is shown at
all times, the short hint given in the placeholder attribute is only shown
before the user enters a value. Furthermore, placeholder text may be
mistaken for a pre-filled value, and as commonly implemented the default
color of the placeholder text provides insufficient contrast and the lack
of a separate visible label
<https://www.w3.org/TR/html5/sec-forms.html#elementdef-label> reduces the
size of the hit region available for setting focus on the control.
So... the @label value IS NOT supposed to be used for labeling a form
control, and support across screen readers for that feature is inconsistent
and non-standard. You might want to investigate aria-label here, to take
advantage of the fact that ARIA over-rides other semantics:
<label for="id">Telephone Number</label> <input type="text" name="phone"
autocomplete="tel" aria-label="telephone number, in format XXX dash XXX
dash XXXX" id="tel">
HTH
JF
On Tue, Jun 5, 2018 at 8:10 PM, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> I noticed that if a form field contains a label tag and a placeholder
> attribute that both NVDA and JAWS omit the placeholder information. What is
> the best way to ensure that screen readers report the information in the
> placeholder if we want to communicate formatting information. For example,
> a phone number format or password rules piece of instruction? I want to
> cover for situations where screen real estate is limited. I alwo want
> people who are sighted to benefit from the helpful information.
>
> Thanks.
>
> Jim
>
>
>
> =========
> Jim Homme
> Product Manager
> Digital Accessibility
> Bender Consulting Services
> 412-787-8567
> https://www.benderconsult.com/our%20services/hightest-
> accessible-technology-solutions
> People with disabilities, access job openings at
> https://www.benderconsult.com/careers/job-openings
>
>
>
> > > >
--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
= EMAIL ADDRESS REMOVED =
Advancing the mission of digital accessibility and inclusion
From: Jeevan Reddy
Date: Wed, Jun 06 2018 7:06AM
Subject: Re: Dealing With Screen Readers Ignoring placeholder attributes
← Previous message | Next message →
Jim,
Capture the placeholder into a <span class="screenoff"> and reference it
using aria-labelledby
Best
Jeevan.
On Wed, Jun 6, 2018, 5:40 AM Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> I noticed that if a form field contains a label tag and a placeholder
> attribute that both NVDA and JAWS omit the placeholder information. What is
> the best way to ensure that screen readers report the information in the
> placeholder if we want to communicate formatting information. For example,
> a phone number format or password rules piece of instruction? I want to
> cover for situations where screen real estate is limited. I alwo want
> people who are sighted to benefit from the helpful information.
>
> Thanks.
>
> Jim
>
>
>
> =========> Jim Homme
> Product Manager
> Digital Accessibility
> Bender Consulting Services
> 412-787-8567
>
> https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> People with disabilities, access job openings at
> https://www.benderconsult.com/careers/job-openings
>
>
> > > > >
From: Maxability A11Y
Date: Wed, Jun 06 2018 7:35AM
Subject: Re: Dealing With Screen Readers Ignoring placeholder attributes
← Previous message | Next message →
I know this is slightly off topic but you may consider making placeholder
accessible. Here is an article that talks on how to make placeholder
accessible.
http://www.maxability.co.in/2016/03/accessible-solution-for-html5-placeholders/
If you have not already looked at other related accessibility problems
associated with placeholders, here is an article about the accessibility
problems with placeholder.
http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
Hope it helps.
On Wed, Jun 6, 2018 at 6:36 PM, Jeevan Reddy < = EMAIL ADDRESS REMOVED = >
wrote:
> Jim,
> Capture the placeholder into a <span class="screenoff"> and reference it
> using aria-labelledby
> Best
> Jeevan.
>
> On Wed, Jun 6, 2018, 5:40 AM Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hi,
> > I noticed that if a form field contains a label tag and a placeholder
> > attribute that both NVDA and JAWS omit the placeholder information. What
> is
> > the best way to ensure that screen readers report the information in the
> > placeholder if we want to communicate formatting information. For
> example,
> > a phone number format or password rules piece of instruction? I want to
> > cover for situations where screen real estate is limited. I alwo want
> > people who are sighted to benefit from the helpful information.
> >
> > Thanks.
> >
> > Jim
> >
> >
> >
> > =========> > Jim Homme
> > Product Manager
> > Digital Accessibility
> > Bender Consulting Services
> > 412-787-8567
> >
> > https://www.benderconsult.com/our%20services/hightest-
> accessible-technology-solutions
> > People with disabilities, access job openings at
> > https://www.benderconsult.com/careers/job-openings
> >
> >
> > > > > > > > > >
> > > > >
From: Sailesh Panchang
Date: Thu, Jun 14 2018 12:36PM
Subject: Re: Dealing With Screen Readers Ignoring placeholder attributes
← Previous message | No next message
Hello Jim,
If possible, use implicit labelling instead of explicit labelling.
That should solve your problem.
In Firefox, JAWS and NVDA read the input text and label + placeholder.
In Chrome the label+placeholder are read only when the field is empty.
Thanks,
Sailesh
On 6/5/18, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> I noticed that if a form field contains a label tag and a placeholder
> attribute that both NVDA and JAWS omit the placeholder information. What is
> the best way to ensure that screen readers report the information in the
> placeholder if we want to communicate formatting information. For example, a
> phone number format or password rules piece of instruction? I want to cover
> for situations where screen real estate is limited. I alwo want people who
> are sighted to benefit from the helpful information.
>
> Thanks.
>
> Jim
>
>
>
> =========> Jim Homme
> Product Manager
> Digital Accessibility
> Bender Consulting Services
> 412-787-8567
> https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> People with disabilities, access job openings at
> https://www.benderconsult.com/careers/job-openings
>
>
> > > > >
--
Sailesh Panchang
Principal Accessibility Consultant
Deque Systems Inc
Phone 703-225-0380 ext 105
Mobile: 571-344-1765