Skip to main content

Curbcut WCAG AAA

Validation message

Field-level error text tied to its input, marked by more than color.

Enter the certificate number shown on the vaccination record.

Show the markup 
<div class="cc-field cc-field--error">
  <label class="cc-label" for="ex-val">Dog's rabies certificate number</label>
  <input class="cc-input" id="ex-val" aria-describedby="ex-val-error" aria-invalid="true">
  <p class="cc-validation" id="ex-val-error">Enter the certificate number shown on the vaccination record.</p>
</div>

Accessibility

  • The message links to the field via aria-describedby, and the field carries aria-invalid="true".
  • An icon and bold weight mark errors alongside color (1.4.1); the red meets 7:1 on the page background.
  • Say how to fix it, not just that it's wrong (3.3.3).
  • Pair with the Error summary for whole-form failures.