ARIA IDs are not unique - Lighthouse error on Marketo Forms
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>