html - 如何允许屏幕阅读器在错误地将焦点移动到字段时宣布 ASP.NET MVC 5 表单验证消息？

Question

我们有一个 ASP.NET MVC 5 网络应用程序。我们使用 JAWS 结合 Internet Explorer 11(企业授权)和 Chrome 定期进行可访问性测试。当用户 TAB 进入字段时，我们一直遇到 JAWS 不读取与表单字段关联的验证消息的问题。我们使用 FluentValidation 和标准的 HTML 帮助程序来显示表单字段和验证消息(示例如下):

@Html.LabelFor(model => model.Email)
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email, null, new { role = "alert" })

示例 FluentValidation 可能会在数据库中查询表单中的电子邮件地址，并显示一条消息“此电子邮件已被占用”，该消息在服务器端运行。

发送回浏览器的结果 HTML 是:

<label for="Email">E-mail address:</label>

<input type="text" name="Email" id="Email" ...>

<span class="..." data-valmsg-for="Email" data-valmsg-replace="true" role="alert">
    This e-mail has already been taken
</span>

没有任何东西将验证消息与表单字段相关联。我一直认为 MVC 框架会自动建立这种连接，但显然它不会。

根据 WebAIM ，我们应该利用 aria-describedby 属性将表单字段与内联验证错误相关联，但是重新部署现有的 MVC5 框架来完成这项工作是一项艰巨的任务。

我们如何在不重写主要 HTML 帮助程序的情况下让屏幕阅读器在将焦点置于 ASP.NET MVC5 生成的表单字段时宣布内联验证消息？

Answer 1

不创建自定义 HtmlHelper生成 aria-describedby 的扩展方法for 控件中的属性，以及关联的 id error 元素中的属性，您将需要使用 javascript 添加它们。

请注意，每个错误消息占位符(由 @Html.ValidationMessageFor() 生成)通过 data-valmsg-for="...." 与其表单控件相关联属性。

假设您要包含 aria-describedby对于所有带有相关错误消息的表单控件(在 <form> 元素中)，以便在通过 jquery.validate.js 添加客户端错误时可用, 那么脚本 ( jQuery ) 将是

$(function () {
    // Get the form controls
    var controls = $('form').find('input, textarea, select')
        .not(':hidden, :input[type=submit], :input[type=button], :input[type=reset]');
    $.each(controls, function (index, item) {
        // Get the name of the form control
        var name = $(this).attr('name'); 
        if (!name) {
            return true;
        }
        // Get the associated error element
        var errorElement = $('[data-valmsg-for="' + name + '"]');
        if (!errorElement) {
            return true;
        }
        // Generate an id attribute based on the name of the control
        var errorId = name + "-error"
        // Add attributes to the input and the error element
        $(this).attr('aria-describedby', errorId)
        errorElement.attr('id', errorId);
    });
});

如果您对客户端验证错误不感兴趣，那么您可以使用 var controls = $('.input-validation-error');作为选择器，仅获取添加了服务器端验证错误的表单控件。

我建议在外部(比如)screenreadervalidation.js 中包含此脚本文件并将其包含在您的 jquery 中或 jqueryval捆绑，以便它包含在所有包含用于创建或编辑数据的表单的 View 中。