로고 이미지도 읽혀야 한다

KRDS CP-030 — 이미지 로고를 사용하는 경우 스크린 리더를 위한 대체 텍스트를 제공하고 있다.

0. 들어가며 — 헤더 로고의 접근성

이번 150편은 헤더의 이미지 로고에 스크린리더용 대체 텍스트를 제공하는 규칙입니다.

식별자 로고에 대체 텍스트가 필요했듯(CP-014), 헤더의 로고도 마찬가지입니다. 헤더 로고는 보통 이미지(SVG·PNG) 인데, 스크린리더는 이미지를 못 읽으므로 대체 텍스트가 없으면 시각장애 사용자가 ’여기가 어디인지’를 알 수 없죠. CP-030은 헤더 이미지 로고에 대체 텍스트를 달라고 규정합니다. 이번 편을 풀어냅니다.

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

CP-030 (컴포넌트 > 헤더) “이미지 로고를 사용하는 경우 스크린 리더를 위한 대체 텍스트를 제공하고 있다.”

헤더 로고가 이미지일 때, 스크린리더가 읽을 대체 텍스트(alt) 를 제공하라는 뜻입니다.

정리: 이미지 로고에는 스크린리더용 대체 텍스트를 제공하라. 이게 CP-030입니다.

2. 왜 헤더 로고에 대체 텍스트인가

헤더 로고는 사이트의 정체성을 알리는 핵심 요소입니다(137편). 시각 사용자는 로고를 보고 ’여기가 어디인지’를 즉시 알죠. 그런데 로고가 이미지(SVG·PNG)라면, 스크린리더는 그 이미지를 읽을 수 없습니다. 대체 텍스트가 없으면 시각장애 사용자는 헤더 맨 앞에서 ’알 수 없는 이미지’만 만나, 사이트 이름조차 모르게 됩니다.

헤더 로고는 보통 클릭 가능한 링크(메인 페이지로 이동, CP-031)이기도 합니다. 대체 텍스트가 없으면 스크린 리더는 이 링크를 “링크” 또는 이미지 파일명(logo.svg)으로 읽어, 사용자가 ‘이게 무슨 링크인지’ 알 수 없죠. 링크의 목적이 전달되지 않습니다.

그래서 헤더 이미지 로고에는 사이트(서비스/기관) 이름을 담은 대체 텍스트를 제공합니다 — 예: alt="행정안전부" 또는 alt="○○ 포털". 그러면 스크린리더가 “행정안전부, 링크”라고 읽어, 시각장애 사용자도 사이트 이름과 ’홈으로 가는 링크’임을 알 수 있죠.

주의할 점은 다음 편(CP-031)에서 다룰 텐데, 대체 텍스트에 **‘로고’라는 단어를 넣지 않는** 것입니다. alt="○○ 로고"라고 하면 스크린리더가 “○○ 로고, 링크”라고 읽는데, ’로고’는 불필요한 정보입니다 — 사용자는 그게 이미지(로고)인지 알 필요 없이’○○(사이트명)으로 가는 링크’임만 알면 되죠. 그래서 alt="○○"(사이트명만)이 적절합니다. (식별자 로고 CP-014와의 차이: 식별자는 ’운영 기관 정보 표시’가 목적이라 기관명을, 헤더 로고는 ’홈 링크’가 목적이라 사이트명을 — 둘 다 ’로고’라는 단어는 빼는 방향.)

이 규칙은 91편(아이콘 대체텍스트)·CP-014(식별자 로고)와 같은 ‘이미지는 텍스트로도 전달’ 원리이고, KWCAG ‘대체 텍스트’ 항목과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

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

사이트명 명시 — alt에 사이트(서비스/기관) 이름이 담겼는가.

‘로고’ 단어 배제 — alt에 불필요한 ’로고’라는 단어가 없는가(CP-031).

Before / After

<!-- ❌ alt 없음 / 파일명 노출 / '로고' 포함 --> <a href="/"><img src="logo.svg"></a> <a href="/"><img src="logo.svg" alt="○○ 로고"></a> <!-- ✅ 사이트명만 (홈 링크 목적) --> <a href="/"><img src="logo.svg" alt="행정안전부"></a>

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

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

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

헤더에 이미지 로고를 쓰는 사이트 = 해당. (텍스트 로고면 alt 불필요.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더 이미지 로고에 alt가 있나요?

□ alt에 사이트(기관) 이름이 담겼나요?

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

❓ FAQ

Q1. alt에 뭐라고 적나요? 사이트(서비스/기관) 이름을 적습니다 — 예: alt="행정안전부". ‘로고’라는 단어는 빼는 것이 권장됩니다(CP-031). Q2. 텍스트 로고도 alt가 필요한가요? 텍스트로 된 로고는 스크린리더가 텍스트를 읽으므로 별도 alt가 불필요 합니다. 이미지 로고일 때 필요합니다. Q3. CP-014(식별자)와 같은가요? 원리는 같습니다(이미지는 텍스트로도). 다만 식별자는 기관명, 헤더 로고는 사이트명, 둘 다 ’로고’ 단어는 배제하는 방향입니다.

6. 마무리

CP-030의 메시지:

로고 이미지도 읽혀야 한다 — 사이트 이름을 담은 대체 텍스트로 시각장애 사용자에게도 정체성을.

헤더 로고는 이미지라 대체 텍스트가 없으면 스크린리더 사용자가 사이트 이름조차 모릅니다. 사이트명을 담은 alt (‘로고’ 단어 배제)를 제공해야, 모든 사용자가 정체성과 ’홈 링크’임을 알죠. 이미지는 텍스트로도 전달하는 원리입니다.

다음 편은 헤더 로고의 링크 기능과 대체 텍스트 작성을 다룹니다. 헤더 그룹의 마지막입니다. CP-031 — “헤더 로고는 메인 페이지로 이동하는 링크로 사용하고, 대체 텍스트에 ’로고’라는 단어를 포함하지 않는다.”

다음 편 예고 ▶ 「151. (CP-031) 헤더의 로고는 메인 페이지로 이동하는 링크로 사용하고 있으며, 대체 텍스트에 ’로고’라는 단어가 포함되지 않게 작성되어 있다.」 — 헤더 그룹 마지막

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

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

WCAG 2.1 SC 1.1.1 / KWCAG 대체 텍스트

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

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