3.3.1 오류 식별

요구 사항

입력 오류가 자동으로 감지되면, 오류가 있는 항목을 식별해 주고 그 오류를 사용자에게 텍스트로 설명해야 합니다.

• "입력 오류"에는 필수 항목 누락, 형식이 틀린 값(이메일·날짜), 허용 범위를 벗어난 값이 포함됩니다.
• 빨간 테두리나 아이콘만으로 표시하면 안 되며, 무엇이 잘못됐는지 글로 알려야 합니다(색만 쓰는 것은 1.4.1 위반이기도 합니다).
• 오류를 어떻게 고치는지까지 제안하는 것은 3.3.3 오류 수정 제안의 요구입니다.

왜 필요한가요

화면낭독기 사용자는 빨간 테두리를 볼 수 없고, 색각이상 사용자는 빨간색을 구분하지 못할 수 있습니다. 어느 항목에 어떤 문제가 있는지 텍스트로 알려 주어야 모든 사용자가 오류를 찾고 고칠 수 있습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 색각이상 사용자
• 저시력 사용자
• 인지장애·학습장애 사용자

적용 방법

오류 메시지를 해당 입력 필드 가까이에 텍스트로 표시하고, 필드에 aria-invalid="true"를 붙여 오류 상태임을 알리며, aria-describedby 또는 aria-errormessage로 메시지를 연결합니다. 제출 시 오류가 여러 개면 맨 위에 오류 요약을 두고 첫 오류 필드나 요약으로 포커스를 옮깁니다.

<label for="email">이메일 <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" required
       aria-invalid="true" aria-describedby="email-err">
<p id="email-err" class="error">오류: 이메일 주소 형식이 올바르지 않습니다.</p>

<!-- 제출 후 이 영역에 포커스를 옮깁니다: errorSummary.focus() -->
<div id="error-summary" tabindex="-1" aria-labelledby="es-title">
  <h2 id="es-title">입력 내용에 오류가 2개 있습니다</h2>
  <ul>
    <li><a href="#email">이메일 주소 형식이 올바르지 않습니다.</a></li>
    <li><a href="#phone">휴대전화 번호를 입력하세요.</a></li>
  </ul>
</div>

더 자세한 구현은 폼 유효성 검사 패턴과 폼 가이드를 참고하세요.

사례

<input id="email" style="border-color: red">

<input id="pw" type="password" aria-invalid="true" aria-errormessage="pw-err">
<p id="pw-err">비밀번호는 8자 이상이어야 합니다.</p>

자주 하는 실수

• 오류 필드를 빨간 테두리·아이콘 등 색과 모양으로만 표시합니다.
• "입력 내용을 확인하세요"처럼 어느 항목이 잘못됐는지 알 수 없는 메시지만 보여 줍니다.
• 오류 메시지가 화면에는 나타나지만 필드와 연결되지 않고 알림도 없어 화면낭독기 사용자가 알 수 없습니다.
• 오류 상태가 해결된 뒤에도 aria-invalid="true"를 남겨 둡니다.

검사 방법

• 필수 항목을 비우거나 형식이 틀린 값을 넣고 제출합니다.
• 오류가 있는 항목과 오류 내용이 텍스트로 표시되는지 확인합니다.
• 화면낭독기로 오류 필드에 포커스했을 때 "잘못됨(invalid)" 상태와 오류 메시지가 읽히는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.3.1 (새 창)
• ARIA21: aria-invalid로 오류 필드 표시하기 (새 창)