How to add 'for' attribute to 'label' elements of non-hidden 'input' elements?

[diegocanal]

Hi Ally,

I would like to add the “for” attribute to all <label> elements that are related to a non-hidden <input> element. The best practice is that all non-hidden inputs should have a matching label, e.g., if you have <input id="foo">, you should have a corresponding label like <label for="foo">.

Thanks!

Best regards,
Diego

• This topic was modified 7 years, 6 months ago by diegocanal.

[support]

Hi,

Have you tried using the .attr() property with Javascript (jQuery) to add the “for” attribute to the selected element ? You can see an example here.

Hope this helps !
Regards,

Félix

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[diegocanal]

Hi Félix,

I will give it a try sometime but I do not think I am going to use it now as I tend to use as little Javascript as possible, for performance reasons.

Thank’s for the tip!

Regards
Diego

[diegocanal]

Hi Ally,

You hit the nail on the head, exactly, my request was for Checkboxes and Radio Buttons (Multiple Choice) but I have taken a look and there are others, so the list ends up like this:

• Checkboxes
• Radio Buttons (Multiple Choice)
• Date
• Time
• File Upload
• reCAPTCHA

Thank you!

Regards
Diego

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[diegocanal]

Hi Ally,

Thanks for taking this into consideration.

I am not an expert on accesibility matters but I think one way to go for Date and Time would be to add new labels –with heir corresponding for attributes– one for each single menu (day, month, year, hour, minutes, am/pm) positioning them off-screen –as using display: none or/and visibility: hidden; would hide them from the screen readers too– that could be achieved styling them as follows:

.hidden_labels {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

Of course there could be an option to turn the visibility of those labels on and off in case the user wants to show them, but perhaps that would be too much extra work as they would have to be acommodated between the current main labels (e.g. “Date of arrival” or “Start time”) and the single menus, for those labels (the main ones) we could add the aria-labelledby attribute in each single menu (input/select).

References:

• Creating Accessible Forms • Advanced Form Labeling
• Invisible Content Just for Screen Reader Users

Regarding the reCAPTCHA, you are right, sorry I had not realized when I posted that it does not have a visible input with id.

Regards,
Diego

• This reply was modified 7 years, 5 months ago by diegocanal.

[support]

Hi Diego,

Thanks a lot for your time and contribution ! We will look into this for the next major update.

Regards,

Félix

[Author]

Posts