WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: John Foliot
Date: Jan 15, 2014 8:39AM

Howdy John and Jennifer,

There are a few form input types that do not require pairing with the
<label> element: Submit, Reset, Image and Button. This is because there is a
stronger binding of the intent of those inputs to the larger "form" - these
elements have an additional, built in semantic within the spec:
Submit Button - An enumerated value, with the extra semantic that it
must be the last value selected and initiates form
Image Button - A coordinate, relative to a particular image's size,
with the extra semantic that it must be the last value selected and
initiates form submission
(source: http://www.w3.org/TR/html5/forms.html#the-input-element)

The differentiator for these input types are the value="" string. You can
see this by building the most basic of forms and using the <submit> input:
without a value attribute a screen reader (for example) will still announce
that it is a submit button. Add a value string (value="search", value="go",
etc.) and not only does the value displayed on the visual button (in the
GUI) change, but the value string is now announced by the screen reader.

(To apply an accessible name or accessible description to these elements
other than the defaults, you could also use aria-label, aria-labeledby
and/or aria-describedby as outlined here:

http://www.w3.org/TR/html-aapi/#input-type-button-input-type-submit-and-inpu
t-type-reset
- although this will only manifest to the Accessibility APIs: using
aria-label for example will not change the "value" of the button visually.)

HTH.

JF




>