SOYOYU
폼

<label>

폼 컨트롤의 사람 친화 라벨. input과 명시적으로 연결되어야 의미.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●●○○중간

폼 사용성 신호. 완료율 ↑가 페이지 task success로 작용.

GEO

●●●●○높음

AI 자동 폼 입력에서 라벨이 필드 식별 1순위 신호. autocomplete와 함께.

AEO

●●○○○낮음

답변 인용에 직접 영향 적음.

A11y

●●●●●결정적

WebAIM Million 상위 결함 1위. 라벨 누락은 시각장애 사용자에게 폼이 닫힌 것과 동등.

올바른 사용

  • for 속성으로 input의 id와 연결
  • 또는 wrapping label로 감싸기
  • 모든 input·textarea·select에 필수
  • placeholder는 label 대체 아님
for/id 연결
<label for="email">이메일</label>
<input id="email" type="email" />

가장 일반적인 패턴. id와 for가 정확히 매칭.

wrapping label
<label>
  이메일
  <input type="email" />
</label>

input을 label 안에 감싸면 for/id 없이도 자동 연결.

시각 숨김 라벨
<label for="search" class="sr-only">사이트 검색</label>
<input id="search" type="search" placeholder="검색어 입력" />

디자인상 label을 안 보이게 — visually-hidden CSS. 시맨틱 보존.

자주 보는 안티패턴

  • placeholder만 있고 label 누락
  • for/id 연결 누락
  • 시각만 라벨 같은 div
  • aria-label로만 (visible label이 있어야 표준)
placeholder만
<input type="email" placeholder="이메일" />

입력 시작하면 placeholder 사라짐. 스크린리더 "편집"만.

라벨 같은 div
<div className="label">이메일</div>
<input type="email" />

시각만 라벨처럼, 시맨틱 0. label-input 연결 끊김.

해설

폼 컨트롤의 사람 친화 이름. input·textarea·select 모두에 반드시 짝이 되어야 한다. WebAIM Million(매년 상위 100만 홈페이지 a11y 분석)에서 label 누락은 거의 항상 상위 1-2위 결함.

SEO 관점에서 폼 사용성 신호. 라벨이 있는 폼이 완료율 높고, 페이지의 task success rate가 페이지 평가에 간접 작용.

GEO 관점에서 AI 에이전트(Anthropic Computer Use, OpenAI CUA)가 폼을 자동 입력할 때 — 어느 칸이 이메일이고 어느 칸이 전화번호인지 식별의 1순위 신호가 label. autocomplete 표준값과 결합하면 거의 100% 정확.

A11y 관점에서 가장 critical. 라벨 없는 input은 스크린리더가 "편집"으로만 발화. 사용자는 무엇을 입력해야 하는지 모른 채 빈 칸 앞에 선다. 시각장애 사용자에게 폼이 닫힌 것과 같은 효과.

자주 보는 안티패턴: placeholder만(입력 시작 시 사라져 내가 무엇을 채우고 있는지 망각), for/id 연결 누락(시각적으로 라벨 옆에 input이 있어도 시맨틱은 끊김 — label 클릭이 input 포커스 안 잡음), 라벨 같은 div(시각만, 시맨틱 0), aria-label로만 visible label 대체(시각 사용자도 읽고 인지할 라벨이 필요).

for/id 연결 vs wrapping label — 둘 다 시맨틱 동일. wrapping은 동적 React 컴포넌트에서 id 생성이 어려울 때 유리. for/id는 명시적이고 라벨과 input이 떨어져 있어도 작동.

시각 숨김 라벨(visually-hidden) — 디자인상 라벨이 안 보여야 할 때(검색창 같은) 표준. display: none이 아닌 시각만 숨기고 스크린리더에는 노출. 시리즈 #2에서 다룬 .sr-only 클래스.

라벨 + autocomplete + type — 시리즈 #2와 #11에서 다룬 폼 자동 입력의 삼위일체. 이 세 가지가 모두 있으면 AI 에이전트와 패스워드 매니저의 자동 입력 정확도가 거의 100%.

라이브러리 — Headless UI Field가 label/input/description의 자동 id 생성과 연결을 제공. Radix Form도 동일. 직접 for/id 박을 때보다 실수가 적은 선택지.