Question

我有一个HTML5表单，用于收集一些信息并在用户提交表单时对其进行处理。它使用jQuery Validation Plugin来验证输入，如果有错误，它会在屏幕顶部显示一个包含错误列表的错误消息容器div，然后给它焦点，以便屏幕阅读器全部读取它们出。这是使用<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”，但我想我错过了什么。我怎么能得到它所以我不必使用鼠标？ error-message-container div中的代码是由jQuery Validation Plugin生成的，因此重写它以使用<a>标签可能太困难了。

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

谢谢，迈克尔。

Answer 1

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

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

请查看以下实现，以获得标签和错误的良好标记

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

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

2 个答案: