SOLVED

ARIA IDs are not unique - Lighthouse error on Marketo Forms

Go to solution
Jitendra_Vyas
Level 1

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


image (14).png

 

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 FORID, 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>

 

1 ACCEPTED SOLUTION

Accepted Solutions
Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: ARIA IDs are not unique - Lighthouse error on Marketo Forms

1 REPLY 1
Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: ARIA IDs are not unique - Lighthouse error on Marketo Forms

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