신청 입력폼섹션헤딩

KRDS SP-140 — 스크린 리더 사용자가 신청서 입력 폼 섹션의 구조와 각 섹션의 정보를 인지하고, 필요한 입력폼 섹션 단위로 건너뛸 수 있도록

태그를 사용하여 헤딩을 제공하고 있다.

KRDS 체크리스트 항목 SP-140 · 서비스 패턴 > 신청 > 신청서 작성 〈846 규칙 완전 분해 시리즈 (814)〉 — “섹션 헤딩으로 건너뛰며 작성하게”: 입력 폼 섹션 헤딩

0. 들어가며 — 신청서 작성 서브섹션의 마지막

이번 814편은 스크린 리더 사용자가 신청서 입력 폼 섹션의 구조·정보를 인지하고 섹션 단위로 건너뛸 수 있도록 <h2>~ <h6> 헤딩을 제공하라는 규칙입니다. ‘신청서 작성’ 서브섹션(SP-129~140)의 마지막이죠.

긴 신청서의 섹션(개인정보·신청내용·첨부 등)에 헤딩이 없으면, 스크린 리더 사용자는 구조를 모르고 섹션 단위로 건너뛸 수도 없죠. SP-140은 섹션 헤딩을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 입력 폼 섹션 헤딩

SP-140 (서비스 패턴 > 신청 > 신청서 작성) “스크린 리더 사용자가 신청서 입력 폼 섹션의 구조와 각 섹션의 정보를 인지하고, 필요한 입력폼 섹션 단위로 건너뛸 수 있도록 <h2>~<h6> 태그를 사용하여 헤딩을 제공하고 있다.”

입력 폼 섹션에 헤딩을 제공해 구조 인지·섹션 건너뛰기를 가능케 하라는 뜻입니다.

정리: 신청서 입력 폼 섹션에 헤딩(<h2>~<h6>)을 제공하라. 이게 SP-140입니다.

2. 왜 섹션 헤딩인가

긴 신청서는, 여러 섹션으로 구성됩니다: 개인정보, 신청내용, 첨부 서류, 동의 등이요(BP-079 폼 섹션). 시각 사용자는, 섹션 제목·구분으로 구조를 보죠. 그런데 스크린 리더 사용자는, 섹션에 헤딩이 있어야 구조를 인지하고 섹션 단위로 탐색합니다. SP-140은 헤딩을 요구합니다.

섹션 헤딩이 없을 때의 문제:

구조 인지 불가 신청서 섹션에 헤딩이 없으면, 스크린 리더 사용자는 어디가 개인정보 섹션이고 어디가 신청내용 섹션인지 모릅니다. 긴 입력 항목이 구조 없이 평평하게 읽히죠.

섹션 건너뛰기 불가 스크린 리더는, 헤딩 단위로 탐색(다음 헤딩으로 점프)하는 기능을 제공합 니다. 섹션에 헤딩이 있으면, 사용자가 ‘첨부 서류 섹션으로’ 바로 점프하죠. 헤딩이 없으면, 이 효율적 탐색이 안 됩니다. 긴 신청서를 처음부터 일일이 거쳐야 하죠.

그래서 SP-140은 — 헤딩 제공을 요구합니다:

섹션에 헤딩 신청서 각 섹션에, <h2>~<h6> 헤딩을요. ‘개인정보’(<h2>), ‘신청 내용’(<h2>), ‘첨부 서류’(<h2>)처럼요. 스크린 리더가 ’제목 레벨 2, 개인정보’로 읽어, 섹션을 인지하죠(BP-060 시맨틱).

헤딩 위계 헤딩 레벨을 위계에 맞게요(<h2> 섹션 > <h3> 하위 등). 신청서 제목(<h1> SP-111) 아래 섹션(<h2>~)으로요.

섹션 건너뛰기 지원 헤딩이 있으면, 스크린 리더 사용자가 헤딩 단위로 점프해, 원하는 섹션으로 바로 가죠. 긴 신청서를 효율적으로 탐색합니다.

fieldset·legend 병행 헤딩과 함께, 입력 그룹은 <fieldset>+<legend>(BP-079)로도요. 헤딩(구조)·legend (그룹)이 함께 섹션을 명확히 하죠.

