디자인 아틀라스
EN
◉ 접근성

오류 식별

Error Identification

폼 검증 오류가 났을 때 어떤 필드가 왜 틀렸는지 텍스트로, 그리고 프로그래밍적으로 명확히 알려주는 것.

다른 이름: 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);

빨간 테두리만 두르는 오류 표시는 색맹 사용자에게 잘 안 보이고(→ color-not-alone), 스크린 리더 사용자에게는 아예 존재하지 않는 정보입니다. 제대로 된 오류 표시는 어떤 필드가 틀렸는지, 왜 틀렸는지를 **글자로** 알려주고, `aria-describedby`로 입력 필드와 오류 메시지를 프로그래밍적으로 연결하고, `aria-invalid="true"`로 필드 자체의 상태를 표시합니다.

이렇게 연결하면 스크린 리더가 필드에 포커스를 줄 때 필드 이름과 오류 설명을 함께 읽어줍니다("Email, invalid, enter a valid email address"). 오류가 생겼을 때 포커스를 첫 번째 오류 필드로 옮기거나 요약을 `aria-live`로 알리면 더 나은 경험이 됩니다.

데모는 같은 유효하지 않은 입력을 두 가지로 처리합니다 — 테두리만 빨개지는 왼쪽과, 오류 문구가 함께 나타나는 오른쪽입니다.

언제 쓰나

폼 검증 로직을 짤 때 오류 상태와 오류 메시지를 항상 한 쌍으로 다루세요. aria-describedby는 오류 메시지가 나타났다 사라질 때 동적으로 붙였다 떼는 걸 잊기 쉬운 부분입니다.