섹션엔 제목, 필드엔 이름

KRDS BP-079 — 입력폼 각 섹션에 제목을 제공하고, 각 입력 필드와 입력폼에 이름을 제공하고 있다.

0. 들어가며 — 폼이 무슨 묶음인지, 필드가 무슨 칸인지

이번 645편은 입력폼 각 섹션에 제목을 제공하고, 각 입력 필드와 입력폼에 이름을 제공하라는 규칙입니다.

긴 폼이 — 섹션 제목 없이 필드만 줄줄이 있으면 구조가 안 보이고, 필드·폼에 이름이 없으면 스크린 리더가 인지 못 하죠. BP-079는 섹션 제목 + 필드·폼 이름을 규정합니다. 폼 구조 접근성이죠. 이번 편을 풀어냅니다.

1. 원문 — 섹션 제목 + 필드·폼 이름

BP-079 (기본 패턴 > 입력 폼) “입력폼 각 섹션에 제목을 제공하고, 각 입력 필드와 입력폼에 이름을 제공하고 있다.”

폼 섹션에 제목을, 각 입력 필드와 폼에 이름을 제공하라는 뜻입니다.

정리: 폼 섹션엔 제목을, 필드·폼엔 이름을 제공하라. 이게 BP-079입니다.

2. 왜 섹션 제목·이름인가

긴 입력 폼은 여러 섹션(개인정보·신청내용·첨부 등)으로 나뉘고, 각 섹션 안에 여러 필드가 있습니다. 이 구조가 명명(naming)으로 분명해야, 사용자(특히 스크린 리더)가 인지하죠. BP-079는 섹션 제목 + 필드·폼 이름을 요구합니다.

제목·이름이 없을 때의 문제:

섹션 구조 안 보임 필드가 섹션 제목 없이 줄줄이 있으면, 어디까지가 한 묶음인지 모릅니다. ‘개인정보’ 섹션, ‘신청내용’ 섹션이 구분 안 되죠. 긴 폼이 막막한 필드 더미가 됩니다.

필드 정체 모름 필드에 이름(레이블)이 없으면, 스크린 리더 사용자는 ’입력란’으로만 듣고 무슨 칸인지 모릅 니다(BP-074).

폼 정체 모름 폼 자체에 이름이 없으면, 여러 폼이 있는 페이지에서 스크린 리더 사용자가 어느 폼인지 구분 못 하죠.

그래서 BP-079는 — 세 가지 명명을 요구합니다:

섹션 제목 폼의 각 섹션에 제목을요. ‘개인정보’, ‘신청 내용’, ’첨부 파일’처럼요. 시각적으로 구조를 보이고 (제목 스타일·구분선), 시맨틱으로도 <fieldset>+<legend>나 제목(<h2>)으로요. 스크린 리더가 섹션 단위를 인지하죠.

필드 이름(레이블) 각 입력 필드에 이름(레이블)을요(BP-074). <label>로 연결해, 스크린 리더가 ’이름, 입력란’으로 읽게요.

폼 이름 폼 자체에 이름(접근가능한 이름)을요. <form>에 aria-label이나 aria-labelledby(폼 제목과 연결)로요. 여러 폼이 있을 때 구분되게요.

<fieldset>+<legend>의 활용. 관련 필드 묶음(섹션)은 <fieldset>으로 감싸고 <legend>로 섹션 제목을 줍니 다. 특히 라디오·체크박스 그룹(예: ‘성별’ 그룹)은 <fieldset>+<legend>가 필수죠. 스크린 리더가 ’성별, 라디오 그룹’처럼 그룹과 그 질문을 함께 읽습니다.

접근성 핵심 이름(name). WCAG 4.1.2(이름·역할·값)는 모든 UI 컴포넌트가 이름·역할·값을 갖게 하라고 합니다. 폼·섹션·필드 모두 이름이 있어야 보조 기술이 인지하죠. 명명은 폼 접근성의 토대입니다.

구조 가시성(시각). 섹션 제목은 시각 사용자에게도 폼 구조를 보여줍니다. 긴 폼을 섹션으로 나누고 제목을 달면, 사용자가 전체 흐름을 파악하고 부담이 줄죠(BP-068 단계, BP-071 간격과 함께).

이 규칙은 입력 폼의 ’구조 명명’을 담당합니다 — 섹션 제목·필드 이름·폼 이름을 제공해(079), 사용자(특히 스크린 리더) 가 폼 구조와 각 요소를 인지하게 하죠.

정리하면 — 섹션 제목·필드 이름·폼 이름이 없으면 구조와 요소를 인지 못 하므로, 섹션에 제목(<fieldset>/<legend>), 필드에 레이블, 폼에 접근가능한 이름을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

섹션 제목 — 각 섹션에 제목이 있고 시맨틱(<fieldset>/<legend>·<h2>)인가.

필드 이름 — 각 필드에 레이블이 연결되는가(BP-074).

폼 이름 — 폼에 접근가능한 이름(aria-label 등)이 있는가.

개선 방향

섹션을 <fieldset>+<legend>(또는 제목)로, 라디오·체크 그룹 필수.

필드 레이블 연결, 폼 aria-label. 시각 구조 + 시맨틱(WCAG 4.1.2).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	fieldset·legend·이름 구현
QA/접근성	스크린 리더 구조 인지 검증

기관 유형	BP-079 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 입력 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 섹션에 제목이 있고 시맨틱(<fieldset>/<legend>·<h2>)인가요?

□ 각 필드에 레이블이 연결되나요(BP-074)?

□ 폼에 접근가능한 이름(aria-label 등)이 있나요?

❓ FAQ

Q1. <fieldset>+<legend>가 뭔가요? 관련 필드 묶음을 감싸고(<fieldset>) 그 제목을 주는(<legend>) 요소 입니다. 특히 라디오·체크박스 그룹에 필수죠. 스크린 리더가 ’성별, 라디오 그룹’처럼 읽습니다. Q2. 폼에도 이름이 필요한가요? 네. 여러 폼이 있는 페이지에서 스크린 리더 사용자가 어느 폼인지 구분하려면요. aria-label이나 폼 제목 연결(aria-labelledby)로 줍니다. Q3. 섹션 제목은 시각만 있으면 되나요? 시각 + 시맨틱 둘 다요. 제목 스타일(시각) + <fieldset>/<legend>·<h2> (시맨틱)으로 스크린 리더도 섹션을 인지하게요(WCAG 4.1.2).

6. 마무리

BP-079의 메시지:

섹션엔 제목, 필드엔 이름 — 폼의 구조를 명명하라.

제목·이름이 없으면 폼 구조와 요소를 인지 못 합니다. 섹션 제목(<fieldset>/<legend>)·필드 레이블·폼 이름을 제공해 구조를 인지하게 하는 게 핵심이죠. 다음 편은 오류 항목 정확 안내입니다.

다음 편 예고 ▶ 「646. (BP-080) 어떤 항목에서 오류가 발생했는지에 관한 정확한 정보를 오류 메시지로 알려주고 있다.」

ViewCheck는 폼 섹션 제목과 필드·폼 이름이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

WCAG 2.1 SC 4.1.2 Name, Role, Value / 1.3.1 Info and Relationships — https://www.w3.org/WAI/WCAG21/Understanding/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준