Jquery 如何使表单标签键盘可访问？

我有一个HTML5表单，它收集一些信息，并在用户提交表单时进行处理。它使用jQuery验证插件来验证输入，如果有错误，它会在屏幕顶部显示一个包含错误列表的错误消息容器div，然后给它焦点，以便屏幕阅读器读取所有错误。这是使用

实现的，因此当用户用鼠标单击标签时，带有错误的输入将获得焦点。像这样：

<form id="ts-qqw-form" action="#" method="post">
    <div tabindex="-1" class="error-message-container ts-hidden" id="error-message-container">
        <p>The following errors have occurred:</p>
        <ul>
            <li><label for="TravellerAge_1">Please provide the age of the travellers.</label></li>
        </ul>
        <!-- ... -->
    </div>
    <div class="ts-qqw-section clearfix">
        <h4>Who</h4>

        <div class="ts-qqw-question">
            <label for="ts-travellers-num">Number of travellers</label>
        </div>
        <!-- traveller number selection -->
        <div class="ts-qqw-input">
            <select name="InsuranceStepA_PeopleCount" id="ts-travellers-num">
                <option selected="selected" value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="ts-qqw-question">
            <span>Age of travellers</span>
        </div>
        <!-- traveller ages inputs -->
        <div class="ts-qqw-input ts-age" id="ts-age-container">
            <input name="TravellerAge_1" class="ts-hidden ts-numeric field-error" id="TravellerAge_1" type="text" maxlength="2" data-validation-group="age">
            <input name="TravellerAge_2" class="ts-numeric" id="TravellerAge_2" type="text" maxlength="2" data-validation-group="age">
            <input name="TravellerAge_3" class="ts-hidden ts-numeric" id="TravellerAge_3" style="display: none;" type="text" maxlength="2" data-validation-group="age">
        </div>
        <!-- ... -->
    </div>
    <div class="ts-qqw-section clearfix">
        <div class="ts-qqw-box clearfix">
            <div class="submitButton right">
                <button class="primary-cta ts-qqw-submit" type="submit">Get a quote</button>
            </div>
        </div>
    </div>
</form>

发生了以下错误：


请提供旅客的年龄

谁
旅客人数
1.
2.
3.
旅客年龄
获得报价

它与鼠标完美配合，但根本无法通过键盘访问（即使用tab键）！这是HTML5标签元素没有获得焦点的问题。我可以使用jQuery给每个标签一个tabindex=“0”，但我觉得我遗漏了一些东西。我怎样才能得到它，这样我就不用用鼠标了？错误消息container div中的代码是由jQuery验证插件生成的，因此可能很难使用

标记重新编写它

我在SO中搜索了答案，并检查了可能的副本，但没有任何运气。如有任何建议，将不胜感激

---

谢谢你，迈克尔。

你的方法完全有缺陷。你应该彻底改变你的做法：

标签需要在视觉上靠近它们所使用的输入字段 标签

需要始终为所有输入提供可见标签，而不仅仅是在出现错误时，而且这些标签必须在语义上与其输入字段相关联

标签对于单击行为是错误的语义元素，正确的元素是链接。只需使用一个链接

看看下面的实现，了解标签和错误的良好标记

您还可以查看此演示文稿，了解要使用的技术

---

标签位于一个div中，tabindex为-1，这意味着只能通过脚本而不是键盘访问标签。此外，每个输入都应该有一个标签，它们旨在描述输入，而不是作为错误的表示容器。有关标记错误和标签的更好方法，请参阅。

尝试我使用的

$（“#错误消息容器标签”）.each（function（）{$（this.attr（'tabindex'，0）}）