I was thinking about making use of <label> tags in my validation error summary on a failed form submit and I can't figure out if it is going to get me in trouble down the line. Can anyone think of a good reason to avoid this approach? Usability, functionality, design, or other issues are all helpful.

I really like the idea of clicking a line item in the error list and being jumped to the offending input element, especially in a mobile HTML scenario where vertical orientation is more common and scrolling is a pain. So far the only problem I can find is that labels don't navigate for radio buttons or checkboxes without individual IDs (Clicking a label for a single ID-tagged radio/checkbox element alters its selection). It doesn't make it any worse than no label, though.

Here is a stripped down HTML test sample of this idea (CSS omitted for simplicity).

<div class="validation-errors">
    <p>There was a problem saving your form.</p>
    <ul>
        <li><label for="select1">Select 1 is invalid.</label></li>
        <li><label for="text1">Text 1 is invalid.</label></li>
        <li><label for="textarea1">TextArea 1 is invalid.</label></li>
        <li><label for="radio1">Radio 1 is invalid.</label></li>
        <li><label for="checkbox1">Checkbox 1 is invalid.</label></li>
    </ul>
</div>
<form action="/somewhere">
<fieldset><legend>Some Form</legend>
    <ol>
        <li><label for="select1">select1</label>
            <select id="select1" name="select1">
                <option value="value1">Value 1</option>
                <option value="value2">Value 2</option>
                <option selected="selected" value="value3">Value 3</option>
            </select></li>
        <li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li>
        <li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li>
        <li><ul>
                <li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li>
                <li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li>
                <li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li>
            </ul></li>
        <li><ul>
                <li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li>
                <li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li>
                <li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li>
            </ul></li>
        <li><input type="submit" value="Save &amp; Continue" /></li>
    </ol>
</fieldset>
</form>

The only thing I have added to make the click-capable behavior more obvious is to add a CSS rule for the labels.

.validation-errors label { text-decoration: underline; cursor: pointer; }