오류 정정

무엇을 요구하나요?

입력 오류가 있을 때 사용자가 오류를 알아차리고, 원인을 이해하고, 고칠 수 있어야 합니다.

1. 어느 칸이 틀렸는지 알린다
2. 왜 틀렸는지, 어떻게 고치면 되는지 글자로 알린다
3. 고칠 수 있게 해당 칸으로 이동시킨다 (입력한 다른 값은 유지)

자주 틀리는 예

1. 빨간 테두리만 표시

<input id="email" class="is-error">

<label for="email">이메일</label>
<input id="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" class="error">이메일 형식이 아닙니다. 예: name@example.com</p>

• aria-invalid="true": 화면 낭독기가 “잘못된 입력”이라고 알려줍니다.
• aria-describedby: 칸에 들어가면 오류 문구를 함께 읽습니다.

2. 제출 후 초점이 그대로라 오류를 모름

form.addEventListener('submit', (e) => {
  if (!validate()) e.preventDefault();
});

form.addEventListener('submit', (e) => {
  const errors = validate(); // [{ field, message }]
  if (!errors.length) return;
  e.preventDefault();
  errors.forEach(({ field, message }) => showError(field, message));
  errors[0].field.focus(); // 첫 오류 칸으로
  summary.textContent = `입력 오류 ${errors.length}건이 있습니다.`; // role="alert" 영역
});

3. 오류 후 입력한 값이 모두 지워짐

서버에서 오류를 돌려줄 때 입력한 값을 모두 지우면 처음부터 다시 입력해야 합니다. 비밀번호 같은 민감한 값을 빼고는 입력값을 유지하세요.

확인하는 방법

1. 필수 칸을 비우고, 형식이 틀린 값을 넣고 제출해 보세요. 어느 칸, 왜, 어떻게가 글자로 나오는지 확인하세요.
2. 화면 낭독기로 제출했을 때 오류가 읽히는지, 초점이 오류 칸으로 가는지 확인하세요.
3. 오류 표시가 색으로만 되어 있지 않은지 확인하세요. (5.4.1 색에 무관한 콘텐츠 인식 참고)