WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: making search input field accessible without a <label>

for

From: Chaals McCathie Nevile
Date: Aug 25, 2015 8:20AM

On Mon, 24 Aug 2015 23:11:30 +0200, Léonie Watson
< <EMAIL 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 REMOVED> - - - Find more at http://yandex.com