Error messages in webforms are not accessible

[WebProject2015]

We had accessibility testing done on our webforms and when an invalid entry is made to a field (eg invalid email) or mandatory fields are empty, the error messages returned are not accessible.

The errors are displayed as jquery popups and are not read to the screen reader. The focus goes back to the first field in error and read the field label. If there are a few fields in error, the errors only appear when you hover over the other field. Aria-invalid attributes are also not added to the invalid fields.

Does anyone know how to suppress the validate jquery script so that the serverside processing happens to allow the error messages to display on the page, that way you can apply the aria-live attributes and rewrite the messages to identify the field names in error. Or provide support for the module clientside validation https://www.drupal.org/project/clientside_validation to be put in the GovCMS distro that will help with these validation messages.

[Chris820]

Check if it is actually jQuery doing that validation, and not the user agents own bubble form validation?
These bubbles tend to show up even before jQuery/ajax validation fires, let alone server validation.

I am unaware of how accessible these bubbles actually are. But as they are the responsibility of the user agent, they should be accessible. More from a UAAG perspective than a WCAG one tho.
Going to the trouble of suppressing them might take some doing, and I personally wouldn't go there.

[WebProject2015]

Can you clarify what you mean by user agent. I have looked in the Webform module files and there are no jquery with those messages contained in the bubbles. Something is firing when you click the submit button but I don't know how or where.

The testing we had was done by AccessTesting and as it stands those webforms miss the WCAG 2 criteria 3.3.1 Error identification (A) and 3.3.3 Error suggestion (AA)

[Chris820]

User agent = the web browser.

The following articles give a good explanation of what is meant by bubbles.
http://developer.telerik.com/featured/building-html5-form-validation-bubble-replacements/
https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

The bubbles are added by the web browser. If they are inaccessible it's of no fault of the website.

Are these indeed what AccessTesting picked up on?

[WebProject2015]

Thanks for pointing out the bubbles are from HTML5 form validations. I was able to find some articles to make the HTML 5 errors more accessible for anyone else who is interested:

https://www.sitepoint.com/html5-form-validation/
http://john.foliot.ca/required-inputs/
https://www.levelaccess.com/how-to-provide-accessible-error-identification/ (this link was recommended by AccessTesting - the popups need extra aria attributes to properly expose them to assistive technologies.)