Sunday, 3 May 2015

An Accessible Validation Summary for ASP.NET MVC Applications

This blog post relates to WCAG Criteron 3.3.1 - identifying input errors to non-sighted and partially sighted users, and in particular, Guideline G139 - Creating a mechanism that allows users to jump to errors.

NuGet package

Github source code

As mentioned in a previous post, accessibility is an issue that I have lacked awareness of in the past, but has featured heavily on my radar in a recent project. Forms on ASP.NET MVC applications commonly supply a validation summary to list validation errors on submission of a form. The standard validation summary does not conform with WCAG Criterion 3.3.1, because the summary does not alert screen reader user to the presence of the errors, and it does not provide links to allow the user to jump directly to the field that is the source of the error.

Once you have added the package from Nuget, add these links to your page (or add them through Bundle):

<link href="/Content/lucidity.accessible.validation.mvc.css" rel="stylesheet"/>
<script src="/Scripts/lucidity.accessible.validation.mvc.js"></script>

and in your views, replace the usual

@Html.ValidationSummary(true, "", new { @class = "text-danger" })


@Html.Partial("_ValidationSummary", Html.ViewData.ModelState)

and that is all you need to be up and running.

The JavaScript file is to handle client side validation, and the _ValidationSummary partial is to handle it server side (Although the partial is also used as the template for the client side). The first point to note is the inclusion of role="alert" on the heading of the _ValidationSummary partial. As soon as this becomes visible, the screen reader is alerted to it. Focus is placed on the title so the user can then navigate to the next link. When return, space bar or the usual screen reader select key is pressed, focus is then passed directly to the related control.

1 comment:

  1. Hi Paul,

    Your solution works fine for client side errors but in case of server side errors it is not. Screen reader does not read the error message first on page load, instead it reads the entire page from top to bottom.
    I tried it on IE, firefox, chrome with NVDA and JAWS.

    I want screen reader to read the error message first in case of server side error also.