WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dealing With Screen Readers Ignoring placeholder attributes

for

From: John Foliot
Date: Jun 6, 2018 6:43AM

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

Advancing the mission of digital accessibility and inclusion