<legend> — 폼 태그 도감

올바른 사용

fieldset의 첫 자식

그룹의 질문을 한 줄로

fieldset당 한 개

시각 숨김은 visually-hidden (제거 X)

라디오 그룹 라벨

<fieldset>
  <legend>성별을 선택하세요</legend>
  <label><input type="radio" name="gender" value="m" /> 남</label>
  <label><input type="radio" name="gender" value="f" /> 여</label>
  <label><input type="radio" name="gender" value="other" /> 기타</label>
</fieldset>

legend가 질문, label은 각 옵션.

시각 숨김

<fieldset>
  <legend class="sr-only">검색 옵션</legend>
  <label>
    <input type="checkbox" name="opt" value="a" /> A
  </label>
</fieldset>

시각적으로는 legend 없는 듯하지만 스크린리더에는 그룹 질문 발화.

자주 보는 안티패턴

legend 누락 — fieldset 의미 없음

legend가 fieldset의 첫 자식이 아님

여러 legend

p로 그룹 라벨 (legend가 정답)

legend 누락

<fieldset>
  <input type="radio" name="g" /> 남
  <input type="radio" name="g" /> 여
</fieldset>

fieldset 그룹 시맨틱 있지만 무엇을 선택인지 모름.

legend가 첫 자식 아님

<fieldset>
  <p>설명...</p>
  <legend>그룹 질문</legend>
  <input ... />
</fieldset>

HTML 명세 위반. legend는 fieldset 첫 자식.

해설

fieldset의 그룹 라벨. 그룹 안의 공통 질문을 한 줄로 표현. fieldset의 첫 자식이어야 시맨틱 작동. legend 없는 fieldset은 시맨틱 그룹이지만 이름 없는 그룹이라 의미가 약하다.

SEO 관점에서 직접 영향은 적다. 다만 명확한 폼이 완료율 높고 페이지 평가에 간접 작용.

GEO 관점에서 AI가 어느 그룹의 어느 옵션인지 정확히 식별. "성별을 선택하세요"가 legend면 — AI 자동 입력에서 "성별 그룹의 남자"로 명확. legend 없으면 각 옵션이 무엇의 옵션인지 추측.

A11y 관점에서 가장 critical. fieldset의 시맨틱은 legend가 결정. 각 라디오·체크박스에 포커스할 때마다 스크린리더가 legend + label을 함께 발화. "성별을 선택하세요, 남, 라디오, 3개 중 1번째". legend 없으면 "남, 라디오, 3개 중 1번째"만 — 무엇의 옵션인지 영원히 모름.

자주 보는 안티패턴: legend 누락(fieldset만 박고 질문 없음 — 시맨틱 그룹은 있지만 의미 없음), legend가 첫 자식 아님(HTML 명세 위반 — <fieldset><p>설명</p><legend>...</legend> 같이 다른 요소가 먼저면 일부 환경에서 legend 인식 안 됨), p로 그룹 라벨(legend가 정답 — "성별"을 일반 p로 두고 fieldset 외부에 두면 라디오에 연결 안 됨), 여러 legend(fieldset당 한 개만).

시각 숨김 legend — <legend class="sr-only">. 검색 폼이나 디자인상 그룹 질문이 시각적으로 표시되지 않아야 할 때. 시리즈 #2의 visually-hidden 패턴. 시맨틱은 유지, 시각만 숨김.

legend 스타일링의 어려움 — 브라우저 기본 스타일이 fieldset border와 겹쳐 일부 환경에서 어색. CSS로 display: contents나 float로 처리하는 트릭이 흔하지만 — 일부 환경에서 legend가 fieldset과 분리되어 시맨틱 깨질 수 있음. 안전한 패턴은 fieldset의 border 제거 후 legend 자유 스타일.

긴 폼의 섹션 — 개인 정보, 주소, 결제 같은 큰 섹션의 legend는 섹션 제목. h2 + p 패턴과 비슷하지만 시맨틱이 다르다 — 섹션 안의 입력 그룹임을 명시.

실명 가이드 — 한국 회원가입 폼의 성별, 약관 동의, 마케팅 수신 모두 라디오·체크박스 그룹. 모두 fieldset + legend로 마크업하는 게 표준. "필수 약관 동의"가 legend, 개별 약관이 label.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설