푸터 footer랜드마크

KRDS CP-043 — 푸터의 모든 요소는

KRDS 체크리스트 항목 CP-043 · 컴포넌트 > 푸터(Footer) 〈846 규칙 완전 분해 시리즈 (163)〉 — “스크린리더의 지도, 랜드마크”: footer 시맨틱

0. 들어가며 — 스크린리더가 길을 찾는 법

이번 163편은 푸터의 모든 요소를 <footer> 내부에 배치해 랜드마크 정보가 전달되게 하는 규칙입니다.

식별자를 <footer> 내부에 두라는 규칙(CP-012)이 있었죠. CP-043은 식별자를 넘어 푸터의 모든 요소를 <footer> 안에 넣어, 스크린리더가 ’여기가 푸터(랜드마크)’임을 인식하게 하라고 규정합니다. 시맨틱 랜드마크의 핵심입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — footer 내부 + 랜드마크 전달

CP-043 (컴포넌트 > 푸터) “푸터의 모든 요소는 <footer> 내부에 배치하여 주요 랜드마크 정보가 스크린 리더로 전달될 수 있도록 구현하고 있다.”

푸터의 모든 정보를 <footer> 요소 안에 넣어, 스크린리더가 푸터를 랜드마크로 인식하게 하라는 뜻입니다.

정리: 푸터 모든 요소를 <footer> 내부에 배치해 랜드마크가 스크린리더로 전달되게 하라. 이게 CP-043입니다.

2. 랜드마크란, 왜 footer로 묶나

랜드마크(landmark) 는 웹페이지의 주요 영역을 의미하는 표지입니다 — 머리말(<header>/banner), 본문 (<main>), 내비게이션(<nav>), 바닥글(<footer>/contentinfo) 등이죠. 시각 사용자는 화면을 보고 한눈에 ’여기가 헤더, 저기가 본문, 아래가 푸터’를 알지만, 스크린리더 사용자는 화면을 못 보므로 이 구조를 시맨틱 태그(랜드마크) 로 파악합니다.

스크린리더에는 ‘랜드마크 간 이동’ 기능이 있습니다 — 사용자가 단축키로 “다음 랜드마크로”, “푸터로 바로 가기” 처럼 영역을 건너뛰며 탐색하죠. 이 기능이 작동하려면 각 영역이 시맨틱 태그로 표시돼 있어야 합니다. 푸터가 <footer>로 돼 있으면, 스크린리더 사용자는 “푸터로 가기”로 즉시 푸터(연락처·정책 등)에 도달할 수 있죠. 랜드마크는 시각장애 사용자의 ’페이지 지도’입니다.

CP-043의 핵심은 ‘모든 요소’ 를 <footer> 안에 넣으라는 것입니다. 일부 푸터 정보(예: 저작권은 <footer> 안인데 연락처는 밖의 <div>)가 <footer> 밖에 흩어져 있으면 — 스크린리더는 그 흩어진 정보를 ’푸터 랜드 마크’로 인식하지 못합니다. 사용자가 “푸터로 가기”를 해도 일부 정보만 잡히거나, 밖의 정보는 어디 속하는지 모르게 되죠. 그래서 푸터의 모든 정보(로고·연락처·유틸리티·정책·저작권)를 하나의 <footer> 안에 묶어, 통째로 ’푸터 랜드마크’가 되게 해야 합니다.

이는 시맨틱 마크업(레이아웃 편)·CP-012(식별자 footer 내부)·CP-032(푸터 위치)의 종합입니다 — 푸터는 위치 (마지막)뿐 아니라 구조(<footer> 랜드마크)도 올발라야 모든 사용자에게 ‘여기가 푸터’임이 전달되죠. 참고로 페이지 전체의 <footer>는 ’contentinfo’ 랜드마크 역할을 하며, 보통 페이지에 하나입니다. KWCAG ‘제목·랜드마크’ 관련 접근성과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

모든 요소 footer 내부 — 푸터 모든 정보가 <footer> 안에 있는가.

밖에 흩어짐 없음 — <footer> 밖에 푸터 정보가 남지 않았는가.

랜드마크 인식 — 스크린리더가 푸터를 contentinfo 랜드마크로 인식하는가.

Before / After

<!-- ❌ 일부가 footer 밖 --> <div class="contact">연락처</div> <footer>저작권</footer> <!-- ✅ 모든 요소가 footer 내부 (랜드마크) --> <footer> <div class="contact">연락처</div> <nav>...</nav> <p>저작권</p> </footer>

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

역할	책임
퍼블리셔/개발	푸터 모든 요소를 <footer> 내부에 시맨틱 마크업
접근성 담당	랜드마크 구조 검수

기관 유형	CP-043 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당. (KWCAG 랜드마크 직결.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 푸터 모든 정보가 <footer> 안에 있나요?

□ <footer> 밖에 푸터 정보가 흩어지지 않았나요?

□ 스크린리더가 푸터를 랜드마크로 인식하나요?

❓ FAQ

Q1. 랜드마크가 뭔가요? 페이지 주요 영역(헤더·본문·푸터 등)을 시맨틱 태그로 표시한 것입니다. 스크린리더가 영역 간 이동에 사용하는 ’페이지 지도’죠. Q2. div로 묶으면 안 되나요? <div>는 의미가 없어 랜드마크가 안 됩니다. <footer> 시맨틱 태그여야 합니다. Q3. KRDS를 채택하면 자동인가요? 표준 푸터는 <footer> 랜드마크 구조로 제공됩니다.

6. 마무리

CP-043의 메시지:

스크린리더의 지도, 랜드마크 — 푸터 모든 요소를 <footer>로 묶어 ’여기가 푸터’임을 전달한다.

랜드마크는 시각장애 사용자의 페이지 지도입니다. 푸터 모든 정보를 하나의 <footer>에 묶어야 스크린리더가 통째로 ’푸터(contentinfo)’로 인식하고, “푸터로 가기”로 도달할 수 있죠. 위치(CP-032)에 더해 구조(랜드마크)도 올발라야 완성됩니다.

다음 편은 푸터 이미지 로고의 대체 텍스트를 다룹니다. 푸터 그룹의 마지막입니다. CP-044 — “이미지로 된 로고를 사용하는 경우 스크린리더를 위한 대체 텍스트를 포함한다.”

다음 편 예고 ▶ 「164. (CP-044) 텍스트가 아닌 이미지로 된 로고를 사용하는 경우 스크린 리더를 위한 대체 텍스트를 포함해서 구현하고 있다.」 — 푸터 그룹 마지막

ViewCheck는 푸터 모든 요소가 <footer> 랜드마크 내부에 있는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 푸터(Footer) 가이드 — https://www.krds.go.kr/html/site/component/component_04.html

WAI-ARIA Landmark Regions / HTML <footer> (contentinfo)

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

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