Angular 1.3.2: ng-aria, ng-messages, and aria-live

posted in: Uncategorized | 0

In my previous post Angular 1.3.0 Improved Accessibility with ngAria I covered a new module in Angular called ngAria that assisted Angular developers by automatically adding in aria-* attributes where appropriate, which is great for accessibility. With Angular 1.3.2, that module was updated to add aria-live attributes to any element marked with the attribute ng-messages.

What is ng-messages?

From the Angular Docs: “ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself compliments error message reporting with the ngModel $error object (which stores a key/value state of validation errors).”

In summary, ng-messages is used for validation messages. Example from the docs:

<form name="myForm">
  <label>Enter your name:</label>
  <input type="text"
         name="myName"
         ng-model="name"
         ng-minlength="5"
         ng-maxlength="20"
         required />

  <div ng-messages="myForm.myName.$error" style="color:maroon">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

In this example, if the “MyName” textbox is not filled in, does not have a minimum length of 5, or does not have a maximum length of 20, it will display the appropriate ng-message element.

What is aria-live?

Using ngAria and the example above, the code will be modified to have the aria-live attribute.

<div ng-messages="myForm.myName.$error" style="color:maroon" aria-live="assertive">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>

aria-live="assertive" will cause a screen reader to announce these messages as the user is filling out the form instead of the usual behavior of only reading the messages if the user is currently focused on that part of the page.

Usage

Using the example above where we had the ng-messages div, all we need to do is have the ngMessage module and the ngAria modules imported to our app.

angular.module('ngMessagesExample', ['ngMessages','ngAria']);

Conclusion

The ngAria module in Angular 1.3.0 will help authors add aria semantics that will make using their applications a better experience for users with disabilities using assistive technologies. Clearly the team isn’t done with this module and it will be interesting to see as it develops into the future.

More Reading

Angular 1.3.0 Improved Accessibility with ngAria
ngMessages (Angular Docs)
The GitHub Commit
The GitHub Issue

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

Leave a Reply