ErrorMessage

The message saying what to fix in a field, right below it.

Playground

<div class="feitio-field"><label class="feitio-label" for="pg-em">Time</label><input class="feitio-input" aria-invalid="true" aria-describedby="pg-em-error" data-width="10" id="pg-em" value="25:00"><span class="feitio-error-message" id="pg-em-error"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Use a time between 00:00 and 23:59</span></div>

When to use

• When a field comes back with a problem: one per field, always with the ErrorSummary at the top.

When not to use

• For a whole-page problem (the connection dropped): an error Notice.
• While the person is still typing: do not flag an error before they submit.

Examples

<div class="feitio-field">
  …
  <span class="feitio-error-message" id="hora-erro">
    <svg class="feitio-icon" aria-hidden="true">…</svg>Use um horário entre 00:00 e 23:59
  </span>
</div>

Do and don’t

Writing

• Say how to get it right, not just that it is wrong.
• The same sentence in the field and in the summary at the top.
• No "please", no apology, no exclamation mark.

Accessibility

• Tied to the field through aria-describedby, and the field gets aria-invalid="true".
• Color, icon and word: the error reads without telling the wine apart.

Attributes