Design Atlas
한국어
◉ Accessibility

Error Identification

오류 식별

Telling a user which field failed validation and why, both visually and programmatically — not just with a red border.

Also known as: Form error messages
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">✗ 테두리만</div>
    <div class="field err"></div>
  </div>
  <div class="pane">
    <div class="tag">✓ 문구 + aria-describedby</div>
    <div class="field err"></div>
    <div class="msg" id="msg">Enter a valid email address</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:8%;padding:0 8%}
.tag{position:absolute;top:8px;left:10px;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.field{height:22%;border-radius:8px;border:1.5px solid var(--accent-2);background:var(--bg)}
.msg{font:700 10.5px/1.3 ui-monospace,monospace;color:var(--accent-2);opacity:0;transition:opacity .3s ease}
.msg.show{opacity:1}
js
const msg = document.getElementById('msg');
function loop() {
  msg.classList.add('show');
  setTimeout(function () { msg.classList.remove('show'); }, 1800);
}
loop();
setInterval(loop, 2600);

An error shown by red border alone is hard to see for colorblind users (see color-not-alone) and simply doesn't exist for screen reader users. A properly built error tells the user which field failed and why, **in words**, programmatically ties the input to that message with `aria-describedby`, and marks the field's own state with `aria-invalid="true"`.

Wired up this way, a screen reader announces the field name and its error together when focus lands on it — 'Email, invalid, enter a valid email address.' Moving focus to the first invalid field, or announcing a summary through `aria-live`, makes the experience even better.

The demo handles the same invalid input two ways: left just turns the border red; right shows the error message inline alongside it.

When to use

When building form validation, always treat error state and error message as one pair, never state alone. aria-describedby is easy to forget to wire and unwire dynamically as the message appears and disappears.