Improve Marketo Form Accessibility: Validation Behavior

Improve Marketo Form Accessibility: Validation Behavior

It looks like there's been some recent improvements to Marketo Engage's form accessibility around validating fields. This is great! However, there are some small tweaks that need to occur in order for these new items to perform in a way that's stricter to WCAG standards.

 

1. The aria-describedby attribute for inputs should only be inserted at the time that the validation message itself is added to the DOM; otherwise, the attribute has nothing to reference.


2. Items displayed in .mktoErrorMsg should additionally have aria-live set to assertive.


3. This isn't strictly accessibility-related, but when looking at validating form fields against behaviors, I'll also use setCustomValidity() and set the required attribute upon validation if validation fails for required fields. This can help with CSS/JS presentation if the Marketo customer uses custom behavior/visuals elsewhere.