表单提交时出现WAI ARIA警报（重新加载页面） [英] WAI ARIA alert on form submit (with page reloading)

问题描述

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

我需要输入此表单符合WAI ARIA，因此提交表单后，可访问性工具将首先看到这些错误。
我发现解决方案通过动态html实现使用JS进行修改（ 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>名（必需）< / 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（'请输入您的名字。'）; 
} 
返回false; 
}）; 
  

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

在我来说，该页面在验证阶段已重新加载，我不知道如何使aria警报起作用。经过数小时的调查，我根本没有找到任何解决方案。有想法吗？

解决方案

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

我会谨慎地制定一些符合WAI-ARIA标准的东西，这本身并不是目标。 WAI-ARIA旨在将网页映射到应用程序角色，但是只有 applications 实际上适用于这种处理。

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

如果页面未重新加载（按照示例），您将要确保提交表单不仅会使用户坐在按钮上。您可以管理实现以下目标的焦点：

  $（'＃errors'）。append（'请输入您的名字。 '）; 
 
 //使错误消息聚焦，但不能以默认选项卡顺序显示：
 $（'＃errors'）。attr（'tabindex'，'-1'）。css （大纲， 0）； 
 
 //将焦点放在（第一条）错误消息上：
 $（’＃errors’）。focus（）; 
  

JSFiddle在这里更新。

您的问题使我想起了一些有关错误消息最佳实践的文章，这将有助于将此答案扩展到其他用途-cases：

• 显示错误消息


• 可访问表单验证。

Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.

I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first. I've found solution that implements it by dynamic html modification using JS (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;
});

Here validation does not reload page, and the "alert" area is dynamically modified.

In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?

解决方案

I think there's a simple solution, but you'll have to say if it covers your cases.

I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.

For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.

If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:

    $('#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.

A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:

• Displaying error messages
• Accessible form validation.

这篇关于表单提交时出现WAI ARIA警报（重新加载页面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！