aria-errormessage

설명

aria-errormessage는 입력 요소와 그 오류 메시지를 연결합니다. 사용자가 잘못된 값을 입력해 aria-invalid가 true가 되면, 보조기술은 연결된 요소의 내용을 "이 입력의 오류 메시지"로 안내합니다.

명세 규칙이 엄격합니다. 반드시 aria-invalid와 함께 써야 하며, 브라우저는 aria-invalid="false"이거나 속성이 없으면 aria-errormessage를 노출하지 않습니다. 값이 올바른 동안에는 오류 메시지 요소를 숨기거나 aria-errormessage를 제거하고, 오류가 생기면 메시지를 화면에 보이게 해야 합니다. 새로 나타난 오류를 즉시 알리고 싶다면 메시지를 라이브 리전(aria-live, alert) 안에 넣습니다.

ARIA 1.2에서 이 속성은 전역 속성이 아닙니다. textbox, searchbox, combobox, checkbox, switch, radiogroup, listbox, slider, spinbutton, gridcell, tree, application 등 값을 입력·선택하는 역할에 씁니다. 네이티브 <input>, <select>, <textarea>도 해당 역할을 가지므로 사용할 수 있습니다.

보조기술 지원은 꾸준히 개선되었지만 여전히 고르지 않습니다. 최신 JAWS와 NVDA는 Chrome·Edge·Firefox에서 오류 메시지를 읽지만, 버전이나 브라우저·모바일 화면낭독기 조합에 따라 읽지 않는 경우가 있습니다. 그래서 실무에서는 오류 메시지를 aria-describedby에도 함께 연결하는 방법이 널리 쓰입니다(이 경우 같은 문장이 두 번 읽힐 수 있으니 실제 환경에서 들어 보고 결정합니다).

검수할 때는 오류가 났을 때 aria-invalid="true"로 바뀌는지, 메시지가 보이고 내용이 구체적인지(무엇이 틀렸고 어떻게 고치는지), 오류를 고치면 aria-invalid와 메시지가 함께 정리되는지, 오류 메시지가 색만으로 구분되지 않는지 확인합니다. WCAG 3.3.1 오류 식별, 3.3.3 오류 수정 제안과 관련됩니다.

값

사용 예

<!-- 값이 올바른 상태: 메시지는 숨김 -->
<label for="email">이메일</label>
<input id="email" type="email" aria-invalid="false" aria-errormessage="email-err">
<p id="email-err" class="error" hidden></p>

<!-- 잘못된 값을 입력한 뒤 -->
<input id="email" type="email" aria-invalid="true" aria-errormessage="email-err">
<p id="email-err" class="error">이메일 형식이 올바르지 않습니다. 예: [email protected]</p>

function validate(input, msg) {
  const ok = input.validity.valid && input.value.trim() !== '';
  input.setAttribute('aria-invalid', String(!ok));
  msg.textContent = ok ? '' : '이메일 형식이 올바르지 않습니다. 예: [email protected]';
  msg.hidden = ok;
  return ok;
}
form.addEventListener('submit', (e) => {
  if (!validate(email, emailErr)) { e.preventDefault(); email.focus(); }
});

<!-- 비권장: aria-invalid가 없어 오류 메시지가 노출되지 않고, 메시지가 늘 보임 -->
<input id="phone" aria-errormessage="phone-err">
<p id="phone-err">숫자만 입력하세요.</p>

<input id="email" type="email" aria-invalid="true"
       aria-errormessage="email-err" aria-describedby="email-hint email-err">
<p id="email-hint">회사 이메일을 입력합니다.</p>
<p id="email-err">이메일 형식이 올바르지 않습니다.</p>

직접 해 보기

이메일을 잘못 입력하고 "확인"을 누르거나 입력 상자를 벗어나 보세요. aria-invalid가 바뀌고 aria-errormessage가 가리키는 메시지가 나타납니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-errormessage (새 창)
• WCAG 2.2 이해하기: 3.3.1 오류 식별 (새 창)
• WCAG 2.2 이해하기: 3.3.3 오류 수정 제안 (새 창)
• W3C WAI: 폼 사용자 알림 튜토리얼 (새 창)
• MDN: aria-errormessage (새 창)
• a11ysupport.io: aria-errormessage 지원 현황 (새 창)