Lesson 07

Form help text and errors

Connect help and error text to the field so validation feedback is announced with the control.

forms
accessibility
errors

Good Code

password-field.html

<label for="password">Password</label>
<!-- aria-describedby connects both guidance and error text to the field. -->
<input
  id="password"
  name="password"
  type="password"
  aria-describedby="password-help password-error"
  aria-invalid="true"
/>
<p id="password-help">Use at least 12 characters.</p>
<p id="password-error">Password is too short.</p>

Bad Code

password-field.html

<label>Password</label>
<!-- Nearby text is visual only unless it is programmatically connected. -->
<input name="password" type="password" />
<p class="help">Use at least 12 characters.</p>
<p class="error">Too short.</p>

Review Notes

What to review

Good Code

The good version ties guidance and the current error to the input, and marks the field invalid when validation fails.

Bad Code

The bad version places text near the field visually, but the input has no durable relationship to the help or error message.

Takeaways

Use aria-describedby and aria-invalid to keep field guidance tied to the input.