Skip to main content
  • EN
Solved

[Shopify] ADA accessibility issue with email signup form

  • 25 August 2021
  • 3 replies
  • 612 views

Hi Klaviyo community,

I have an email signup form on my site which has a loading delay that’s triggered after a user scrolls 30% of the page. I have recently been informed that this popup is not ADA compliant as it causes two accessibility issues. The first was that the popup didn’t take primary focus when it was displayed, and the second was that it wasn’t announced when it was displayed. My questions are - has anyone dealt with a similar issue and successfully troubleshot it? There aren’t advanced options in the WISIWYG tool to tinker with things like this. Could removing the delay solve the issue? Also, is this working as designed, or could there be a conflict with my Shopify theme that is keeping the focus on the page rather than shifting it to the popup form? 

Thanks in advance!

3 replies

B
Rank

Hi,

We’ve received a similar ADA call out regarding a pop-up sign-up form where some elements are not accessible via keyboard controls.

After it loads, it does capture focus and the Email Address, Date, and Continue button are accessible by tabbing through.  However, the links for Privacy Policy, Terms of Use, and Promo Details are not keyboard accessible.  Code-wise, everything looks the same between all elements, it’s just that block at the bottom that isn’t accessible. 

P
Rank
Badge

Hello

We have received a complaint for not being compliant and it turns out that your form is one of the things we have to rectify, but only you can do it.

Please make the necessary changes as soon as possible or we will be forced to do without your services.

It's urgent because we're going to court very soon and we need to represent our site with ADA compliance.

Thank you in advance

 

alex.hong
Userlevel 7
Badge +58
Hi @AuburnFury ,
 
Thanks for posting to the Community! ADA Compliance is an important thing that all businesses should consider and it is great to hear about Community members ensuring that their sites follow this compliance as well.
 
Upon further investigation, I have found similar cases where other users were experiencing the same issues you were describing. Appears that it has to do something with the non-legacy form; the overlay blocks content from receiving the keyboard focus, and the screen reader announces hidden content. I'm sorry I'm not myself a "real" developer so I'd encourage you to test this out to be certain — in regard to a legacy popup form, you might want to have your developer insert/remove the form's containing "div" element via Javascript as opposed to hiding/showing the div via CSS. If the div is just hidden or set to "display: none" via CSS, the content would still be rendered "invisibly" in the page source, but inserting/removing the form code via Javascript would prevent that from occurring.
 
Another recommendation I would have is to indeed check if delay time is a variable that affects how forms work. In regards to Shopify theme being a variable, I would assume that most of the forms work the same in terms of code but I would have to get confirmation on that.
 
We have some design recommendations here regarding more ADA information in regard to signup forms.
 
In the meantime, you may be interested in using our legacy signup form, as it does allow for a lot more control over the elements of the form.  All of the Form Concepts put forward by the W3C Web Accessibility initiative can be accomplished using the legacy form.

You can learn more about this in the following help centre articles:

 

Hope this helped and thanks for being a part of the Community!

Alex

 

Reply


Most helpful members this week

Terms & ConditionsCookie settings