Supporting ARIA roles and attributes

Would you consider supporting ARIA attributes and roles as within valdr's scope? Especially aria-invalid [1] and in view of issue #17 maybe aria-describedby [2] and/or role="alert" [3]

EDIT: there is ngAria in 1.3.0: https://docs.angularjs.org/api/ngAria

[1] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute [2] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute [3] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

Yes, I think that ARIA attributes should be supported by valdr.

role="alert" will be added to the default template in valdr to display the validation messages. For now you can just set it in your own message template if you need ARIA attributes in the validation messages [1].

The aria-invalid attribute should be added automatically by ngAria, but I have not checked it yet. Did you try it?

aria-describedby needs a little more work and also depends on how we fix #44. If we find a good solution there, it should be easy to add an ID to each validation message and the aria-describedby attribute to the input.

[1] https://github.com/netceteragroup/valdr#message-template

Any update on this? Adding an attribute like aria-invalid as suggested should not be hard but can bring a lot of freedom to users of screen-readers. BTW: If you want to test yourself - get NVDA (http://www.nvaccess.org/) for free, switch volume to zero, open speech viewer and then test your features in your favorite browser (with mouse unplugged). Then you will get an impression how a blind person "sees" the web. Thanks for taking care!

Here is what I cooked up for this. I created a simple directive that I stuck on the valdr container.

The valdr html.

<div id="error-{{formField.$name}}" class="valdr-message" valdr-accessibility>
    {{ violation.message }}
</div>

Stuck this on page.

    <div id="accessibility-alert" class="accessibility-hidden" role="alert" aria-live="assertive" aria-atomic="true"></div>

valdr-accessibility.directive.js https://gist.github.com/stevenirby/649b3e17cd511e3c69815c892390f553