군더더기 없이 이미지만 설명하라

KRDS CP-206 — 이미지에 대체 텍스트에는 사진가 또는 이미지를 만든 사람의 정보, 요소의 역할과 중복되는 텍스트, 이미지와 인접한 텍스트 설명과 동일한 설명, 이미지에 없는 추가적인 정보를 포함하고 있지 않다.

0. 들어가며 — 대체 텍스트도 잘 써야 한다

이번 326편은 대체 텍스트에 ①작가 정보 ②역할 중복 텍스트 ③인접 설명과 동일한 설명 ④이미지에 없는 추가 정보를 포함하지 말라는 규칙입니다.

앞 편(CP-205)에서 의미 있는 이미지에 대체 텍스트를 제공하게 했습니다. CP-206은 그 대체 텍스트를 잘 쓰는 법 — 정확히는 ‘넣지 말아야 할 4가지’ — 을 규정하죠. 대체 텍스트는 이미지의 핵심 내용만 담고 군더더기를 빼야, 스크린 리더 사용자가 깔끔하고 정확하게 정보를 얻습니다. 이번 편을 풀어냅니다.

1. 원문 — 대체 텍스트에 넣지 말 4가지

CP-206 (컴포넌트 > 이미지) “이미지에 대체 텍스트에는 ①사진가 또는 이미지를 만든 사람의 정보, ②요소의 역할과 중복되는 텍스트, ③이미지와 인접한 텍스트 설명과 동일한 설명, ④이미지에 없는 추가적인 정보를 포함하고 있지 않다.”

대체 텍스트에 — 제작자 정보, 역할 중복 표현, 인접 텍스트와 중복되는 설명, 이미지에 실제로 없는 추가 정보를 넣지 말라는 뜻입니다.

정리: 대체 텍스트엔 제작자·역할중복·인접중복·없는정보를 넣지 마라. 이게 CP-206입니다.

2. 왜 이 4가지를 빼야 하나

대체 텍스트의 목적은 — ’이미지가 전하는 정보를 정확하고 간결하게 텍스트로 대체’하는 것입니다. 이 목적에 맞지 않는 군더더기·오정보는 빼야 스크린 리더 사용자가 깔끔하게 정보를 얻죠. 4가지를 하나씩 봅니다.

① 사진가·제작자 정보 배제. “○○○ 작가 촬영”, “△△ 제작” 같은 제작자 정보는 — 이미지가 전하는 내용이 아니라 부가적 출처 정보죠. 대체 텍스트는 이미지의 내용을 전하는 곳이지 저작권·출처를 적는 곳이 아닙니다. 작가 정보가 alt에 들어가면 스크린 리더가 “○○○ 작가 촬영, …” 처럼 읽어 핵심 내용 전달이 지연되죠. 출처 정보가 필요하면 별도 캡션·크레딧으로 표시합니다.

② 역할 중복 텍스트 배제. “○○ 이미지”, “○○ 사진”, “○○ 그림”, “○○ 버튼” 같은 요소 역할을 중복하는 표현을 빼라는 것입니다. 스크린 리더는 이미 그 요소가 ’이미지’임을 자체적으로 안내하죠 — <img>를 만나면 “이미지”라고 읽습니다. 그런데 alt에 “…이미지”라고 또 넣으면 “○○ 이미지, 이미지” 처럼 ’이미지’를 중복 낭독 하죠. 그래서 alt에는 “○○”만 적고 “이미지/사진/그림” 같은 역할어를 빼, 중복을 막습니다. (링크 안 이미지면 링크 역할도 마찬가지.)

③ 인접 텍스트와 동일한 설명 배제. 이미지 바로 옆·아래에 이미 그 이미지를 설명하는 텍스트(캡션, 본문)가 있으면 — alt에 같은 설명을 또 넣지 말라는 것입니다. 그러면 스크린 리더가 같은 내용을 두 번 읽죠(alt + 인접 텍스트). 예를 들어 사진 아래 “민원실 안내 데스크” 캡션이 있는데 alt에도 “민원실 안내 데스크”면 중복 낭독 입니다. 이 경우 — alt를 빈 alt(alt="")로 두어 이미지를 건너뛰게 하거나(인접 텍스트가 이미 설명하므로), alt에는 인접 텍스트와 다른 보충 정보만 담죠. 중복을 피하는 게 핵심입니다.

