<label for="idx"> vs <label for="namex"> [migrated]
I'm working implementing a WCAG accessiblity report for a major website. Predictably, one of the recurring issues is labels in forms.
Until now, I had presumed that the correct way to associate a form label with it's element was to use the input element's name in the label's form attribute, like so:
<label for="name[1]">Your name: </label>
<input type="text" name="name[1]" placeholder="Your name">
However the framework the client is used prefers to spit out code like this:
<label for="user_first_name">Your name: </label>
<input type="text" name="name[1]" id="user_first_name" placeholder="Your name">
My logic was based on the understanding that not all form elements have the 'ID' attribute allowing them to be uniquely manipulated by the DOM (e.g. CSS and Javascript), but all POST- and GET- method form elements do have the 'name' attribute allowing to submit data to a remote server, the most common use for a client-side browser form.
I do not want to submit a PR to the client with a faulty understanding of the purpose of the "for" attribute in label tags which will cause them to fail their next WCAG audit.
So which is it?