Translate Form Label for ADA Compliance

[Ryan Mahoney]

I'm using an accessibility scanner on our website and our translate feature is throwing an error for a missing form label. Is there a solution or a possible workaround to resolve the error?  

Errors

Missing form label

What It Means

A form control does not have a corresponding label.

Why It Matters

If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.

How to Fix It

If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

The Algorithm... in English

An <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea> does not have a properly associated label text. A properly associated label is:

• a <label> element with a for attribute value that is equal to the id of a unique form control
• a <label> element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute
• a non-empty title attribute, or
• a non-empty aria-labelledby attribute. 

[Konstantin Savenkov]

Hi Ryan,

What translation feature do you mean? If it's Google Website Translator widget, it's deprecated for a couple of years and may cause such issues,

If you shared the specific html example you're translating or a link to your website, I could give some advice (we made quite a bit of such workarounds when built our own on-the-fly website translation widget at Intento).

cheers,

Konstantin.

[Ryan Mahoney]

Hi Konstantin,

Thanks for getting back to me, yes, unfortunately, it is the Google Website Translator widget. Our website is https://www.firedepartment.org/ and the translate button is in the upper right of the website.

Thank you,

Ryan

[Jun (Cloud Platform Support)]

Hi Ryan, 

Thanks for your reporting and information provided. Please notice that this discussion group is for Cloud Translation API general discussion, so you'll need to go to the correct support channel of Google Translate Help regarding your issue with the Google Website Translator widget so that you'll get a better assistance with your issue.