푸터 로고도 읽혀야 한다

KRDS CP-044 — 텍스트가 아닌 이미지로 된 로고를 사용하는 경우 스크린 리더를 위한 대체 텍스트를 포함해서 구현하고 있다.

0. 들어가며 — 푸터 그룹의 마무리

이번 164편은 푸터 그룹(CP-032~044)의 마지막, 푸터의 이미지 로고에 대체 텍스트를 제공하는 규칙입니다.

식별자 로고(CP-014)·헤더 로고(CP-030)에 대체 텍스트가 필요했듯, 푸터의 이미지 로고(서비스 로고)도 마찬가지 입니다. CP-044는 푸터 이미지 로고에 스크린리더용 대체 텍스트를 포함하라고 규정하죠. 이미지는 어디에 있든 텍스트로도 전달돼야 한다는 일관된 원리입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 이미지 로고 대체 텍스트

CP-044 (컴포넌트 > 푸터) “텍스트가 아닌 이미지로 된 로고를 사용하는 경우 스크린 리더를 위한 대체 텍스트를 포함해서 구현하고 있다.”

푸터 로고가 이미지(텍스트가 아닌)일 때, 스크린리더가 읽을 대체 텍스트(alt) 를 포함하라는 뜻입니다.

정리: 푸터의 이미지 로고에는 스크린리더용 대체 텍스트를 포함하라. 이게 CP-044, 푸터 그룹의 마지막 입니다.

2. 왜 또 대체 텍스트인가 — 일관된 원리

CP-044는 CP-014(식별자 로고)·CP-030(헤더 로고)과 같은 ’이미지 로고에는 대체 텍스트’라는 원리의 푸터 버전 입니다. 같은 원리가 사이트의 세 위치(헤더·푸터·식별자)에서 반복되는 것은, 그만큼 이미지 로고의 대체 텍스트가 중요하고 자주 누락되기 때문이죠.

푸터에는 서비스 로고가 있습니다(154편의 ①). 이게 이미지(SVG·PNG)라면, 스크린리더는 읽지 못합니다. 대체 텍스트가 없으면 시각장애 사용자는 푸터에서 이 로고가 무엇인지 알 수 없죠.

‘텍스트가 아닌 이미지로 된 로고’ 라는 조건이 핵심입니다. 로고가 텍스트(CSS 스타일링된 글자)로 돼 있으면 스크린리더가 그 텍스트를 읽으므로 별도 대체 텍스트가 불필요합니다. 하지만 로고가 이미지면 대체 텍스트가 반드시 필요하죠. 그래서 ’이미지 로고를 사용하는 경우’에 적용됩니다.

대체 텍스트 작성 원칙은 헤더 로고(CP-030·031)와 같습니다 — 서비스(기관) 이름을 담되, ’로고’라는 군더더기 단어는 빼는 방향입니다. 예: alt="행정안전부". 푸터 로고도 클릭 시 홈으로 가는 링크라면 헤더와 동일하게 처리하죠.

이 규칙이 푸터 그룹의 마지막을 장식하는 것은, 식별자(CP-014)·헤더(CP-030)·푸터(CP-044)로 이어지는 ‘이미지 로고 접근성’의 완결입니다 — 사이트의 모든 로고가, 어디에 있든, 스크린리더 사용자에게도 전달되게 하는 것이죠. 정보는 모든 사용자에게 닿아야 완전하다는 접근성 원리(DS-120)의 푸터 적용입니다. KWCAG ’대체 텍스트’ 항목과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

이미지 로고 여부 — 푸터 로고가 이미지인가(텍스트면 N/A).

alt 존재 — 이미지 로고에 alt가 있는가.

적절한 alt — 기관명을 담고 ‘로고’ 단어는 뺐는가.

Before / After

<!-- ❌ alt 없음 --> <footer><img src="logo.svg"></footer> <!-- ✅ 기관명 alt (이미지 로고) --> <footer><img src="logo.svg" alt="행정안전부"></footer> <!-- (텍스트 로고면 alt 불필요) -->

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

역할	책임
퍼블리셔/개발	푸터 이미지 로고에 대체 텍스트 작성
접근성 담당	alt 적정성 검수

기관 유형	CP-044 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (푸터 이미지 로고 사용 시)

푸터에 이미지 로고를 쓰는 사이트 = 해당. 텍스트 로고면 N/A.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 푸터 이미지 로고에 alt가 있나요?

□ alt에 기관(서비스)명이 담겼나요?

□ alt에 불필요한 ‘로고’ 단어가 없나요?

❓ FAQ

Q1. 텍스트 로고도 alt가 필요한가요? 아닙니다. 텍스트 로고는 스크린리더가 텍스트를 읽으므로 별도 alt가 불필요합니다. 이미지 로고일 때 필요합니다. Q2. 헤더 로고(CP-030)와 같은가요? 원리·작성법이 같습니다. 다만 적용 위치가 푸터입니다. 사이트 모든 위치의 로고에 일관 적용됩니다. Q3. KRDS를 채택하면 자동인가요? 표준 푸터 로고는 대체 텍스트를 포함해 제공됩니다.

6. 마무리 — 푸터 그룹을 마치며

CP-044의 메시지:

푸터 로고도 읽혀야 한다 — 헤더·식별자·푸터, 사이트 모든 로고가 스크린리더에 전달되어야 완전하다.

푸터 이미지 로고에 대체 텍스트를 포함해, 시각장애 사용자도 서비스 정체성을 알게 합니다. 식별자(CP-014)·헤더 (CP-030)·푸터(CP-044)로 이어지는 ’이미지 로고 접근성’의 완결이죠. 정보는 모든 사용자에게 닿아야 완전합니다.

이로써 푸터(Footer) 그룹 13개 규칙(CP-032~044)을 마쳤습니다. 위치(032·033)·순서(034·042)·그룹화(035)· 법적 정보(036·037·038)·내비게이션(039·040)·최신성(041)·랜드마크(043)·대체 텍스트(044) — 사이트의 발인 푸터를 촘촘히 규정한 13개였습니다.

지금까지 공식배너(6)+식별자(8)+헤더(17)+푸터(13) = CP 44개를 마쳤습니다. 다음 편부터는 건너뛰기 링크 (Skip link) 그룹 9개(CP-045~053)로 넘어갑니다. 앞서 여러 번 언급된 그 접근성 핵심 컴포넌트를 본격적으로 다룹니다.

다음 편 예고 ▶ 「165. (CP-045) 건너뛰기 링크 그룹의 첫 규칙」 — 건너뛰기 링크(Skip link) 9개 규칙 시작

ViewCheck는 푸터 이미지 로고에 적절한 대체 텍스트가 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.1.1 / KWCAG 대체 텍스트

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

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