#33 make me one (input) with everything

submitted on by Moritz Gießmann

The good intentions were there but in the HTML and Accessibility world, less is sometimes more.

Bad code

<label for="textinput">First name</label>
<input type="text" id="textinput" aria-label="First name" placeholder="First name" title="First name">

Issues and how to fix them

  1. The aria-label, placeholder, and title attributes all provide the same informaton ("First name"), leading to the screenreader reading the same text multiple times.
  2. The aria-label is unnecessary since the input is already correctly labeled by the <label> element. <label> elements should be preferred to aria-label since they are also visible to sighted users.
  3. The title attribute is not needed here, as the label and placeholder already convey the necessary information. Using title in this context adds unnecessary complexity.
  4. The placeholder text should provide a hint / example to the user what kind of input is expected, it should not act as a label or contain the same content.

Good code

<label for="textinput">First name</label>
<input type="text" id="textinput">

Resources