3

508 Standards, Section 1194.22 (a) states that:

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

For a searchbox, using

<input type="text" alt="Search" value="" tabindex="1" name="s" id="s" />

passes the 508 Standards, but doesn't pass HTML 5 validation.

Is using <label> tags the only way of passing both the 508 Standards and the HTML 5 validation, because I would like to avoid having an unnecessary <label> tag?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Kevin Ji
  • 10,479
  • 4
  • 40
  • 63
  • Why do you think the label tag is unnecessary, how else are you providing the information? The `alt` attribute only works on `img` elements, it's not going to provide any information to screen readers as far as I'm aware. – robertc Mar 28 '11 at 15:18
  • The label tag is unnecessary extra space, and the search button already provides the word "Search." – Kevin Ji Mar 28 '11 at 19:02
  • Is your search button before the input field? How is a screen reader user to know this is a search field? – robertc Mar 28 '11 at 22:49
  • The search button is after the input field. Essentially, it is the search box followed immediately by the search button on the same line. – Kevin Ji Mar 29 '11 at 01:34

1 Answers1

4

I think you need to page more attention to 1194.22 (n) in this situation. If you really, desperately need to do without a separate label you could try something like this:

<input type="search" value="" tabindex="1" name="s" id="s" />
<label for="s"><input type="submit" value="search"></label>

But I would strongly recommend at least trying this out in a screenreader (NVDA is free, JAWS can be used for 40 minutes on a 'free trial') or, even better, setting up a test page and getting some screen reader users to try it.

Alternatively you could investigate aria-labelledby and see if that allows you to fit in your label more naturally.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • HTML 5 doesn't validate; it says something about the label needing to have the same id as the inner input. – Kevin Ji Mar 29 '11 at 22:07
  • @mc10 if validation is more of a concern than whether or not it's actually accessible, you could try something [like this](http://jsfiddle.net/Yhs9E/1/) – robertc Mar 29 '11 at 22:39