폼 에러 메시지/필수 표시 규칙 정리(검수 대응)

공공기관 검수 대응 가이드

공공기관 고도화에서
폼 영역은 접근성 QA의 핵심 체크 대상이다.

특히 자주 지적되는 항목:

• 필수 입력 표시가 시각적으로만 존재
• 에러 메시지가 입력창과 연결되지 않음
• 포커스 이동 미흡
• 색상으로만 상태 구분
• placeholder를 label처럼 사용

이번 글은
실무에서 바로 적용 가능한 규칙 중심으로 정리한다.

 

 

필수 표시 규칙 정리

 

 

1. 필수 입력 표시 규칙

❌ 자주 틀리는 방식

<!-- HTML -->

<label>이름 *</label>
<input type="text">

 

문제:

• *가 시각적으로만 의미 있음
• 스크린리더는 필수인지 모름

✅ 올바른 방식

<!-- HTML -->

<label for="username">
  이름 <span aria-hidden="true">*</span>
</label>
<input 
  type="text" 
  id="username"
  required
  aria-required="true">

 

핵심 포인트

• required 속성 사용
• aria-required="true" 명시
• 별표는 aria-hidden 처리

필수 안내 문구도 필요

폼 상단에

표시는 필수 입력 항목입니다.

 

같은 안내 문구를 제공하면 더 좋다.

---

2. 에러 메시지 구조 규칙

❌ 잘못된 구조

 

<!-- HTML -->

<input type="text">
<p class="error">이름을 입력하세요.</p>

 

문제:

• 입력 필드와 에러 메시지 연결 안 됨

✅ 올바른 구조

<!-- HTML -->

<label for="username">이름</label>
<input 
  type="text"
  id="username"
  aria-describedby="username-error"
  aria-invalid="true">

<p id="username-error" class="error">
  이름을 입력하세요.
</p>

 

핵심 포인트

• aria-describedby로 연결
• aria-invalid="true" 상태 표시
• id로 관계 명확화

---

3. 에러 발생 시 포커스 이동

공공기관 QA에서 자주 지적됨.

제출 시 에러가 있다면:

• 첫 번째 에러 필드로 포커스 이동
• 에러 메시지가 읽히도록 구성

JS 예시:

document.querySelector('.error-field').focus();

포커스가 이동하지 않으면
접근성 미흡 판정 받을 수 있다.

---

4. 색상만으로 상태를 구분하지 말 것

1. 빨간 테두리만 표시
2. 텍스트 없이 색상만 변경

✔ 아이콘 + 텍스트 + 색상 조합 권장

---

5. placeholder는 label이 아니다

❌ 잘못된 예

<!-- HTML -->

<input type="text" placeholder="이름">

문제:

1. 입력하면 사라짐
2. 스크린리더에서 불명확
3. WCAG 위반 가능성

✔ label은 반드시 존재해야 한다.

---

6. 필수/선택 구분 방법

권장 패턴:

<!-- HTML -->

<label for="phone">
  연락처 
  <span class="required" aria-hidden="true">*</span>
</label>
<input 
  id="phone"
  required
  aria-required="true">

 

선택 항목은 별도 표시:

<!--HTML -->

<label for="memo">
  메모 (선택)
</label>

---

7. 실전 체크리스트 (검수 대응용)

필수 표시

• required 속성 존재
• aria-required="true"
• 별표는 aria-hidden
• 필수 안내 문구 제공

에러 메시지

• aria-describedby 연결
• aria-invalid 사용
• 포커스 이동 구현
• 색상 외 텍스트 제공

구조

• label 반드시 존재
• placeholder를 label로 대체하지 않음
• 입력 그룹 시 fieldset/legend 사용

---

8. fieldset / legend 사용 예 (그룹형)

<!-- HTML -->

<fieldset>
  <legend>성별 선택</legend>

  <label>
    <input type="radio" name="gender" value="male">
    남성
  </label>

  <label>
    <input type="radio" name="gender" value="female">
    여성
  </label>
</fieldset>

라디오/체크박스 그룹은
fieldset + legend가 기본이다.

 

---

 

정리

폼 접근성은

“에러가 나면 빨갛게 바꾸는 것”

이 아니라

“관계를 명확히 연결하는 것”

이다.

 

필수 표시, 에러 연결, 포커스 이동.

이 세 가지만 정확히 지켜도
QA 통과 확률이 크게 올라간다.