form label 508 compliance question

Question

Do labels that I create for my form elements need to be in the <form> body? for example would this be compliant:

<div style="display: none;">
    <label for="somename">Some Name</label>
    <!-- more labels.. //-->
</div>

<!-- insert lots of HTML here //-->

<form>
<input type="text" name="somename" id="somename">
<!-- insert more elems here //-->
</form>

Answer 1

In general, the tag doesn't really provide much semantic meaning unless you happen to have more than 1 form on a page, in which case the form tag indicates what form elements it is associated with.

That being said, tags also do not depend on their location because they are tied to 1 and only 1 other element by that element's ID, so no, it doesn't matter where you put it in relation to the element it is a label for, but it is usually good practice to keep the label near the element. I would question the semantic validity of your page if it drifts too far from the element it describes, and making sure your document is semantic is a key component of being accessible. 508 does only require a best-effort for accessibility, but few and far between are the cases where having a semantic document is too hard to do.

Answer 2

No. Ideally they'd be right next to the element they're related to, but they don't have to be. It is true the 508 standards seem vague; some of that is because there's more than 1 level of compliance you can try to match. I always found the Priority 1 508 compliance to be frustratingly low. You could get away with most anything. The two things I always tried to do (at a minimum) were

1. Run the site or pages through a checker
2. Look at the site in a text-only browser

I think the second step made me a better developer of accessible websites than the first because it became obvious that some common things were frustrating (e.g., having a huge block of navigation links at the top of every page without at least some way to skip them). If you're already checking your sites in a screenreader, you're probably ahead of the game.

Answer 3

If anyone is wondering, I installed Thunder screenreader and the format i provided above is perfectaly accessable.

Answer 4

you can also use

<label class="hideme" for="blah">blah blah</blah>

where

.hideme {
    display: none;
}