ARIA IDs are not unique - Lighthouse error on Marketo Forms

[Jitendra_Vyas]

We are using multiple forms of Marketo on a page. It’s giving an accessibility error of ARIA IDs are not unique.
Labels & span tags are taking duplicates IDs that got referenced by input tags in aria-labelledby attribute.

Below is an example of two forms on the same page. I have removed some parts of the code to highlight on form ID, label, and input tag only

Form 1 

<form id="mktoForm_1043">
<label for="FirstName" id="LblFirstName">First Name:</label>
<input id="FirstName" name="FirstName" aria-labelledby="LblFirstName InstructFirstName">
</form>

Form 2

<form id="mktoForm_1609">
<label for="FirstName" id="LblFirstName">First Name:</label>
<input id="FirstName" name="FirstName" aria-labelledby="LblFirstName InstructFirstName">
</form>

You will notice that the form ID is different but the value of the ID, name, and aria-labelledby by attribute is the same which is causing accessibility error in Lighthouse

Is there any solution for the same?

There is a unique id on every form of Marketo ‘mktoForm_1043’ if Marketo can add prefix or suffix form's unique id’s to form's label's to input and label's FOR, ID, Name and aria-labelledby attribute, can solve the problem. 

Like this

<form id="mktoForm_1609">
<label for="FirstName_1609"" id="LblFirstName_1609">First Name:</label>
<input id="FirstName_1609" name="FirstName_1609" aria-labelledby="LblFirstName_1609 InstructFirstName_1609">
</form>

[Darshil_Shah1 · Accepted solution]

You should refer Sandy's Multiple Marketo forms, multiple times… on the same page blog post.