Enhance error handling accessibility

First of all - thanks for creating this amazing library. I’m currently doing research on form validation frameworks, since I have to decide which one to use in the near future for a big project. Therefore I have respect quite strict accessibility rules. I started to add basic aria roles/states here: e412198

TODO

• Add role="alert" attribute to fields with errors
• Add aria-invalid attribute to fields with errors
• Add aria-labelledby="#ID" with reference to elements id, containing the error message. Therefore every error message-item should have it’s own id.
• Extend multiple validation-fields to use fieldsets as wrapper with aria-required, aria-invalid attributes
• Create error summary (above submit button) with list of links (containing anchors to the error fields in href) and errormessages (Example: error summary). This should have an option to enable/disable in the end.

Does somebody already work on that? Is that something, which you would like to integrate into the project? Maybe you could also give me some hints, where to add what (mainly the id-stuff for error messages), since I started today to read the code.

Cheers.

[marcandre]

Unless it involves a lot of code, it would be even better if it was integrated in parsley itself.

[guillaumepotier]

Hi there,

Thanks for your interest in Parsley.

What you want to achieve is great. But it should not alter the existing Parsley code. Not everyone want to be accessibility standards compliant, that should be a separate Parsley plugin.

• Add role=“alert” attribute to fields with errors => should be in window.ParsleyConfig configuration
• Add aria-invalid attribute to fields with errors => same here
• Add aria-labelledby=“#ID” with reference to elements id, containing the error message. Therefore every error message-item should have it’s own id. => maybe custom code triggered on field:init event
• Extend multiple validation-fields to use fieldsets as wrapper with aria-required, aria-invalid attributes => not sure to understand
• Create error summary (above submit button) with list of links (containing anchors to the error fields in href) and errormessages (Example: error summary). This should have an option to enable/disable in the end. => custom work binded on form:validate

I’m not sure if you are very familiar with Parsley code, configuration and extension, but you should definately do this, but in a plugin mindset, not directly in the code like you are doing on your repo, because I won’t ship it that way 😃

What do you think ?

Best