Form accessibility & custom validation

[My_Nguyen]

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?

[SanfordWhiteman]

---

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]

---

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]

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.