Inputs missing labels & Labels missing inputs

[danspratling]

Proposal:

Inputs missing labels (often when Placeholders are being used as labels) might have unclear intentions.

Issue:

<input type="text" placeholder="Email" />

The placeholder in the above example is rarely read by screenreaders

Issue 2:

<label>Email</label>
<input type="text" />

The label in the above example exists, but is not associated with an element so will often be misinterpreted.

Solution:

<label for="email">Email Address</label>
<input name="email" type="text" />

The above is the best-accepted solution, which most screen readers understand (unlike <label><input></label>).

We should check 2 things

• Does a label have a for attribute present and populated
• Does an input have a name attribute present and populated

This won't account for if any inputs/labels have attributes present but their counterparts don't exist, however.

[jackdomleo7]

I like this. But what about this scenario, which I often do:

<label>
  <span>Email</span>
  <input type="email" />
</label>

I think the above solution would highlight this as an error? 🤔

I have to admit, my knowledge and research on this method in terms of accessibility where the <label> wraps the <input> is not solid.

[danspratling]

It would, but I think as someone suggested to us on twitter, this approach is flawed as some screen readers don't correctly associate the inner input with the wrapping label.

So maybe in this case we would show a warning?

Warning: some screen readers don't correctly understand labels not directly associated with inputs using for/name attributes. It is recommended adjusting the approach

[jackdomleo7]

Ok, that sounds good. I think we should look deeper into #4 first so this works effectively.

[Being-Maverick]

Hey @danspratling and @jackdomleo7 , I would like to resolve this issue. Please assign it to me.

[Lewiscowles1986]

I am so sorry for tagging this. It was a mistake #73 does not address this in any way

[jackdomleo7]

I merged #43 into branch valid_input_and_label and did a little more work.

It was throwing a false error for:

<label>
  Label
  <input />
</label>

And I don't think name is required on an <input>. It's only required if you want to send data to the server.

Either needs a lot more thought or accept we can't do it with CSS.

[jackdomleo7]

⚠ For anyone interested in re-picking this up, please refer to the valid_input_and_label branch where work on this has already begun.