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.
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.
> 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.
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.
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?
> 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.
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 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.
> 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 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.
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
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.zaeffe...@googlemail.com>
> To: <jquery-a11y@googlegroups.com>
> Sent: Thursday, February 26, 2009 3:21 PM
> Subject: Re: Watermark a11y
> 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 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.
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.
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.zaeffe...@googlemail.com>
> To: <jquery-a11y@googlegroups.com>
> Sent: Thursday, February 26, 2009 4:48 PM
> Subject: Re: Watermark a11y
> 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.zaeffe...@googlemail.com>
>> To: <jquery-a11y@googlegroups.com>
>> Sent: Thursday, February 26, 2009 3:21 PM
>> Subject: Re: Watermark a11y
>> 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 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.
----- Original Message ----- From: "Jörn Zaefferer" <joern.zaeffe...@googlemail.com>
To: <jquery-a11y@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.
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.zaeffe...@googlemail.com>
> To: <jquery-a11y@googlegroups.com>
> Sent: Thursday, February 26, 2009 4:48 PM
> Subject: Re: Watermark a11y
> 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.zaeffe...@googlemail.com>
>> To: <jquery-a11y@googlegroups.com>
>> Sent: Thursday, February 26, 2009 3:21 PM
>> Subject: Re: Watermark a11y
>> 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 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 >>> 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.
