Watermark a11y

[Jörn Zaefferer]

Hi,

I'd like to get some input on this planning document:
https://jqueryui.pbwiki.com/Watermark

Specifically on the accessibility of the two common approaches for
implementing a watermark: Either modifying the value of an input
field, eg. value="search" class="watermark", and removing that when
the field gets focus. Or positioning a label-element over the input
field, hiding it when the field gets focus.

Thanks
Jörn

[Chris Hoffman]

Jörn,

If the purpose of the label element is, semantically, to label the
field, and that is exactly what the watermark is doing, then it's
pretty clear to me that the watermark should be a positioned label.
Furthermore, if you are building a form properly, then you will have
the label elements already (maybe positioned off screen-left if you
are hiding them), so repeating the same text in the value of the input
fields would be unnecessarily redundant.

Positioned labels will also degrade gracefully if the javascript fails
to load for some reason.

Regards,

Chris

[clown]

On Feb 20, 2:49 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:

> Hi,
>
> I'd like to get some input on this planning document:https://jqueryui.pbwiki.com/Watermark

> ...
> Jörn

I have to think about this some more, but this sounds like a good
place to use the aria-label attribute (http://www.w3.org/WAI/PF/aria/
#aria-label).

The aria spec favours using aria-labelledby over aria-label (http://
www.w3.org/WAI/PF/aria/#aria-labelledby). Note that aria-labelledby
references text that is "...visible on screen" and will not change,
e.g., text in a <label> element. But, the display in the watermark
example does change (to the search text). Even so, the contents of
the <label> doesn't; it is hidden. Hiding it can be done by
positioning it off-screen, as Chris suggested, or setting its display
to "none", or, perhaps, its visibility to "hidden".

That sounds relatively complicated. Hence, this seems to be a good
argument for using the aria-label attribute. The text doesn't change,
it can be copied into the search field as necessary, and there's no
need to fiddle around with showing/hiding some <label> element.

[Jörn Zaefferer]

I've written a first experimental implementation using labels:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/watermark-test.html

I agree with Chris' arguments for using a label element. Also the
technical implementation is quite clean and doesn't require
workarounds for handling form submits or password fields. It also
enables animation to hide/show the watermark. The demo uses fades, but
slides are quite interesting, too.

I'm not sure about handling ARIA. A label element with a proper
for-attribute seems to be fine to me, is there any value added by
adding aria-label or aria-labelledby (or both) attributes?

Jörn

[Rich Caloggero]

Not sure what this is supposed to show here, but when testing with a screen
reader, I do hear a bunch of fields labeled with the string "search".

Sorry for my ignorance, but what exactly is a watermark in this context?

-- Rich

----- Original Message -----
From: "Jörn Zaefferer" <joern.z...@googlemail.com>
To: <jquer...@googlegroups.com>
Sent: Thursday, February 26, 2009 3:21 PM
Subject: Re: Watermark a11y



I've written a first experimental implementation using labels:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/watermark-test.html

I agree with Chris' arguments for using a label element. Also the
technical implementation is quite clean and doesn't require
workarounds for handling form submits or password fields. It also
enables animation to hide/show the watermark. The demo uses fades, but
slides are quite interesting, too.

I'm not sure about handling ARIA. A label element with a proper
for-attribute seems to be fine to me, is there any value added by
adding aria-label or aria-labelledby (or both) attributes?

Jörn

On Mon, Feb 23, 2009 at 5:03 PM, clown <cl...@utoronto.ca> wrote:
>
>
>

> On Feb 20, 2:49 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>

> wrote:
>> Hi,
>>
>> I'd like to get some input on this planning
>> document:https://jqueryui.pbwiki.com/Watermark
>> ...

>> Jörn

>
> I have to think about this some more, but this sounds like a good
> place to use the aria-label attribute (http://www.w3.org/WAI/PF/aria/
> #aria-label).
>
> The aria spec favours using aria-labelledby over aria-label (http://

> www.w3.org/WAI/PF/aria/#aria-labelledby). Â Note that aria-labelledby

> references text that is "...visible on screen" and will not change,

> e.g., text in a <label> element. Â But, the display in the watermark
> example does change (to the search text). Â Even so, the contents of
> the <label> doesn't; it is hidden. Â Hiding it can be done by

> positioning it off-screen, as Chris suggested, or setting its display
> to "none", or, perhaps, its visibility to "hidden".
>

> That sounds relatively complicated. Â Hence, this seems to be a good
> argument for using the aria-label attribute. Â The text doesn't change,

[Jörn Zaefferer]

I've created an actual demo:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/demo.html

This should give you a better idea.

Jörn

[Rich Caloggero]

Hmm, the watermark must be a purely visual effect, because all the screen
reader shows me is the login form. As each field gains focus, I hear what
you might expect:

* the text of the label is spoken, then the value (if any) of the actual
input element is read
* the text inside the legend is spoken before the type and value of each
field

I cannot see the screen at all, so I'm just kind of curious what this
watermark thing is supposed to accomplish; what am I missing here?
-- rich

----- Original Message -----
From: "Jörn Zaefferer" <joern.z...@googlemail.com>
To: <jquer...@googlegroups.com>
Sent: Thursday, February 26, 2009 4:48 PM
Subject: Re: Watermark a11y

I've created an actual demo:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/demo.html

This should give you a better idea.

Jörn

On Thu, Feb 26, 2009 at 10:13 PM, Rich Caloggero <r...@mit.edu> wrote:
>
> Not sure what this is supposed to show here, but when testing with a
> screen
> reader, I do hear a bunch of fields labeled with the string "search".
>
> Sorry for my ignorance, but what exactly is a watermark in this context?
>
> -- Rich
>
>
> ----- Original Message -----
> From: "Jörn Zaefferer" <joern.z...@googlemail.com>
> To: <jquer...@googlegroups.com>
> Sent: Thursday, February 26, 2009 3:21 PM
> Subject: Re: Watermark a11y
>
>
>
> I've written a first experimental implementation using labels:
> http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/watermark-test.html
>
> I agree with Chris' arguments for using a label element. Also the
> technical implementation is quite clean and doesn't require
> workarounds for handling form submits or password fields. It also
> enables animation to hide/show the watermark. The demo uses fades, but
> slides are quite interesting, too.
>
> I'm not sure about handling ARIA. A label element with a proper
> for-attribute seems to be fine to me, is there any value added by
> adding aria-label or aria-labelledby (or both) attributes?
>

> JÃf¶rn

>
> On Mon, Feb 23, 2009 at 5:03 PM, clown <cl...@utoronto.ca> wrote:
>>
>>
>>

>> On Feb 20, 2:49 pm, JÃf¶rn Zaefferer <joern.zaeffe...@googlemail.com>

>> wrote:
>>> Hi,
>>>
>>> I'd like to get some input on this planning
>>> document:https://jqueryui.pbwiki.com/Watermark
>>> ...

>>> JÃf¶rn

>>
>> I have to think about this some more, but this sounds like a good
>> place to use the aria-label attribute (http://www.w3.org/WAI/PF/aria/
>> #aria-label).
>>
>> The aria spec favours using aria-labelledby over aria-label (http://

>> www.w3.org/WAI/PF/aria/#aria-labelledby). Ã, Note that aria-labelledby

>> references text that is "...visible on screen" and will not change,

>> e.g., text in a <label> element. Ã, But, the display in the watermark
>> example does change (to the search text). Ã, Even so, the contents of
>> the <label> doesn't; it is hidden. Ã, Hiding it can be done by

>> positioning it off-screen, as Chris suggested, or setting its display
>> to "none", or, perhaps, its visibility to "hidden".
>>

>> That sounds relatively complicated. Ã, Hence, this seems to be a good
>> argument for using the aria-label attribute. Ã, The text doesn't change,

[Jörn Zaefferer]

Seems like this is the right implementation, as it really is a purely
visual effect. It just moves a text label above the input field, which
is useful in space-constrained layouts.

Here is an implementation that modifies the input to "hold" the label:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/index.html
Probably way more obtrusive, while the visual effect is very similar.

Jörn

[Rich Caloggero]

Thanx for the explanation.

In the demo at:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/index.html
the first password field doesn't gain focus when tabbing from the second
field labeled "with initial value"; very odd.
Otherwise, it works as well as the previous example.

-- Rich


----- Original Message -----
From: "Jörn Zaefferer" <joern.z...@googlemail.com>
To: <jquer...@googlegroups.com>
Sent: Thursday, February 26, 2009 6:29 PM
Subject: Re: Watermark a11y

Seems like this is the right implementation, as it really is a purely
visual effect. It just moves a text label above the input field, which
is useful in space-constrained layouts.

Here is an implementation that modifies the input to "hold" the label:
http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/index.html
Probably way more obtrusive, while the visual effect is very similar.

Jörn

On Fri, Feb 27, 2009 at 12:25 AM, Rich Caloggero <r...@mit.edu> wrote:
>
> Hmm, the watermark must be a purely visual effect, because all the screen
> reader shows me is the login form. As each field gains focus, I hear what
> you might expect:
>
> * the text of the label is spoken, then the value (if any) of the actual
> input element is read
> * the text inside the legend is spoken before the type and value of each
> field
>
> I cannot see the screen at all, so I'm just kind of curious what this
> watermark thing is supposed to accomplish; what am I missing here?
> -- rich
>
> ----- Original Message -----
> From: "Jörn Zaefferer" <joern.z...@googlemail.com>
> To: <jquer...@googlegroups.com>
> Sent: Thursday, February 26, 2009 4:48 PM
> Subject: Re: Watermark a11y
>
>
>
> I've created an actual demo:
> http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/demo.html
>
> This should give you a better idea.
>

> JÃf¶rn

>
> On Thu, Feb 26, 2009 at 10:13 PM, Rich Caloggero <r...@mit.edu> wrote:
>>
>> Not sure what this is supposed to show here, but when testing with a
>> screen
>> reader, I do hear a bunch of fields labeled with the string "search".
>>
>> Sorry for my ignorance, but what exactly is a watermark in this context?
>>
>> -- Rich
>>
>>
>> ----- Original Message -----
>> From: "JÃf¶rn Zaefferer" <joern.z...@googlemail.com>
>> To: <jquer...@googlegroups.com>
>> Sent: Thursday, February 26, 2009 3:21 PM
>> Subject: Re: Watermark a11y
>>
>>
>>
>> I've written a first experimental implementation using labels:
>> http://jqueryjs.googlecode.com/svn/trunk/plugins/searchField/watermark-test.html
>>
>> I agree with Chris' arguments for using a label element. Also the
>> technical implementation is quite clean and doesn't require
>> workarounds for handling form submits or password fields. It also
>> enables animation to hide/show the watermark. The demo uses fades, but
>> slides are quite interesting, too.
>>
>> I'm not sure about handling ARIA. A label element with a proper
>> for-attribute seems to be fine to me, is there any value added by
>> adding aria-label or aria-labelledby (or both) attributes?
>>

>> JÃffÃ,¶rn

>>
>> On Mon, Feb 23, 2009 at 5:03 PM, clown <cl...@utoronto.ca> wrote:
>>>
>>>
>>>

>>> On Feb 20, 2:49 pm, JÃffÃ,¶rn Zaefferer

>>> <joern.zaeffe...@googlemail.com>
>>> wrote:
>>>> Hi,
>>>>
>>>> I'd like to get some input on this planning
>>>> document:https://jqueryui.pbwiki.com/Watermark
>>>> ...

>>>> JÃffÃ,¶rn

>>>
>>> I have to think about this some more, but this sounds like a good
>>> place to use the aria-label attribute (http://www.w3.org/WAI/PF/aria/
>>> #aria-label).
>>>
>>> The aria spec favours using aria-labelledby over aria-label (http://

>>> www.w3.org/WAI/PF/aria/#aria-labelledby). Ãf, Note that aria-labelledby

>>> references text that is "...visible on screen" and will not change,

>>> e.g., text in a <label> element. Ãf, But, the display in the watermark
>>> example does change (to the search text). Ãf, Even so, the contents of
>>> the <label> doesn't; it is hidden. Ãf, Hiding it can be done by

>>> positioning it off-screen, as Chris suggested, or setting its display
>>> to "none", or, perhaps, its visibility to "hidden".
>>>

>>> That sounds relatively complicated. Ãf, Hence, this seems to be a good
>>> argument for using the aria-label attribute. Ãf, The text doesn't