WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: labels on search buttons -- Drupal.org and Beyond

for

From: Birkir R. Gunnarsson
Date: Jan 14, 2014 6:55PM

Greetings!

I am a bit confused here.
The issue title claims the problem is with the search button, but the
code indicates the missing label is on the search input field.
According to the search button on the issue page itself which seems to
suffer from precisely the same problem, (the URL referred to in the
issue description requires a username and password) the html looks
like this:
<input type="submit" class="form-submit" value="Search" name="op"
id="edit-submit">
This is fine, inputs of type submit require the descriptive attribute
to be the value, which it is.

If we are discussing the search text input field, it appears to have
no labelling except html5 placeholder text.
It has its drawbacks and is not recommended as an accessible
alternative to an explicit visible label
see: http://blog.paciellogroup.com/2011/02/html5-accessibility-chops-the-placeholder-attribute/
I agree with the recommendation of that page, add a title attribute
containing the placeholder text to the field.
Yes, it probably causes screen readers to read the label twice, since
the support for the placeholder attribute is on the rise, but it is
better than not reading it at all.
Remember that the title attribute suffers from some of the same issues
as placeholder for sighted keyboard only users, i.e. title only
appears visibly when mouse activated, so an explicit label, either
wrapping the field or using the for=id connection is always most
preferred.
If you want to go the screen reader route specifically aria-label
could be used in place of title, though it is even more restrictive
and screen reader support is still not quite there if we allow
ourselves to look reasonably far back.
In short, either
- wrap the <input> field in a <label> tag with the input field and the
label text
or
- put a title attribute on the <input> tag.

Cheers
Birkir Gunnarsson
Accessibility SME | Deque Systems


On 1/14/14, Jennifer Sutton < <EMAIL REMOVED> > wrote:
> Greetings, WebAIM:
>
> I was looking at this Drupal issue, filed against the Drupal.org site:
>
> <https://drupal.org/node/2083561>https://drupal.org/node/2083561
>
>
> And I wondered if any of you had input/might want to comment on it.
>
> I was trying to do some research to confirm whether the search button
> needs a label, and this WebAIM article made me think it might not,
> i.e. via the heading 2 called Buttons:
> http://webaim.org/techniques/forms/controls
>
> Can anyone let me know and/or comment on the ticket?
> Part of what's confusing me is that when I look at a range of
> accessibility-related sites, some do have the label, while others don't.
>
> Thanks.
>
> Best,
> Jennifer
>
> > > >


--
Work hard. Have fun. Make history.