Form element does not add label

Question

I want to have a label around my form element so that it is accessible, but writing it this way does not pass Firefox's WAVE accessible tool bar, can someone see what is wrong with it?

here is my code:

<div style="width:895px; max-width:100%; text-align:right;">
<label for="select document type">
Select: 
<select id="view" onchange="toggleElement(this)">
<option value="All">All</option>
<option value="Tenant">A</option>
<option value="Landlord">B</option>
</select>
</label>
</div>

Answer 1

It is failing WAVE validation because you've misunderstood what the for attribute on <label> element is for.

If you wrap a <label> around the control, then the control is automatically associated with that label, and you should not put a for attribute. This method is outdated, and it should not be used, but it still can be done.

If you do NOT wrap the control within the <label> then the for attribute should be the id of the control that it is associated with.

For instance...

<label>
  Select: 
  <select id="view">
    ...
  </select>
</label>

OR...

<label for="view">
  Select: 
</label>
<select id="view">
  ...
</select>

You appear to be using for as if it will become a tooltip message (if this is what you meant, then use a title attribute instead). Please note, that the title attribute is sometimes read instead of the <label>, so it can cause confusion.

Answer 2

I don't see why you would have to wrap your label around your element to make it accessible. But you can do either way: wrapping around, or have a for="" matching the id of your element (your select).

So if you wrap around, you don't need the for=, so something like this should work:

<div style="width:895px; max-width:100%; text-align:right;">
    <label>
        Select: 
        <select id="view" onchange="toggleElement(this)">
            <option value="All">All</option>
            <option value="Tenant">A</option>
            <option value="Landlord">B</option>
        </select>
    </label>
</div>

But you could also use a correct for instead of wrapping. The for must match the id in that case:

<div style="width:895px; max-width:100%; text-align:right;">
    <label for="view">
        Select: 
    </label>
    <select id="view" onchange="toggleElement(this)">
        <option value="All">All</option>
        <option value="Tenant">A</option>
        <option value="Landlord">B</option>
    </select>
</div>

Edit: you can see what was wrong by validating your html: http://validator.nu/

Error: Bad value select document type for attribute for on element label: An ID must not contain whitespace.

:right;">↩<label for="select document type">↩Selec

Error: Any select descendant of a label element with a for attribute must have an ID value that matches that for attribute.

↩Select: ↩<select id="view" onchange="toggleElement(this)">↩<opti

Error: The for attribute of the label element must refer to a form control.

:right;">↩<label for="select document type">↩Selec

The 3 errors mentioned above are all because of the bad for attribute.