Label outside of form

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 (AT) privacy (DOT) net> writes:

Is this correct usage of <label>?:

Aside: I'm impressed if it's correct use of <h5> - what document are
you doing that has that many heading levels?

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.

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 (AT) privacy (DOT) net> wrote

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.

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.