aria-invalid

설명

aria-invalid는 입력 요소의 값이 유효성 검사를 통과하지 못했음을 알립니다. 화면낭독기는 필드에 포커스가 갈 때 “잘못된 입력”처럼 읽어, 사용자가 어떤 필드를 고쳐야 하는지 알 수 있게 합니다. 시각적으로 빨간 테두리로만 오류를 표시하면 색을 구분하기 어려운 사용자와 화면낭독기 사용자는 오류를 알 수 없으므로(WCAG 3.3.1 오류 식별), 이 속성과 텍스트 오류 메시지를 함께 제공해야 합니다.

오류 메시지 자체는 aria-describedby(또는 aria-errormessage)로 필드에 연결합니다. 이 속성은 “틀렸다”는 사실만 알리고, “무엇이 왜 틀렸는지”는 메시지가 전달합니다. 제출 버튼을 눌렀을 때 오류가 여러 개라면 첫 번째 오류 필드로 포커스를 옮기거나 오류 요약을 보여 주는 것이 좋습니다.

언제 true로 바꿀지가 중요합니다. 사용자가 아직 입력하지 않은 빈 필수 항목을 페이지 로드 시점부터 true로 표시하면 안 됩니다. 보통 제출 시점이나 필드를 떠날 때(blur) 검사해 설정하고, 사용자가 값을 고쳐 유효해지면 즉시 제거하거나 false로 바꿉니다. grammar와 spelling은 문법·맞춤법 오류를 감지하는 편집기용 값이며, 지원하는 화면낭독기가 많지 않습니다.

테스트할 때는 잘못된 값을 넣고 제출했을 때 필드에서 “잘못된 입력”과 오류 메시지가 함께 읽히는지, 값을 고친 뒤에는 오류 상태가 사라지는지, 페이지 첫 로드 때 오류 상태가 붙어 있지 않은지 확인합니다.

값

사용 예

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

function validate(input, errEl) {
  var ok = input.checkValidity();     // HTML 제약 검증 결과 활용
  if (ok) {
    input.removeAttribute('aria-invalid');
    errEl.textContent = '';
  } else {
    input.setAttribute('aria-invalid', 'true');
    errEl.textContent = '이메일 형식이 올바르지 않습니다.';
  }
  return ok;
}
input.addEventListener('blur', function () { if (input.value) validate(input, errEl); });

<!-- 페이지 로드 직후, 사용자가 아무것도 입력하지 않았는데 -->
<input id="name" type="text" required aria-invalid="true">

<input id="phone" type="tel" aria-invalid="true" class="red-border">

직접 해 보기

이메일을 잘못 입력하고 입력란을 벗어나거나 “확인”을 눌러 보세요. 올바르게 고치면 오류 상태가 사라집니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-invalid (새 창)
• MDN: aria-invalid (새 창)
• WCAG 2.2 이해: 3.3.1 Error Identification (새 창)
• WAI 튜토리얼: 사용자 알림 (Forms) (새 창)