Multiple form labels - Lightbox

Question

I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.

Errors is Multiple form labels What It Means A form control has more than one label associated with it.

The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.

Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?

Since `id` is required to be unique across the entire page, changing it *is* the quick and easy way. — Ouroborus, Jul 05 '19 at 05:16

score 1 · Accepted Answer · edited Nov 03 '22 at 18:55

1

From W3Schools:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.

edited Nov 03 '22 at 18:55

TylerH

20,799
66
75
101

answered Jul 05 '19 at 21:15

Vincent Passau

814
8
22

score 0 · Answer 2 · answered Jul 26 '19 at 01:45

One way to fix this other than changing IDs is to wrap the input in the label.

<label>
    First Name
<input />
</label>

This is semantically correct and avoids the labels needing for and associated input id attributes.

You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)

See: https://stackoverflow.com/a/774065/2702894

Multiple form labels - Lightbox

2 Answers2