시맨틱 마크업(BP-060)·폼 섹션 명명(BP-079)의 신청 적용. 본문 시맨틱(BP-060)·폼 섹션 제목(BP-079)을, 신청서 입력 폼에 적용한 게 SP-140입니다. 섹션을 <h2>~<h6> 헤딩으로 구조화해, 스크린 리더 사용자가 인지· 탐색하게요.

신청서 작성 접근성의 마무리. ‘신청서 작성’(SP-129~140)은 펼침(129)·입력 보존(130·138)·안내(131·134·135·136· 137)·임시 저장(133)·공동이용(132)·단계 접근성(139·140)까지 작성 전반을 다뤘습니다. SP-139(현재 단계)·SP-140 (섹션 헤딩)이 함께 다단계 신청서의 스크린 리더 접근성을 완성하죠.

이 규칙은 신청(SP)의 ’입력 폼 구조 접근성’을 담당합니다 — 섹션에 헤딩을 제공해(140), 스크린 리더 사용자가 신청서 구조를 인지하고 섹션 단위로 건너뛰며 작성하게 하죠. 신청서 작성 서브섹션의 마무리입니다.

정리하면 — 신청서 섹션에 헤딩이 없으면 스크린 리더 사용자가 구조를 모르고 섹션 단위로 건너뛸 수 없으므로, 각 섹션에 <h2>~<h6> 헤딩을(위계에 맞게) 제공해 구조 인지·효율적 탐색을 가능케 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

섹션 헤딩 — 신청서 각 섹션에 <h2>~<h6> 헤딩이 있는가.

헤딩 위계 — 헤딩 레벨이 위계에 맞는가(<h1> 신청서명 아래 <h2>~ 섹션).

섹션 건너뛰기 — 스크린 리더가 헤딩 단위로 섹션을 건너뛸 수 있는가.

개선 방향

신청서 섹션에 <h2>~<h6> 헤딩(BP-060·079). 위계에 맞게.

fieldset·legend 병행(BP-079). 헤딩 단위 섹션 탐색 지원. SP-139와 함께.

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

역할	책임
퍼블리셔/개발	섹션 헤딩·시맨틱 구현
QA/접근성	헤딩 구조·건너뛰기 검증

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

웹접근성 의무 대상이며 신청서 작성 폼을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 신청서 각 섹션에 <h2>~<h6> 헤딩이 있나요?

□ 헤딩 레벨이 위계에 맞나요(<h1> 신청서명 아래 <h2>~ 섹션)?

□ 스크린 리더가 헤딩 단위로 섹션을 건너뛸 수 있나요?

❓ FAQ

Q1. 섹션 헤딩이 없으면 왜 문제인가요? 스크린 리더 사용자가 어디가 개인정보·신청내용 섹션인지 모르고, 긴 입력 항목이 구조 없이 평평하게 읽힙니다. 섹션 단위로 건너뛰는 효율적 탐색도 안 되죠. Q2. 섹션 건너뛰기가 뭔가요? 스크린 리더는 헤딩 단위로 탐색(다음 헤딩으로 점프)하는 기능을 제공합니다. 섹션에 헤딩이 있으면 ‘첨부 서류 섹션으로’ 바로 점프하죠. 긴 신청서를 효율적으로 탐색합니다. Q3. SP-139와 어떻게 함께 가나요? 현재 단계(SP-139) + 섹션 헤딩(SP-140)이 함께 다단계 신청서의 스크린 리더 접근성 을 완성합니다. 단계 위치를 알고, 섹션 구조를 인지하며 작성하게요.

6. 마무리

SP-140의 메시지:

섹션 헤딩으로 건너뛰며 작성하게 — 입력 폼 섹션에 <h2>~<h6> 헤딩을 제공하라.

섹션에 헤딩이 없으면 스크린 리더 사용자가 구조를 모르고 섹션 단위로 건너뛸 수 없습니다. <h2>~<h6> 헤딩으로 구조 인지· 효율적 탐색을 가능케 하는 게 핵심이죠. ‘신청서 작성’ 서브섹션이 끝났습니다. 다음 편부터는 ‘확인/확정’ 서브섹션입니다.

다음 편 예고 ▶ 「815. (SP-141) 확인/확정 서브섹션 시작 (신청 3차분)」

ViewCheck는 신청서 입력 폼 섹션에 헤딩이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 신청 가이드 — https://www.krds.go.kr/html/site/service/service_04.html

WCAG 2.1 SC 1.3.1 Info and Relationships / 2.4.1 Bypass Blocks — https://www.w3.org/WAI/WCAG21/Understanding/

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

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