表单提交时的 WAI ARIA 警报（页面重新加载）

Question

假设我们有一个经典表单 - 一些必须符合某种模式的输入字段。当用户输入错误的数据并提交此表单时，所有填写错误的字段都将被标记为无效，并为每个错误的字段提供相应的错误消息。

我需要使此表单符合 WAI ARIA，以便在表单提交后辅助工具会首先看到这些错误。 我找到了solution，它通过使用 JS 的动态 html 修改来实现它（http://jsfiddle.net/nS3TU/1/）：

HTML：

<form id="signup" method="post" action="">
    <p id="errors" role="alert" aria-live="assertive"></p>
    <p>
        <label for="first">First Name (required)</label>
        <input type="text" id="first">
    </p>
    <p>
        <input type="submit" id="button" value="Submit">
    </p>
</form>

JS：

$('#signup').submit(function () {
    $('#errors').html('');
    if ($('#first').val() === '') {
        $('#errors').append('Please enter your first name.');
    }
    return false;
});

这里验证不会重新加载页面，并且“警报”区域是动态修改的。

在我的情况下，页面在验证阶段重新加载，我不知道如何使 aria alert 起作用。经过数小时的调查，我根本没有找到任何解决方案。有什么想法吗？

Answer 1

我认为有一个简单的解决方案，但你必须说它是否涵盖你的情况。

我会小心地制作“符合 WAI-ARIA”的东西，这本身不应该是一个目标。 WAI-ARIA 旨在将网页映射到应用程序角色，但实际上只有 应用程序 适合这种处理。

对于经典的网络表单，您根本不需要 WAI-ARIA。如果页面重新加载，警报方面将不起作用，因为它只会在内容动态更改时发出警报。

如果页面没有重新加载（根据示例），您需要确保提交表单不会让用户坐在按钮上。您可以管理焦点以实现此目的：

    $('#errors').append('Please enter your first name.');

    // Make the error message focusable, but not in the default tab-order:
    $('#errors').attr('tabindex', '-1').css('outline', '0');

    // Set the focus on the (first) error message:
    $('#errors').focus();

JSFiddle updated here.

您的问题让我想起了几篇关于错误消息最佳实践的文章，这将有助于将此答案扩展到其他用例：

• Displaying error messages
• Accessible form validation。