Form accessibility & custom validation | Community
Skip to main content
My_Nguyen
My_Nguyen
Level 2
June 16, 2020
Question

Form accessibility & custom validation

  • June 16, 2020
  • 1 reply
  • 2731 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
June 16, 2020
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
My_NguyenAuthor
Level 2
June 17, 2020
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
SanfordWhiteman
Level 10
June 17, 2020
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.

Terms & ConditionsAccessibility statement

Loading footer...