이미지를 못 봐도 알게

KRDS CP-205 — 장식용 이미지를 제외한 모든 이미지에 대체 텍스트를 제공하고 있다.

0. 들어가며 — 이미지 접근성의 핵심

이번 325편은 장식용 이미지를 제외한 모든 이미지에 대체 텍스트를 제공하라는 규칙입니다.

이미지는 시각 정보라 스크린 리더 사용자, 이미지가 안 보이는 환경(로딩 실패 등)에서는 전달되지 않죠. 대체 텍스트 (alt)가 그 이미지의 정보를 텍스트로 전합니다 — 웹 접근성의 가장 기본이자 오래된 규칙(WCAG SC 1.1.1)이죠. CP-205는 의미 있는 모든 이미지에 대체 텍스트를 제공하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 장식용 제외 모든 이미지 대체 텍스트

CP-205 (컴포넌트 > 이미지) “장식용 이미지를 제외한 모든 이미지에 대체 텍스트를 제공하고 있다.”

정보를 전달하는 모든 이미지에 그 내용·역할을 설명하는 대체 텍스트(alt)를 제공하되, 의미 없는 장식용 이미지는 제외(빈 alt)하라는 뜻입니다.

정리: 의미 있는 모든 이미지에 대체 텍스트를, 장식용은 빈 alt로. 이게 CP-205입니다.

2. 왜 대체 텍스트가 필요한가

이미지는 시각 정보입니다. 이를 못 보는 상황·사용자가 있죠 — 스크린 리더 사용자(화면 못 봄), 이미지 로딩 실패, 저대역폭 환경(이미지 끔), 검색 엔진(이미지 내용 파악). 이들에게 이미지의 정보를 전하는 것이 대체 텍스트 (alternative text, alt) 입니다. 스크린 리더는 이미지를 만나면 그 alt를 읽어 사용자에게 내용을 전하죠.

의미 있는 이미지 — 대체 텍스트 제공. 정보를 전달하는 이미지(사진, 차트, 다이어그램, 의미 있는 아이콘, 로고 등)에는 그 내용·역할을 설명하는 대체 텍스트를 제공해야 합니다. 예:

차트 이미지 → “2026년 분기별 민원 처리 건수 추이” + (복잡하면 데이터 요약).

안내 다이어그램 → 그 절차·구조를 텍스트로 설명.

로고 → “○○부 로고” (또는 링크면 그 링크 목적지).

의미 있는 사진 → 그 사진이 전하는 핵심 내용.

대체 텍스트가 없으면 — 스크린 리더가 “이미지” 라고만 읽거나 파일명(“img_2034.jpg”)을 읽어, 비시각 사용자는 그 이미지가 무엇인지 전혀 모르죠. 정보가 통째로 사라집니다.

장식용 이미지 제외(빈 alt). 반대로 장식용 이미지 정보 전달이 아니라 시각적 꾸밈만 하는 이미지 (배경 패턴, 구분선 이미지, 의미 없는 일러스트 등) 는 대체 텍스트를 제공하지 않습니다. 정확히는 빈 alt(alt="") 를 줘 스크린 리더가 건너뛰게 하죠. 장식 이미지에 alt를 달면(예: “장식 이미지”, “패턴”) 스크린 리더가 그 무의미한 설명을 읽어 거추장스럽고, 정작 중요한 콘텐츠 사이에 노이즈가 끼죠(배지 장식 아이콘 CP-159, 긴급 공지 아이콘과 같은 정신). 그래서 장식은 빈 alt로 ’의도적으로 비움’을 표시합니다.

핵심 판단 — ‘정보를 담는가’. 이미지마다 — ’이 이미지가 정보를 전달하는가, 아니면 순수 장식인가’를 판단해:

정보 전달 → 그 내용을 설명하는 대체 텍스트 제공.

순수 장식 → 빈 alt(alt="")로 건너뛰게.

이 판단이 핵심입니다. 그리고 alt를 ‘제공’하는 것뿐 아니라 잘 쓰는 것도 중요하죠 — 다음 편 CP-206이 ’alt에 넣지 말아야 할 것’(작가 정보, 역할 중복, 인접 설명 중복, 이미지에 없는 정보)을 규정합니다. CP-205(제공)와 CP-206(품질)이 함께 좋은 대체 텍스트를 만들죠.

구현. <img>의 alt 속성으로 제공합니다 — <img src="chart.png" alt="2026년 분기별 처리 건수"> / 장식은 <img src="deco.png" alt="">. CSS 배경 이미지는 본래 장식이라 alt가 없지만, 정보를 담은 이미지를 CSS 배경으로 두면 안 되죠(접근 불가). 의미 있는 이미지는 <img>로 두고 alt를 줍니다.

정리하면 — 이미지는 시각 정보라 못 보는 사용자에게 전달 안 되므로, 정보를 담은 모든 이미지에 그 내용을 설명 하는 대체 텍스트를 제공하고, 순수 장식은 빈 alt로 건너뛰게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

의미 이미지 alt — 정보를 담은 이미지에 적절한 대체 텍스트가 있는가.

장식 빈 alt — 순수 장식 이미지가 빈 alt(alt="")로 처리됐는가.

alt 누락·파일명 — alt 없이 방치되거나 파일명이 읽히는 이미지가 없는가.

개선 방향

의미 이미지: 내용·역할 설명 alt 제공. 장식: alt="".

정보 담은 이미지를 CSS 배경으로 두지 않기(접근 불가).

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

역할	책임
콘텐츠/퍼블리셔	이미지별 대체 텍스트 작성·장식 빈 alt
접근성 담당	alt 제공·품질 검증

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 정보를 담은 이미지에 적절한 대체 텍스트가 있나요?

□ 순수 장식 이미지가 빈 alt(alt="")로 처리됐나요?

□ alt 없이 방치되거나 파일명이 읽히는 이미지가 없나요?

❓ FAQ

Q1. 모든 이미지에 alt를 달아야 하나요? 정보 이미지는 설명 alt를, 순수 장식은 빈 alt(alt="")를 줍니다. 장식에 설명을 달면 거추장스럽습니다. Q2. 장식인지 정보인지 어떻게 판단하나요? ’이 이미지가 정보를 담는가’로 판단합니다. 못 봐도 정보 손실이 없으면 장식이죠. Q3. alt가 없으면 어떻게 되나요? 스크린 리더가 “이미지”나 파일명을 읽어 무엇인지 모릅니다. 정보가 사라 지죠.

6. 마무리

CP-205의 메시지:

이미지를 못 봐도 알게 — 의미 있는 모든 이미지에 대체 텍스트를, 장식은 빈 alt로.

이미지는 시각 정보라 못 보는 사용자에겐 전달 안 됩니다. 정보를 담은 이미지에 그 내용을 설명하는 alt를 제공 하고, 순수 장식은 빈 alt로 건너뛰게 하죠. 웹 접근성의 가장 기본 규칙입니다. 다음 편은 대체 텍스트에 넣지 말아야 할 것입니다.

다음 편 예고 ▶ 「326. (CP-206) 이미지 대체 텍스트에 작가 정보·역할 중복·인접 설명 동일·이미지에 없는 추가 정보를 포함하고 있지 않다.」

ViewCheck는 의미 있는 이미지에 대체 텍스트가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 이미지(Image) 가이드 — https://www.krds.go.kr/html/site/component/component_19.html

WCAG 2.1 SC 1.1.1 Non-text Content — https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

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

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