title: How to allow screen readers to announce ASP.NET MVC 5 form validation messages when moving focus to the field in error?
body: <p>We have an ASP.NET MVC 5 web application. We do regular accessibility testing with JAWS in conjunction with Internet Explorer 11 (enterprise mandate) and Chrome. We keep running into problems with JAWS not reading off the validation messages associated with form fields when the user TABs into the field. We use FluentValidation and the standard HTML helpers to display form fields and validation messages (example below):</p>
  
  <pre><code>@Html.LabelFor(model =&gt; model.Email)
  @Html.EditorFor(model =&gt; model.Email)
  @Html.ValidationMessageFor(model =&gt; model.Email, null, new { role = "alert" })
  </code></pre>
  
  <p>A sample FluentValidation might query the database for the e-mail address in the form and show a message that "This e-mail has already been taken" which runs on the server side.</p>
  
  <p>The resulting HTML sent back to the browser is:</p>
  
  <pre><code>&lt;label for="Email"&gt;E-mail address:&lt;/label&gt;
  
  &lt;input type="text" name="Email" id="Email" ...&gt;
  
  &lt;span class="..." data-valmsg-for="Email" data-valmsg-replace="true" role="alert"&gt;
      This e-mail has already been taken
  &lt;/span&gt;
  </code></pre>
  
  <p>Nothing is associating the validation message with the form field. I always thought the MVC framework made this connection automatically, but apparently it doesn't.</p>
  
  <p>According to <a href="https://webaim.org/techniques/formvalidation/" rel="noreferrer">WebAIM</a>, we should utilize the <code>aria-describedby</code> attribute to associate form fields with inline validation errors, but to replumb the existing MVC5 framework to do that is quite the undertaking.</p>
  
  <p><strong>How can we get screen readers to announce inline validation messages when bringing focus to a form field generated by ASP.NET MVC5 without rewriting major HTML helpers?</strong></p>