Form accessibility & custom validation

My_Nguyen
Level 2

Form accessibility & custom validation

I need to make the Marketo forms accessible for people with disabilities, so it needs to meet certain requirements for screen readers. Some of the issues with the Marketo forms are:

  • Error tooltips are not announced by the screen reader (they need role="alert" or role="tooltip")
  • Email addresses are not validated correctly and are allowing "email@domain"
  • Form doesn't pass status info on what fields were filled and status of submission upon submission

A complication to this is that I've already implemented this script to enable multiple forms on one page. How can I get the forms to be accessible for screen readers (fix the issues listed above) with the complication of all the form field IDs not being static?

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Form accessibility & custom validation


Email addresses are not validated correctly and are allowing "email@domain"

In fact, that is correct validation: it's RFC-standard validation.  See No, sandy@gmail isn’t an “incomplete” e-mail address!

 

So the input is just as accessible as a standard HTML <input type=email>.

 


  • Error tooltips are not announced by the screen reader (they need role="alert" or role="tooltip")

You can add this if you use custom onValidate code.

 


Form doesn't pass status info on what fields were filled and status of submission upon submission

Please explain what you mean by "pass," as the values are certainly present in the form.getValues() object at all times.

My_Nguyen
Level 2

Re: Form accessibility & custom validation


In fact, that is correct validation: it's RFC-standard validation.  See No, sandy@gmail isn’t an “incomplete” e-mail address!

 


I was aware of this, but the accessibility auditors want the complete address.

SanfordWhiteman
Level 10 - Community Moderator

Re: Form accessibility & custom validation

In fact, that is correct validation: it's RFC-standard validation.  See No, sandy@gmail isn’t an “incomplete” e-mail address!

I was aware of this, but the accessibility auditors want the complete address.


Then it sounds like they're going well outside the bounds of accessiblity, as an input is allowed to (in fact, should) follow W3C standard validation for the type. By asking for a non-standard validator pattern, it's violating the principle of least surprise which is extra-important with accessibility.

 

In any case, the JS to change that behavior is in the linked blog post.