WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Angela French
Date: Aug 24, 2015 3:27PM

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?


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Léonie Watson
Sent: Monday, August 24, 2015 2:12 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] making search input field accessible without a <label>

> 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