로고도 글자로 읽혀야 한다

KRDS CP-014 — 로고 이미지에 대체 텍스트를 제공하고 있다.

0. 들어가며 — 이미지 속 정보를 모두에게

이번 134편은 식별자 그룹의 마지막, 식별자의 로고 이미지에 대체 텍스트를 제공하는 규칙입니다.

식별자의 핵심은 운영 기관 로고입니다(128편). 그런데 로고는 ‘이미지’라, 시각으로만 정보를 전달하죠. 스크린 리더 사용자는 이미지를 볼 수 없으니, 로고에 담긴’○○기관’이라는 정보를 못 받습니다. 91편(아이콘 대체텍스트) 에서 본 원리가 식별자 로고에도 그대로 적용됩니다 — CP-014는 로고 이미지에 대체 텍스트를 달라고 규정하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 대체 텍스트 제공

CP-014 (컴포넌트 > 운영기관 식별자) “로고 이미지에 대체 텍스트를 제공하고 있다.”

식별자의 로고 이미지에 대체 텍스트(alt) 를 달아, 이미지가 안 보여도 정보가 전달되게 하라는 뜻입니다.

정리: 식별자 로고 이미지에 대체 텍스트를 제공하라. 이게 CP-014, 식별자 그룹의 마지막입니다.

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

대체 텍스트(alternative text, alt)는 이미지를 텍스트로 설명하는 속성입니다. 시각장애 사용자의 스크린리더는 이미지 자체를 읽을 수 없어, alt에 적힌 텍스트를 대신 읽어주죠. 또 이미지 로딩 실패 시에도 alt가 표시되고, 검색엔진도 alt로 이미지 내용을 파악합니다(91편).

식별자 로고에 대체 텍스트가 없으면, 스크린리더 사용자는 식별자 영역에서 아무 정보도 못 받습니다 — 운영 기관이 누구인지 알 수 없죠. 식별자의 존재 이유(운영 주체 식별)가 시각 사용자에게만 작동하고, 시각장애 사용자에겐 무용지물이 됩니다. 이는 ’모든 사용자에게 동등한 정보 제공’이라는 접근성의 근본을 어기는 것이죠 (DS-120의 동등성과 연결).

그래서 로고 이미지에 운영 기관명을 담은 대체 텍스트를 제공합니다 — 예: alt="행정안전부 로고" 또는 alt="○○시청". 그러면 스크린리더가 “행정안전부 로고”라고 읽어, 시각장애 사용자도 운영 주체를 알 수 있죠. 대체 텍스트는 ’로고에 담긴 핵심 정보(기관명)’를 전달해야 하므로, 단순히 “로고”가 아니라 어느 기관의 로고 인지를 명확히 적는 것이 중요합니다.

이 규칙이 식별자 그룹의 마지막을 장식하는 것은 적절합니다 — 식별자의 모든 규칙(절제·기관 로고·순서·구조)이 ‘운영 주체를 제대로 밝히기’ 위한 것이었는데, 대체 텍스트는 그 정보를 ‘시각장애 사용자에게도’ 전달하는 마지막 완성이기 때문이죠. 정보는 모두에게 닿아야 비로소 완전합니다.

3. 점검 / 개선

무엇을 점검하나

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

기관명 명시 — alt에 어느 기관 로고인지 명확히 적혔는가.

빈 alt 아님 — alt=""(장식용)으로 비워두지 않았는가(식별자 로고는 정보성).

Before / After

<!-- ❌ alt 없음 / 무의미 --> <img src="logo.svg"> <img src="logo.svg" alt="로고"> <!-- ✅ 기관명 명시 --> <img src="logo.svg" alt="행정안전부">

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

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

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

행정·공공기관 디지털 정부서비스 = 전부 해당. (KWCAG ‘대체 텍스트’ 항목과도 직결.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 식별자 로고에 alt 속성이 있나요?

□ alt에 어느 기관 로고인지 명확히 적혔나요?

□ alt="로고"처럼 무의미하게 적지 않았나요?

❓ FAQ

Q1. alt에 뭐라고 적나요? 기관명을 적습니다 — 예: alt="행정안전부". “로고”라고만 적으면 어느 기관인지 모르므로 부적절합니다. Q2. 로고가 장식이면 빈 alt 아닌가요? 식별자 로고는 운영 주체를 알리는 ‘정보성’ 이미지라, 빈 alt가 아니라 기관명을 적습니다. Q3. KWCAG와 관계는요? KWCAG ‘대체 텍스트’ 항목과 직결됩니다. 이 규칙을 지키면 접근성 점수에도 기여하죠.

6. 마무리 — 운영기관 식별자 그룹을 마치며

CP-014의 메시지:

로고도 글자로 읽혀야 한다 — 운영 주체 정보는 시각장애 사용자에게도 닿아야 완전하다.

식별자 로고는 이미지라 대체 텍스트가 없으면 스크린리더 사용자에게 정보가 안 닿습니다. 기관명을 담은 alt를 제공해야, 모든 사용자가 운영 주체를 알 수 있죠. 정보는 모두에게 닿아야 완전하다는 접근성 원리입니다.

이로써 운영기관 식별자(Identifier) 그룹 8개 규칙(CP-007~014)을 마쳤습니다. 절제(127)·기관 로고(128)· 계층 순서(129)·변형 금지(130)·자격(131)·푸터 구조(132·133)·대체 텍스트(134) — ’운영 주체를 제대로, 모두에게 밝히기’라는 한 목표로 모인 여덟 규칙이었습니다.

지금까지 공식배너(6) + 식별자(8) = CP 14개를 마쳤습니다. 다음 편부터는 헤더(Header) 그룹 17개 (CP-015~031)로 넘어갑니다. 사이트 최상단의 핵심 내비게이션 영역입니다.

다음 편 예고 ▶ 「135. (CP-015) 헤더 그룹의 첫 규칙」 — 헤더(Header) 17개 규칙 시작

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

📚 참고 출처

KRDS 컴포넌트 — 운영기관 식별자(Identifier) 가이드 — https://www.krds.go.kr/html/site/component/component_02.html

WCAG 2.1 SC 1.1.1 Non-text Content / KWCAG 대체 텍스트

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

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