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

Question

我有一个 HTML5 表单，它会收集一些信息并在用户提交表单时对其进行处理。它使用 jQuery 验证插件来验证输入，如果有错误，它会在屏幕顶部显示一个包含错误列表的错误消息容器 div，然后给出它聚焦以便屏幕 reader 将它们全部读出。这是使用 <label for="input id with error"> 实现的，因此当用户用鼠标单击标签时，带有错误的输入将获得焦点。像这样：

<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>

它与鼠标完美配合，但根本无法通过键盘访问（即使用 Tab 键）！这是 HTML5 标签元素未获得焦点的问题。我可以只使用 jQuery 给每个标签一个 tabindex="0" 但我想我遗漏了一些东西。我怎样才能得到它，这样我就不必使用鼠标了？错误消息容器 div 中的代码是由 jQuery 验证插件生成的，因此重写它以使用 <a> 标签可能太难了。

我已经在 SO 中搜索了答案并检查了可能的重复项但没有任何运气。任何建议将不胜感激。

谢谢，迈克尔。

Answer 1

您的方法完全有缺陷。你应该完全改变你这样做的方式：

标签需要在视觉上靠近它们显示的输入字段标签，
需要始终为所有输入提供可见标签，而不仅仅是在出现错误时，并且这些标签必须与其输入字段在语义上相关联
标签是点击行为的错误语义元素，正确的元素是 link。只需使用 link.

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

http://dylanb.github.io/bower_components/a11yfy/examples/form-validation.html

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

http://www.slideshare.net/dylanbarrell/accessible-dynamic-forms-27169766

Answer 2

标签位于 div 内，tabindex 为 -1，这意味着它只能通过脚本访问，不能通过键盘访问。此外，每个输入都应该有一个标签开头，它们旨在描述输入而不是错误的表示容器。有关标记错误和标签的更好方法，请参阅 http://simplyaccessible.com/article/error-messages-in-labels/。

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

How can I make a form label keyboard accessible?

html

jquery

accessibility