WAI ARIA提交表单提醒（带页面重新加载）

假设我们有一个经典的表单 - 一些输入字段必须满足某种模式。当用户输入不正确的数据并提交此表格时，所有填写错误的字段将被标记为无效，并为每个不正确的字段提供适当的错误消息。WAI ARIA提交表单提醒（带页面重新加载）

我需要使这个表单符合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; 
});

这里验证不刷新页面，以及“警报”区域是动态修改的。

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

来源

2013-12-23 k-sever

'role =“alert”'含有'aria-live =“assertive”'的隐含行为。请参阅http://www.w3.org/WAI/PF/aria/roles#alert – ckundo

有关“role =”alert“细微差别的讨论，请查看http://blog.paciellogroup.com/ 2012/06/html5-accessibility-chops-aria-rolealert-browser-support/ – ckundo

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

我会小心翼翼地做一些“符合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。

上的错误消息的最佳做法一对夫妇的文章你的问题让我想起，这将有助于这个答案扩展到其他使用情况：

来源

2014-01-02 12:14:11 AlastairC

感谢您的回复。您提出的解决方案可能适用于我。我相信这里的正确答案是“如果页面重新加载，警报方面将不起作用，因为只有当内容动态改变时它才会发出警报”。我没有在规范中明确指出这一点，所以我希望在这种情况下页面加载之后警报方面才会起作用 –

WAI ARIA提交表单提醒（带页面重新加载）

回答

相关问题