3.3.2 레이블 또는 지시문

요구 사항

콘텐츠가 사용자 입력을 요구할 때 레이블 또는 지시문을 제공해야 합니다. 무엇을 입력하는지(이름, 이메일), 필수인지, 어떤 형식인지(예: YYYY-MM-DD, 숫자만) 같은 정보를 입력 전에 알 수 있어야 합니다.

이 기준은 "눈에 보이는" 레이블·안내가 있는지가 핵심입니다. 프로그램적으로 연결되는지(<label for>)는 1.3.1과 4.1.2에서 다루지만, 실무에서는 함께 지킵니다. 플레이스홀더(placeholder)는 입력을 시작하면 사라지므로 레이블을 대신할 수 없습니다.

레이블이 너무 많으면 오히려 혼란스러우므로, 필요한 안내를 간결하게 제공하는 것이 목표입니다.

왜 필요한가요

무엇을 어떤 형식으로 입력해야 하는지 모르면 오류가 생기고 다시 입력해야 합니다. 인지장애가 있는 사용자는 플레이스홀더가 사라지면 무엇을 입력하던 중인지 잊을 수 있고, 화면 확대 사용자는 멀리 떨어진 안내를 보지 못할 수 있습니다.

도움받는 사용자

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

적용 방법

모든 입력 필드에 보이는 레이블을 붙이고, 형식·필수 여부 같은 안내는 필드 가까이에 두고 aria-describedby로 연결합니다. 필수 표시(*)를 쓰면 그 의미를 폼 위쪽에 설명하고, required 또는 aria-required로 프로그램에도 알립니다.

<input type="text" placeholder="생년월일">

<label for="birth">생년월일 (필수)</label>
<input id="birth" name="birth" inputmode="numeric"
       required aria-describedby="birth-hint">
<p id="birth-hint">숫자 8자리로 입력하세요. 예: 19900115</p>

여러 칸으로 나뉜 입력(전화번호 3칸, 주소 등)은 <fieldset>과 <legend>로 묶어 그룹 이름을 주고, 각 칸에도 이름을 줍니다.

<fieldset>
  <legend>휴대전화 번호</legend>
  <input aria-label="앞자리" maxlength="3" inputmode="numeric"> -
  <input aria-label="가운데 자리" maxlength="4" inputmode="numeric"> -
  <input aria-label="뒷자리" maxlength="4" inputmode="numeric">
</fieldset>

자세한 내용은 폼 가이드와 접근 가능한 이름 가이드를 참고하세요.

사례

<form role="search">
  <label for="q">사이트 검색</label>
  <input id="q" type="search" name="q">
  <button type="submit">검색</button>
</form>

자주 하는 실수

• 플레이스홀더만 있고 보이는 레이블이 없습니다.
• 날짜·전화번호처럼 형식이 정해진 입력에 형식 안내가 없습니다.
• 필수 항목을 색(빨간 레이블)으로만 구분합니다.
• 여러 칸으로 나뉜 입력에서 일부 칸에만 레이블이 있습니다.

검사 방법

• 모든 입력 필드·선택 컨트롤에 보이는 레이블이나 안내가 있는지 확인합니다.
• 필수 여부와 형식 요구 사항이 입력 전에 안내되는지 확인합니다.
• 화면낭독기로 각 필드에 포커스했을 때 레이블과 안내가 함께 읽히는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.3.2 (새 창)