ASP.NET MVC, aria-required, and jQuery Unobtrusive Validation

I saw this interesting article about using model metadata in ASP.NET MVC to add the aria-required attribute to required input fields. The approaches there are all totally valid and work great if you have the requirement to add the attribute on the server-side.

However, if you’re using jQuery unobtrusive validation, you’ve already got some metadata you can use from the client side. Required fields all get the data-val-required attribute associated with them:

  data-val-required="This is a required field."
  value="" />

The attribute only exists on required fields. With that, it’s easy enough to jQuery your way to freedom and leisure:

$(function () {
  $('[data-val-required]').attr('aria-required', true);

…and now all of your required fields have the appropriate ARIA attribute.