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
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
What is aria-live?
Using ngAria and the example above, the code will be modified to have the
<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.
Using the example above where we had the
div, all we need to do is have the ngMessage module and the ngAria modules imported to our app.
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.