您有一个表单（例如联系表单），您希望将一些可访问的错误检查放入其中。 常见问题的示例包括无效的电子邮件地址，或至少不包含名字或姓氏的名称字段。
首先，请阅读有关aria-required technique所需的技术（如果您尚未这样做的话），因为该技术会以此为基础进行扩展。
这是一个示例表单：
<form method="post" action="post.php">
<fieldset>
<legend>Please enter your contact details</legend>
<label for="name">Your name (required):</label>
<input name="name" id="name" aria-required="true"/>
<br />
<label for="email">E-Mail address (required):</label>
<input name="email" id="email" aria-required="true"/>
<br />
<label for="website">Website (optional):</label>
<input name="website" id="website"/>
</fieldset>
<label for="message">Please enter your message (required):</label>
<br />
<textarea name="message" id="message" rows="5" cols="80"
aria-required="true"></textarea>
<br />
<input type="submit" name="submit" value="Send message"/>
<input type="reset" name="reset" value="Reset form"/>
</form>
表单有效性检验由这几个步骤组成：
aria-invalid属性将被赋予“ true”值。alert”功能。 这会通知用户错误，但允许他们继续修改表单而不会失去焦点（由JavaScript默认的“alert”功能中的“ onblur”处理函数引起）。下面是一个能够被插入在结束“ head”标签上方的示例JavaScript代码
<script type="application/javascript">
function removeOldAlert()
{
var oldAlert = document.getElementById("alert");
if (oldAlert){
document.body.removeChild(oldAlert);
}
}
function addAlert(aMsg)
{
removeOldAlert();
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode(aMsg);
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
}
function checkValidity(aID, aSearchTerm, aMsg)
{
var elem = document.getElementById(aID);
var invalid = (elem.value.indexOf(aSearchTerm) < 0);
if (invalid) {
elem.setAttribute("aria-invalid", "true");
addAlert(aMsg);
} else {
elem.setAttribute("aria-invalid", "false");
removeOldAlert();
}
}
</script>
checkValidity 函数JavaScript中用于表单验证的主要方法是checkValidity函数。 此方法采用三个参数：要验证的输入的ID，要确保有效性的搜索项，以及要插入警报中的错误消息。
要查看其是否有效，该函数将检查输入的indexOf值是否大于-1。 如果在值内找不到搜索词的索引，则返回-1或更小的值。
如果无效，这个函数会执行这两个事情：
aria-invalid属性设置为“true”，指示用户那里有无效的内容。addAlert函数来使用给定的错误信息添加警告。如果搜索词被找到，aria-invalid值会被重置为“false”。此外，所有剩余警告都将被删除。
addAlert 函数此功能首先删除所有旧警报。 该函数很简单：它查找ID为“alert”的元素，如果找到，则将其从文档对象模型中删除。
接下来，这个函数创建一个div元素来保存警告文本。 它得到了一个 “alert”的ID.，并且它具有“alert”角色集。 这实际上是受ARIA启发的，即使它在属性名称中没有标明“aria”。 这是因为该角色基于XHTML角色属性模块，为简单起见，该模块简单地移植到HTML。
这些文字被加入这个div元素，然后这个div元素被加入文档。
发生这种情况时，当此div出现时，Firefox将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于Firefox中的提示栏，提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮，只是告诉我们出了什么问题。
onblur” 事件现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入：
<input name="name" id="name" aria-required="true"
onblur="checkValidity('name', ' ', 'Invalid name entered!');"/>
<br />
<input name="email" id="email" aria-required="true"
onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>
测试示例
如果你在使用Firefox 3和一个当前支持的屏幕阅读器，试试看下面的操作：
在两种情况下，当将焦点返回到相关字段时，您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能，但是JAWS 8不支持，所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。
Q. 为什么在某些输入中同时在标签文本和“aria-required”属性中都添加了“(required)”？