AI가 만든 신청 폼 검수: fieldset·legend로 질문과 선택지를 묶기
라디오 선택지마다 글자가 붙어 있어도 “무엇을 고르는 질문인지”가 빠질 수 있습니다. 관련 선택지는 fieldset으로 묶고 legend에 짧은 질문을 쓰세요. 각 선택지의 label도 따로 필요합니다.
1. 질문을 읽지 않고도 선택지를 이해할 수 있나요?
“직접 수령”, “택배 수령”은 선택지의 이름입니다. 이 둘이 답하는 질문은 “수령 방법”입니다. 화면에 질문을 굵게 쓰는 것과 입력 요소에 그 관계를 전달하는 것은 별도로 검수해야 합니다.
W3C WAI는 관련 폼 요소를 시각적으로, 코드 안에서도 묶으라고 안내합니다. fieldset은 관련 요소의 컨테이너이고 legend는 묶음의 제목입니다. 라디오 버튼 그룹은 이 구분을 확인하기 좋은 예입니다.
2. 수령 방법 예시를 요소별로 읽어 보세요
<fieldset>
<legend>수령 방법</legend>
<input type="radio" id="pickup" name="delivery" value="pickup">
<label for="pickup">직접 수령</label>
<input type="radio" id="shipping" name="delivery" value="shipping">
<label for="shipping">택배 수령</label>
</fieldset>| 요소 | 이 예시의 역할 |
|---|---|
| legend | “수령 방법”이라는 그룹 질문 |
| label for | 각 input의 고유id와 연결 |
| 같은name | delivery라는 하나의 라디오 그룹 |
| 다른value | pickup과shipping의 선택 결과 구분 |
위 코드는 설명을 위해 직접 작성한 기본 예시입니다. 실제 신청서의 서버 처리, 필수 입력 여부, 오류 안내는 포함하지 않았습니다. 같은 id를 여러 번 복사하지 말고 새 입력을 만들 때마다 연결 관계를 확인하세요.
3. AI 초안을 검수할 때는 관계를 질문하세요
“예쁘게 정리해 줘”에 이어 “어떤 입력들이 같은 질문에 답하는지, 그룹 제목과 개별 이름이 코드로 연결됐는지 설명해 줘”라고 요청해 보세요. 답변은 최종 확인을 대신하지 않으므로 실제 HTML과 조작 결과를 대조해야 합니다.
| 검수 질문 | 확인할 것 |
|---|---|
| 그룹의 질문이 짧고 명확한가 | legend의 문구 |
| 선택지별 이름이 연결됐나 | label for와input id |
| 다른 질문의 라디오가 섞이지 않나 | 그룹별name |
| 키보드로 선택 상태를 바꿀 수 있나 | 실제 브라우저의 포커스·선택 |
스크린리더가 legend를 언제 읽는지는 제품·설정에 따라 다를 수 있어 제목은 짧게 쓰는 편이 좋습니다. 특정 한 환경에서 읽혔다는 사실만으로 모든 이용자의 사용성을 완료했다고 말하지 마세요.
4. 자주 묻는 질문
legend가 있으면 각label은 없어도 되나요?
아닙니다. 그룹의 질문과 각 입력의 이름은 역할이 다릅니다. 예시에서도 legend와 각label을 함께 사용했습니다.
모든 입력을 하나의fieldset에 넣으면 되나요?
실제로 관련된 질문별로 묶으세요. 서로 무관한 입력 전체를 한 묶음으로 만드는 것이 목표는 아닙니다.
공식 원문 확인 2026.10.16: W3C WAI Forms Tutorial: Grouping Controls.
대표 썸네일은 AI 개념 삽화이며 본문 확인 도표는 직접 구성했습니다.
댓글
댓글 쓰기