④ 이미지에 없는 추가 정보 배제. alt는 이미지에 실제로 있는 내용만 설명해야 합니다. 이미지에 없는 추가 정보·해석·홍보 문구를 넣으면 — 비시각 사용자가 받는 정보(alt)와 시각 사용자가 보는 것(이미지)이 달라지죠. 예를 들어 단순 건물 사진의 alt에 “최신 시설을 갖춘 친환경 청사” 같은 (이미지엔 안 보이는) 평가·홍보를 넣으면, 시각 사용자는 그냥 건물을 보는데 비시각 사용자만 추가 해석을 듣는 불일치가 생깁니다. alt는 이미지를 ‘대체’ 하는 것이지 ‘부풀리는’ 게 아니죠 — 보이는 것만 정확히 설명합니다.

이 4가지를 빼면 — 대체 텍스트가 이미지의 핵심 내용만 정확·간결하게 담아, 스크린 리더 사용자가 군더더기·중복· 오정보 없이 깔끔하게 정보를 얻습니다. CP-205(제공)가 ‘대체 텍스트를 달아라’였다면, CP-206(품질)은 ’잘 달아라’ 입니다 — 둘이 함께 좋은 대체 텍스트를 만들죠. 페이지네이션 접근가능한 이름(CP-128), 긴급 공지 링크 이름 (CP-160)에서 본 ‘정확·간결한 텍스트’ 원칙의 이미지 alt 버전입니다.

정리하면 — 대체 텍스트는 이미지 내용을 정확·간결하게 대체해야 하므로, 제작자 정보·역할 중복·인접 설명 중복· 이미지에 없는 정보 같은 군더더기와 오정보를 빼야 합니다.

3. 점검 / 개선

무엇을 점검하나

제작자 정보 없음 — alt에 작가·제작자 정보가 들어가지 않았는가.

역할어 없음 — alt에 “이미지/사진/그림” 같은 역할 중복어가 없는가.

인접 중복 없음 — alt가 인접 캡션·본문과 같은 설명을 반복하지 않는가.

없는 정보 없음 — alt에 이미지에 실제로 없는 추가 정보·해석이 없는가.

개선 방향

alt에서 작가 정보·“이미지/사진” 역할어 제거. 출처는 캡션으로.

인접 텍스트가 설명하면 빈 alt 또는 보충만. 이미지에 보이는 것만 정확히 기술.

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

역할	책임
콘텐츠/퍼블리셔	정확·간결한 대체 텍스트 작성
접근성 담당	alt 품질(중복·오정보) 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ alt에 작가·제작자 정보가 들어가지 않았나요?

□ alt에 “이미지/사진/그림” 같은 역할 중복어가 없나요?

□ alt가 인접 캡션·본문과 같은 설명을 반복하지 않나요?

□ alt에 이미지에 없는 추가 정보·해석이 없나요?

❓ FAQ

Q1. alt에 “○○ 사진”이라고 쓰면 안 되나요? 스크린 리더가 이미 “이미지”로 안내하므로 “사진/이미지”는 중복 입니다. “○○”만 적습니다. Q2. 캡션이 있는데 alt도 같게 쓰면요? 같은 내용을 두 번 읽습니다. 빈 alt로 두거나 보충 정보만 담습니다. Q3. 이미지에 없는 홍보 문구를 넣으면요? 시각·비시각 사용자가 받는 정보가 달라집니다. alt는 보이는 것만 정확히 설명합니다.

6. 마무리

CP-206의 메시지:

군더더기 없이 이미지만 설명하라 — 제작자·역할중복·인접중복·없는정보를 빼라.

대체 텍스트는 이미지 내용을 정확·간결하게 대체하는 것입니다. 작가 정보·“이미지” 역할어·인접 설명 중복·이미지에 없는 정보 같은 군더더기와 오정보를 빼야 스크린 리더 사용자가 깔끔하게 정보를 얻죠. CP-205(제공)와 함께 좋은 대체 텍스트를 완성합니다. 다음 편은 이미지 그룹의 마지막 — 이미지의 비대화형 처리입니다.

다음 편 예고 ▶ 「327. (CP-207) 이미지에 키보드 초점이 접근하지 않아야 하며, 마우스 클릭에 반응하지 않게 구현하고 있다.」

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컴포넌트,웹표준