17

I'm trying to make Web Forms for Marketers forms on our site ADA Compliant. In order to do this, screen readers need to be able to focus where the validation errors are when a form fails. In WFFM, this seems to be in the "scfValidationSummary" class, seen here: http://prntscr.com/csoimr

However, instead of focusing on the errors, WFFM focuses the user on the first input box instead, as seen in this screenshot: http://prntscr.com/cso418

This means that when the screen reader begins, it just starts at the fields and will not read any errors to the user. Users not alerted that they have errors, and can't progress past the form.

From what I understand, WFFM reloads the page upon error validation, meaning I can't use simple javascript to focus on the scfValidationSummary class. I could try making sure our javascript runs after WFFM's, but that seems like an unreliable idea.

I'm looking for advice on how to override this functionality. I'm thinking of trying to insert a tabIndex property on the class that surrounds the errors (scfValidationSummary) in the Sitecore.Forms.Core.dll - I'd have to override WFFM's functionality at that point, somehow (not sure how much effort this is).

Any advice you can offer? Sitecore version is 7.5 (rev. 141003). WFFM is 2.5 rev 141014.

3
  • Are you using MVC or webforms?
    – jammykam
    Oct 11, 2016 at 21:34
  • You can intercept the submit with js, have done that before. if its mvc (possibly webform as well), it will be jquery validate it uses and you can call .valid() or .validate()
    – josedbaez
    Oct 12, 2016 at 9:28
  • @jammykam We're using webforms
    – Evan
    Oct 12, 2016 at 15:41

1 Answer 1

4

If you have a global js file of some kind then you should be able to do something like the following:

<script> 
window.onload = new function () { 
 var valSummary = $('.scfValidationSummary'); 
 if (valSummary.length && valSummary.html().trim() != "") { 
    location.hash = "#error-container"; 
 } 
} 
</script>

This should scroll the user to the container. You could change the location to go to where you want to though. This would need to run after any WFFM js runs though in order to work.

We wire up our custom WFFM code using the data attribute on the WFFM form and then hook into the submit event of the form like so which might be another way to fire some js to scroll the user:

var $wffmForm = $('[data-wffm]');
$wffmForm.on('submit', onSubmit);

function onSubmit(e) {
  //do stuff here
}
2
  • Thanks for your response! Does this solution work on a page refresh, since that's what WFFM does by default when you get validation errors?
    – Evan
    Oct 12, 2016 at 15:40
  • In theory If you add that js to check for ".scfValidationSummary" on each page load then even on postback the code should run, find that scfValidationSummary has errors and then scroll the user up to the div. Oct 12, 2016 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.