Forums

In relation to ChronoForms 4.0 RC3.11:

For optimal accessibility we need to add "for" attributes to form "label" tags in order to associate labels with their respective input fields. At present there is no "for" attribute.

Similarly, validation error messages need to be displayed above the form (visually and in the markup). At present error messages are being dynamically added to an absolutely positioned div that is added to the end of the html document (rather than in close proximity to the form markup). This means that for people using screen readers there's no direct association between the error message and the form that generated the error.

Can you please suggest the best course of action? Can this be achieved easily in ChronoForms without hacking the component code? Is better accessibility in the development pipeline?

Hi Brian,

I will add the "for" to the todo list, but the validation message change may not be possible, they are added to the end of the markup because its impossible to expect how your page elements are in advance, as far as I can understand.

You can use "server side validation" instead which is compatible with all browsers/machines and is more secure.

Regards,
Max

Thanks!

We'll await the "for" attribute in a future release, and will try server side validation instead.

Hi Brian,

Which labels are missing the 'for' attribute? I can see them on most of them here, maybe they were added after CFv4 RC3.11

There's also an option in the Forms JS Validation tab to turn off the ToolTip error messages that are at the end of the page and use the 'After Element' messages that Max is referring to.

You can also set a FormCheck errorsLocation option to put the error before the element. The example below was created by using a slightly modified version of my Show HTML [GH] action which allows you to set FormCheck options.

Bob