E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Angela French
Date: Mon, Aug 24 2015 2:49PM
Subject: making search input field accessible without a <label>
No previous message | Next message →

I am trying to validate to WCAG 2.0 AA. I'm getting the error that I am missing an associated label on my search field.

I have tried aria-label="search" and title="search" but neither one kept the error from being thrown. Are these not true solutions? Or must I have a <label> tag?

Thanks

Angela French
Internet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Léonie Watson
Date: Mon, Aug 24 2015 3:11PM
Subject: Re: making search input field accessible without a <label>
← Previous message | Next message →

> From: WebAIM-Forum On Behalf Of Angela French
> Sent: 24 August 2015 21:50
> I am trying to validate to WCAG 2.0 AA. I'm getting the error that I am missing
> an associated label on my search field.
>
> I have tried aria-label="search" and title="search" but neither one kept the
> error from being thrown. Are these not true solutions? Or must I have a
> <label> tag?

These are both valid techniques. Technique ARIA14 describes how to use aria-label to provide a label [1], and technique H65 describes how to use the title attribute [2].

The proviso (in both cases) being that the purpose of the field is apparent to sighted users based on context. The nearby search button being the visible cue in this situation.

Sounds like it might be worth filing a bug with the vendors of the checking tool you're using though?

HTH.
Léonie.
[1] http://www.w3.org/TR/WCAG20-TECHS/aria#ARIA14
[2] http://www.w3.org/TR/WCAG20-TECHS/H65.html

From: Angela French
Date: Mon, Aug 24 2015 3:23PM
Subject: Re: making search input field accessible without a <label>
← Previous message | Next message →

Actually, I didn't realize/forgot there were two search fields on the page and so I was seeing the error for the other one. The fact that there are two search fields is another issue.

From: Angela French
Date: Mon, Aug 24 2015 3:27PM
Subject: Re: making search input field accessible without a <label>
← Previous message | Next message →

Actually, I take that back. I have added aria-label="search" to both form elements and it is still failing on the Achecker. Still shows error about missing an associated label. Is the AChecker not so good to use?

From: Birkir R. Gunnarsson
Date: Mon, Aug 24 2015 3:37PM
Subject: Re: making search input field accessible without a <label>
← Previous message | Next message →

You may want to switch to an accessibility checker that understands
and incorporates ARIA.
Also make sure the checker is checking the DOM/accessibility tree, not
just the static html.
I can't speak for aChecker specifically, but last time I looked it
appeared not to have been updated since its 2008 release.
You can view a decent (but not entirely compirhensive) list of tools
here: http://www.w3.org/WAI/ER/tools/



On 8/24/15, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Actually, I take that back. I have added aria-label="search" to both form
> elements and it is still failing on the Achecker. Still shows error about
> missing an associated label. Is the AChecker not so good to use?
>
>
>

From: Chaals McCathie Nevile
Date: Tue, Aug 25 2015 8:20AM
Subject: Re: making search input field accessible without a <label>
← Previous message | No next message

On Mon, 24 Aug 2015 23:11:30 +0200, Léonie Watson
< = EMAIL ADDRESS REMOVED = > wrote:

>> From: WebAIM-Forum On Behalf Of Angela French
>> Sent: 24 August 2015 21:50
>> I am trying to validate to WCAG 2.0 AA. I'm getting the error that I
>> am missing an associated label on my search field.
>>
>> I have tried aria-label="search" and title="search" but neither one
>> kept the error from being thrown. Are these not true solutions? Or
>> must I have a <label> tag?
>
> These are both valid techniques. Technique ARIA14 describes how to use
> aria-label to provide a label [1], and technique H65 describes how to
> use the title attribute [2].
>
> The proviso (in both cases) being that the purpose of the field is
> apparent to sighted users based on context. The nearby search button
> being the visible cue in this situation.

Which is worth repeating, because it really is important.

The aria/title thing is fine for screenreader users - who are likely to be
a very small minority of users with vision-related accessibility
requirements. But as Léonie said, it needs to be clear there is a search
box without relying on ARIA.

A blue box with some icon on it may or may not do the job (again, you need
proper alt if you use that) - I am not a fan. And it should be available
in more or less any layout - what WCAG says about zooming 200% is
manifestly insufficient for *accessibility* - as opposed to conformance.

> Sounds like it might be worth filing a bug with the vendors of the
> checking tool you're using though?

Yeah, or two.

cheers

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com