The Little Big Things with ngAria

The Setup

My buddy Marcy Sutton @marcysutton called me out via Twitter about my Build a MailChimp Signup Form with AngularJS post.

At first, I was like “Uh oh! How do I do that!?”; then I realized that ngAria is amazing and is a really tiny step you can do right now that has a huge impact on increasing accessibility for your application. Prepare yourself for the longest blog post ever.

Demo Code

Longest Blog Post Ever

The first thing you need to do is add the ngAria JavaScript file to your HTML page.

<script type="text/javascript" src="vendor/angular-aria.min.js"></script>

And then you need to add the ngAria submodule to your application.

angular.module('ngMailChimp', ['ngAria', 'ngMessages', 'ngAnimate'])

And done! ngAria dynamically added the appropriate attributes to your application. Little things can indeed become big things.

Review

Here is a review of what you need to do to increase the accessibility of your site with ngAria.

1. Add the ngAria source file.
2. Add the ngAria submodule

Thanks Marcy for your awesome work on this submodule!

Resources

Marcy Sutton’s Blog

ngAria Documents

Accessibility with ngAria

Demo Code