7.3.1 오류 정정

요구 사항

입력 서식을 작성하다 사용자의 실수로 오류가 생기면 이를 정정할 수 있는 방법을 제공합니다.

• 사용자 입력 오류 안내: 오류가 발생한 위치와 오류를 유발한 이유를 알려 줍니다. 예를 들어 이름·주소·전화번호·이메일 중 일부를 빼고 제출했다면 어떤 항목이 누락되었는지 알려 줍니다.

시스템이나 플랫폼에서 발생한 오류에는 적용되지 않습니다.

KWCAG 2.1의 해당 항목: 7.4.2 오류 정정(7.4 입력 도움 지침)

왜 필요한가요

오류 표시가 색이나 아이콘뿐이면 시각장애인은 어디가 틀렸는지 알 수 없습니다. 오류 내용을 텍스트로 알려 주고 오류 위치로 초점을 옮겨 주면 누구나 쉽게 고칠 수 있고, 학습장애가 있는 사용자도 서식을 끝까지 작성할 수 있습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 저시력 사용자
• 학습장애·인지장애가 있는 사용자
• 고령자

적용 방법

제출 시 오류가 있으면 입력값을 지우지 말고, 오류 메시지를 해당 입력란 가까이에 텍스트로 표시해 aria-describedby로 연결하고 aria-invalid="true"를 지정합니다. 첫 번째 오류 입력란이나 오류 요약으로 초점을 옮깁니다. 자세한 방법은 폼 유효성 검사 패턴을 참고하세요.

<div role="alert" id="err-summary" tabindex="-1">
  <h2>입력 내용을 확인해 주세요 (2건)</h2>
  <ul>
    <li><a href="#phone">휴대전화 번호를 입력해 주세요.</a></li>
    <li><a href="#email">이메일 형식이 올바르지 않습니다. 예: name@example.com</a></li>
  </ul>
</div>

<label for="email">이메일</label>
<input id="email" type="email" value="name@" aria-invalid="true" aria-describedby="email-err">
<p id="email-err">이메일 형식이 올바르지 않습니다. 예: name@example.com</p>

사례

<p id="pw-err">비밀번호에 특수문자가 1자 이상 필요합니다.</p>

alert('입력 오류');

자주 하는 실수

• 오류 항목을 빨간 테두리로만 표시하고 텍스트 설명이 없습니다.
• “입력값이 올바르지 않습니다”처럼 어떤 항목이 왜 틀렸는지 알 수 없습니다.
• 제출 후 오류가 나면 입력한 내용이 모두 지워집니다.
• 오류 메시지가 화면에만 나타나고 화면낭독기에 전달되지 않습니다.

검사 방법

• 필수 항목을 비우거나 형식에 맞지 않게 입력해 제출합니다.
• 오류가 난 항목과 원인이 텍스트로 안내되는지, 입력값이 유지되는지 확인합니다.
• 화면낭독기로 오류 메시지가 전달되는지(초점 이동 또는 라이브 리전), 오류 항목으로 쉽게 이동할 수 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목