Enhance error handling accessibility

[gu-stav]

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

• [x] Add role="alert" attribute to fields with errors
• [x] 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.

[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

[gu-stav]

Hi, I don't agree, that accessibility should be something optional, but I understand your point.

Anyway - I'll go the way with the plugin. I haven't seen any plugin architecture yet, so I think it's basically using the events/ monkey patches to hook in? I'll try to figure out next week, if everything is possible with this approach and refer to you.

[guillaumepotier]

Plugin examples here: https://github.com/guillaumepotier/Parsley.js/tree/master/src/extra/plugin Useful if you need to define core parsley methods accessible in every .parsley() or to override other things. But I thing in your case, mostly, you'll have to use listeners that way:

$.listen('parsley:form:init', function (parsleyFormInstance) {});
$.listen('parsley:field:init', function (parsleyFieldInstance) {});
$.listen('parsley:field:validated', function (parsleyFieldInstance) {});
$.listen('parsley:form:validated', function (parsleyFormInstance) {});

Like it is done in ParsleyUI.

Best

[philgyford]

Does anyone know if any progress was made on this? I'm using Parsley for a project at the moment but we need it to be a lot more accessible.

[gu-stav]

@philgyford Not yet - since the effort to extend the library was too big for the project, the company decided for another framework. If you like we could work together in out spare time on that - I believe it's an important issue ...

[philgyford]

It is. Unfortunately I don't have the time on this project to devote to it (we're in a "quick-n-dirty" stage) so I'll have to leave it. I suspect that in future we'll switch to doing JS validation a different way, so that we sync up our back- and front-end validation a bit better, but also have the ability to add the required accessibility features.

[marcandre]

This looks like a great feature to add. Maybe I can help?

[juliemoynat]

Hi,

Instead of aria-labelledby attribute on the field, I prefer aria-describedby because aria-labelledby will replace the label tag. But, if we put both label ID and error ID in aria-labelledby attribute, it will work. Example: <input type="text" aria-labelledby="label-id error-id" />

[Shelob9]

I am working on creating a script to fix accessibility problems in parsely and will separate it out a package so it can be npm installed. See: https://github.com/CalderaWP/Caldera-Forms/issues/1501

[marcandre]

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

[cryptiklemur]

For what its worth @guillaumepotier

Not everyone want to be accessibility standards compliant

Everyone is required to be ADA compliant (in the United States at least).

[LukaszJaro]

It's law in Canada as well.

Accessibility laws Ontario has laws to improve accessibility for people with disabilities. Learn about the standards you need to follow and reporting deadlines for complying with accessibility requirements.