눈으로 못 봐도 알 수 있게

KRDS BP-058 — 텍스트 이외의 콘텐츠에 대해 정보를 이해할 수 있도록 대체 수단을 제공하고 있다.

0. 들어가며 — 이미지·영상·표의 정보를 텍스트로도

이번 624편은 텍스트 이외의 콘텐츠에 대해 정보를 이해할 수 있도록 대체 수단을 제공하라는 규칙입니다.

이미지, 인포그래픽, 동영상, 표, 차트 — 텍스트가 아닌 콘텐츠는, 그 자체로는 스크린 리더 사용자가 정보를 못 얻죠. BP-058은 대체 수단(대체 텍스트·자막·요약 등)을 규정합니다. 웹접근성의 가장 근본 원칙(인식의 용이성)이죠.

1. 원문 — 비텍스트 대체 수단

BP-058 (기본 패턴 > 상세 정보 확인) “텍스트 이외의 콘텐츠에 대해 정보를 이해할 수 있도록 대체 수단을 제공하고 있다.”

텍스트가 아닌 콘텐츠(이미지·영상·표 등)에 정보를 이해할 대체 수단을 제공하라는 뜻입니다.

정리: 비텍스트 콘텐츠에 대체 수단을 제공하라. 이게 BP-058입니다.

2. 왜 대체 수단인가

콘텐츠에는 텍스트 외 다양한 형태가 있습니다: 이미지, 인포그래픽, 사진, 동영상, 오디오, 표, 차트 등. 이들은 시각·청각으로 정보를 전하죠. 그런데 시각·청각 장애 사용자, 또는 이미지가 안 보이는 환경(느린 네트워크 등) 에선, 그 정보를 못 얻습니다. BP-058은 대체 수단으로 모두가 정보를 얻게 하라고 합니다.

대체 수단이 없을 때의 문제:

시각 장애 이미지 인포그래픽·차트·사진이 대체 텍스트가 없으면, 스크린 리더 사용자는 그 정보를 전혀 못 얻습니다. ’통계 그래프’가 빈 이미지로 무시되죠.

청각 장애 동영상·오디오 동영상·오디오가 자막·대본이 없으면, 청각 장애 사용자는 음성 정보를 못 얻죠.

정보 격차 비텍스트 콘텐츠의 정보가 일부 사용자에게만 닿으면, 정보 격차가 생깁니다. 공공 정보는 모두에게 동등해야 하죠.

그래서 BP-058은 — 콘텐츠 형태별 대체 수단을 제공하라고 합니다:

이미지 대체 텍스트 이미지·사진·아이콘에 alt 속성으로 그 내용·의미를 텍스트로요(BP-043, CP-189). 스크린 리더가 alt를 읽어 정보를 전하죠.

인포그래픽·차트 텍스트 설명/표 복잡한 인포그래픽·차트는 간단한 alt로 부족하니, 본문 텍스트 설명이나 데이터 표로 같은 정보를 제공합니다. 그래프의 수치·추세를 텍스트·표로도요.

동영상 자막·대본 동영상에 자막(청각 장애용), 화면 해설(시각 장애용), 대본(transcript)을요(WCAG 1.2).

오디오 대본 오디오에 텍스트 대본을 제공하죠.

표 적절한 마크업 표는 <table> 시맨틱과 제목(<th>)으로, 스크린 리더가 행·열 관계를 읽게요(BP-060).

’정보를 이해할 수 있도록’이 핵심. 단순히 대체물을 붙이는 게 아니라 같은 정보·의미를 전해야 합니다. 인포그래픽 이 전하는 ’핵심 메시지’를, 대체 텍스트·설명도 전해야 하죠. 장식 이미지는 빈 alt(정보 없으니), 정보 이미지는 의미를 담은 대체 수단을요.

웹접근성의 근본 원칙. 이 규칙은 WCAG 4원칙 중 첫째 ’인식의 용이성(Perceivable)’의 핵심입니다. 모든 정보는 사용자가 인식할 수 있는 형태로 제공돼야 하죠. 비텍스트의 대체 수단은 그 출발점입니다.

이 규칙은 상세 정보 확인의 ’비텍스트 접근성’을 담당합니다 — 비텍스트 콘텐츠에 대체 수단을 줘(058), 시각·청각 장애 사용자도 모든 정보를 동등하게 얻게 하죠.

정리하면 — 이미지·동영상·표 등 비텍스트 콘텐츠는 그 자체로 일부 사용자가 정보를 못 얻으므로, 형태별 대체 수단(대체 텍스트·자막·대본·설명·표 마크업)으로 같은 정보를 이해할 수 있게 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

이미지 대체 텍스트 — 정보 이미지에 의미 있는 alt가 있는가.

영상·오디오 대체 — 동영상에 자막·대본, 오디오에 대본이 있는가.

인포그래픽·표 — 복잡 그래픽에 텍스트 설명/표, 표에 시맨틱 마크업이 있는가.

개선 방향

정보 이미지 alt, 동영상 자막·대본(WCAG 1.2), 인포그래픽 텍스트 설명/표.

같은 ’정보·의미’를 전하게. 장식은 빈 alt. 표는 시맨틱(BP-060).

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

역할	책임
콘텐츠 작성자	대체 텍스트·자막·설명 작성
퍼블리셔/개발	대체 수단 마크업 구현

기관 유형	BP-058 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 비텍스트 콘텐츠를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 정보 이미지에 의미 있는 대체 텍스트가 있나요?

□ 동영상에 자막·대본, 오디오에 대본이 있나요?

□ 인포그래픽에 텍스트 설명/표, 표에 시맨틱 마크업이 있나요?

❓ FAQ

Q1. 인포그래픽도 alt만 있으면 되나요? 복잡한 인포그래픽·차트는 짧은 alt로 부족합니다. 본문 텍스트 설명이나 데이터 표로 같은 정보(수치·추세)를 제공해야 하죠. Q2. 동영상엔 뭘 제공하나요? 자막(청각 장애), 화면 해설(시각 장애), 대본(transcript)을요(WCAG 1.2). 자동재생 금지·키보드 조작(BP-059)도 함께입니다. Q3. 장식 이미지도 대체 텍스트를 주나요? 정보 없는 순수 장식은 빈 alt(alt="")로 무시합니다. 정보를 전하는 이미지만 의미를 담은 대체 수단을 주죠.

6. 마무리

BP-058의 메시지:

눈으로 못 봐도 알 수 있게 — 비텍스트 콘텐츠에 대체 수단을 제공하라.

이미지·동영상·표는 그 자체로 일부 사용자가 정보를 못 얻습니다. 형태별 대체 수단으로 같은 정보를 이해하게 하는 게 핵심이죠(인식의 용이성). 다음 편은 멀티미디어 플레이어 키보드·자동재생입니다.

다음 편 예고 ▶ 「625. (BP-059) 멀티미디어 콘텐츠 플레이어는 키보드로 조작할 수 있으며, 자동 재생이 되지 않게 하고 있다.」

ViewCheck는 비텍스트 콘텐츠에 대체 수단이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 상세 정보 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_06.html

WCAG 2.1 SC 1.1.1 Non-text Content / 1.2 Time-based Media — https://www.w3.org/WAI/WCAG21/Understanding/

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

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