WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Placeholder

for

From: Bim Egan
Date: Mar 16, 2019 12:41AM

An alternative to placeholders that may be worth looking at is accessible
floating labels. This uses CSS and Jquery to position the explicit label
over the text box so that it *looks* like a placeholder. The difference is
that when the field receives focus the label doesn't disappear, it moves up
above the field and remains visible. It's explained in the following post:
https://allthingssmitty.com/2016/09/25/accessible-floating-labels/

So the designers get the clean look they want and users get the permanent
access to the label they need.

The example in the blog post does have colour contrast issues, both when
it's showing like a placeholder and when it moves up to its permanent
position, Otherwise it seems to work in several browsers. Not tested on
mobile though.

Bim

-------------
Bim Egan
Skype phone: 01223 96 87 96
Personal Email: <EMAIL REMOVED>
Skype ID: bim.accessequals

Coordinator: Describe Online
W: www.describe-online.com
E: <EMAIL REMOVED>
----------------------------------------
Partner: AccessEquals
W: www.accessequals.com
E: <EMAIL REMOVED>
-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
Of Birkir R. Gunnarsson
Sent: 16 March 2019 05:53
To: WebAIM Discussion List
Subject: Re: [WebAIM] Placeholder

It is easy with Jaws to see the attribute of a formfield )just map display
advanced element information to a keyboard combination in the Jaws keyboard
manager for your browsers, (this is explained on http://www.bats.fyi).
Once you have, focus the element with Jaws running, press the keyboard
combiantion and check if it has a placeholder attribute )the attributes are
listed alphabetically so it is A screen reader should not allow the vaue of
the placeholder attribute as the accesible name of a form field if it has
visually disappeared, that is a bug, and a serious one at that.



On 3/12/19, Yoandry Collazo < <EMAIL REMOVED> > wrote:
> Hi, I'm not an expert, I hope this helps you.
>
>
> 1.
>
> Placeholders
>
> According to HTML5 specifications
> <https://developer.paciellogroup.com/blog/2011/02/html5-accessibility-
> chops-the-placeholder-attribute/>,
> The placeholder
> <https://www.w3.org/TR/html/sec-forms.html#the-placeholder-attribute>
> attribute
> should not be used as an alternative to a label
> <https://www.w3.org/TR/html/sec-forms.html#the-label-element>.
>
> Placeholder text disappears when a text box receives focus:
>
> -
>
> For keyboard users, this can be problematic
>
>
<http://mentalized.net/journal/2010/08/05/dont_use_placeholder_text_as_label
s/>
> as they must read ahead of current focus when filling in forms.
> -
>
> Users, especially those with memory impairments will not have the text
> label available for reference at the same time as filling in a field.
>
> Other issues with placeholders
>
> -
>
> Users may think a text field is already filled in and skip over it.
Data
> suggests
>
>
<http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-box
es-in-web-forms.php>
> that this can be an issue.
> -
>
> If the placeholder hint text is useful information it should be
> available while the user is filling in the field.
>
>
> On Mon, Mar 11, 2019 at 3:01 PM Eilana Benish < <EMAIL REMOVED> >
> wrote:
>
>> hello, my name is Eilana from Israel. Currently, I work with
>> organizations required to make their websites accessible in Israel.
>>
>> We are working on developing a new website.
>>
>> We have a very serious disagreement about the place-holder as a
>> method to label forms fields.
>>
>> I know that the popular screen reader reads the place holder. But
>> this is mey not be accessible to users with cognitive disabilities.
>>
>> The development team thought otherwise and implemented the place holder.
>> When I told them to change to standard labels - I got the answer that
>> using the Placeholder is WCAG 2 compliant.
>>
>> I have also tried to find information on the W3C accessibility
>> resources - Without success.
>>
>> So, is the place holder WCAG 2 compliant
>>
>> And what the WCAG 2 working group has to say about that topic?
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> --
>>
>> *?????? ??, ????? ????, ????? ?????? ????? (2200)*
>>
>> *????? ?????? ????????: ?????? ??????? ??????? ??????????? ????*
>>
>> *A.D.N: Accessible digital knowledge 2009 - 2019*
>>
>> *????? 050-7100367 ???"? ** <EMAIL REMOVED> *
>> < <EMAIL REMOVED> > *??? ???????? ?????? ??????? ???????
>> ??????????? ????*
>> <https://adn-accesstime.com/2018/12/12/%d7%a9%d7%99%d7%9e%d7%95%d7%a9
>> -%d7%93%d7%a4%d7%95%d7%a1%d7%99%d7%9d-%d7%90%d7%a4%d7%9c%d7%99%d7%9d-
>> %d7%91%d7%90%d7%aa%d7%a8%d7%99-%d7%90%d7%99%d7%a0%d7%98%d7%a8%d7%a0%d
>> 7%98/>
>> * |
>> **IOS*
>> <https://itunes.apple.com/app/id1438649378?fbclid=IwAR2xQt2j9TXnIBdOV
>> z1oY3T0oBPTepgWndQIlruALWr4q7T4gTZ1mUJAmCQ>
>> * |
>> **????????*
>> <https://play.google.com/store/apps/details?id=com.adn_accesstime.pre
>> sspadnews&fbclid=IwAR2KslNcOzRqC8zD_Dpr9qI5EvHFjKAQK2-lCwFoMLVgVHw-M3
>> 4OZIuUTDo>
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
http://webaim.org/discussion/archives
---
This email has been checked for viruses by AVG.
https://www.avg.com