Question

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

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

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;
});

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

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

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

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

表格提交时WAI ARIA提醒（页面重新加载）

1 个答案: