ADA Compliance with Forms

[KayTeaStudio]

I was just checking WAVE evaluation tool and it was mentioning that the forms are missing Form Labels. (Either should have a <Label> or should at least have aria-label) 

I cannot directly modify the forms and was wondering if there was some way to address these issues? Like the Contact Us page

 

[Sammie_C]

Hi @KayTeaStudio, I appreciate your post!

To make sure I understand this correctly, what exactly are Form Labels? Are they like a title on the form page?

I see you submitted a screenshot, are the red tags on the left on the information boxes Form Labels?

Please let me know and I can look into this further!

[Donnie-M]

The form labels are specific elements for ADA that tell screen readers especially what the cursor is on on the screen.  I am no expert, but square injects the form into the page with javascript, so you can't edit the code directly.

Basically the labels are invisible tags to tell the screen reader for a blind person what each box is for.

[KayTeaStudio]

The red tags on the left is added from the WAVE (web accessibility evaluation tool chrome extension). It adds the red tags on the left to show that there is errors on the page. 

Maybe it isn't a big deal but I worry that it might not pass the ADA tooling those ADA lawyers to find websites to sue (which make it easier for them to try to target these websites). Though I am not familiar with what tooling they use

[Donnie-M]

@KayTeaStudio Square does have the embed code section, and you could always embed a form from google or one of the many other sites that can do labels.  Not what you would want necessarily, but if that is important to you, then you can do it.

[KayTeaStudio]

Thanks for the suggestion! 

Just a little context I was using Square Forms (from adding a new section) since it was one of their Square functionality for Catering Requests / Contact US etc.

I got hit with an ADA lawsuit for a website that was associated with us (on a different platform) so I was trying to determine if my Square website was ADA compliant (and I saw this form section) for the Contact Us page had these errors in WAVE though I don't know if these are an issue or not.

Ideally I would prefer to see that the WAVE Extensions or any ADA issues with the features we use with Square. 

[Sammie_C]

Thank you for the explanation on this, @Donnie-M and @KayTeaStudio! I was not aware of any of that information. This is important information to know, so I appreciate you keeping me informed.

I went ahead and actually reached out to our Accessibility team to take a look into this and am currently waiting to hear back. The individual that we are needing to hear from is out of the office until this coming Monday, so I may not report anything back until then.

Just wanted to let you know that this is being looked into further for you!

[Sammie_C]

I am still waiting to hear back on this. I really appreciate your patience! As soon as I hear back, I will reach back out here promptly.

[Sammie_C · Accepted solution]

I sent over a message via direct message last week, but I also wanted to let you know that our Accessibility team was able to get the issues you sent me over direct message resolved. 

Please let me know if you end up having any other questions!

[VanKalkerFarms]

Glad to see that was taken care of.  There are a lot of requirements out there, and to have sites out of your control being flagged as possible issues is good to see being cleaned up.  Yay, Square support on this one.