Is this correct usage of <label>?:

<h5><label for="sp-q"><img src="search.png" alt="Search"></label></h5>
<form method="get" action="http://search.atomz.com/search/">
<div>
<input name="sp-q" id="sp-q">
<input type="submit" value="Search this site">

[...]

</div>
</form>

The accessibility checker cynthiasays.com doesn't accept this as
correct, Nick's Accessibility Valet doesn't complain.

--
Spartanicus

Spartanicus <me@privacy.net> writes:[color=blue]
> Is this correct usage of <label>?:[/color]

Aside: I'm impressed if it's correct use of <h5> - what document are
you doing that has that many heading levels?
[color=blue]
> <h5><label for="sp-q"><img src="search.png" alt="Search"></label></h5>
> <form method="get" action="http://search.atomz.com/search/">
> <div>
> <input name="sp-q" id="sp-q">
> <input type="submit" value="Search this site">
>
> [...]
>
> </div>
> </form>
>
> The accessibility checker cynthiasays.com doesn't accept this as
> correct, Nick's Accessibility Valet doesn't complain.[/color]

I think that's probably okay, at least as far as use of <label>
goes. In practical terms, try using a modern browser and clicking on
the image - see if it focuses the input.

I'd be tempted to put the <h5> inside the <form> and possibly inside
the <div>, too.

Obviously you'll need to make sure that the image is accessible
(sensibly large font size, good colour contrast, etc).

--
Chris

"Spartanicus" <me@privacy.net> wrote in message
news:qfe0e0hgup24lnaj91644plp2811v3192c@news.spart anicus.utvinternet.ie...[color=blue]
> Is this correct usage of <label>?:
>
> <h5><label for="sp-q"><img src="search.png" alt="Search"></label></h5>
> <form method="get" action="http://search.atomz.com/search/">
> <div>
> <input name="sp-q" id="sp-q">
> <input type="submit" value="Search this site">
>
> [...]
>
> </div>
> </form>
>
> The accessibility checker cynthiasays.com doesn't accept this as
> correct, Nick's Accessibility Valet doesn't complain.[/color]

In terms of valid HTML, the LABEL element can go anywhere any form control
can go except inside another LABEL. This means, in turn, that it can go
anywhere *any* inline code can go except inside a BUTTON.

I don't see anything in the spec that requires the LABEL to be physically
inside the form that contains the control to which it applies. Since it's
not a control--it doesn't have a value that gets posted with the form--I
expect that it doesn't matter. But I suggest checking out what a few
browsers actually do in such a case.