장식 아이콘은 읽지 마라

KRDS CP-159 — 아이콘에 대체 텍스트를 제공하고 있지 않다.

0. 들어가며 — 대체 텍스트가 ‘없어야’ 맞는 경우

이번 279편은 긴급 공지 아이콘에 대체 텍스트를 제공하지 않는다는 규칙입니다.

지금까지 접근성 규칙은 대부분 ‘정보를 제공하라’였는데, 이 규칙은 반대로 ’대체 텍스트를 제공하지 마라’ 입니다. 왜일까요? 긴급 공지의 경고 아이콘(⚠️ 등)은 옆 텍스트가 이미 전달하는 의미를 시각적으로 보조하는 장식이기 때문이죠. 여기에 대체 텍스트를 또 달면 스크린 리더가 같은 의미를 중복 낭독해 거추장스럽습니다. CP-159는 이 중복을 배제합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 아이콘 대체 텍스트 미제공

CP-159 (컴포넌트 > 긴급 공지) “아이콘에 대체 텍스트를 제공하고 있지 않다.”

긴급 공지의 (장식적) 아이콘에는 대체 텍스트를 제공하지 않아, 스크린 리더가 그 아이콘을 읽지 않고 텍스트 메시지만 전달하게 하라는 뜻입니다.

정리: 긴급 공지의 장식 아이콘엔 대체 텍스트를 달지 마라(스크린 리더가 읽지 않게). 이게 CP-159입니다.

2. 왜 대체 텍스트를 제공하지 않나

웹 접근성에서 이미지·아이콘의 대체 텍스트(alt) 처리는 ‘정보를 전달하는가’ 에 따라 갈립니다 — 핵심은 ’중복 없이, 의미는 빠짐없이’입니다.

이미지의 두 종류:

의미 있는(informative) 이미지 — 그 이미지가 정보를 담고 있어, 못 보면 의미를 놓치는 경우. 대체 텍스트를 제공해야 합니다. 예: 차트, 의미 있는 사진, 텍스트가 든 이미지 등.

장식적(decorative) 이미지 — 의미는 주변 텍스트가 이미 전달하고, 이미지는 시각적 보조·강조일 뿐인 경우. 대체 텍스트를 제공하지 않아야 합니다(빈 alt 등으로 스크린 리더가 건너뛰게). 제공하면 중복·잡음이 되죠.

긴급 공지의 경고 아이콘(⚠️, 느낌표, 종 모양 등)은 장식적입니다. 왜냐하면 — 그 아이콘이 전하려는 ‘긴급/ 경고’라는 의미를 옆의 텍스트 메시지가 이미 담고 있기 때문이죠. 예를 들어 “⚠️ ○○ 지역 호우 경보, 외출 자제 바랍니다” 에서, ⚠️ 아이콘은 텍스트(“호우 경보”)가 전하는 긴급함을 시각적으로 강조할 뿐, 새로운 정보를 더하지 않습니다. 더구나 긴급 공지 영역 자체에 ’긴급 공지’ 역할·이름이 부여돼(CP-158) 보조기술이 이미 용도를 알죠.

이때 아이콘에 대체 텍스트(“경고 아이콘”, “느낌표”)를 달면 — 스크린 리더가 “경고 아이콘, ○○ 지역 호우 경보…” 처럼 읽어, 아이콘 설명 + 텍스트를 중복 낭독합니다. 사용자는 의미 없는 “경고 아이콘”이라는 잡음을 먼저 듣고 본 메시지를 듣죠. 거추장스럽고, 정작 중요한 텍스트 메시지에 집중하기 어렵습니다. 그래서 장식 아이콘은 스크린 리더가 건너뛰게 처리하는 게 맞습니다.

구현 방법. 아이콘을 보조기술에서 숨깁니다:

<img>라면 alt=""(빈 alt) — 스크린 리더가 건너뜀.

아이콘 폰트·SVG·배경 이미지라면 aria-hidden="true" — 보조기술이 무시.

인라인 SVG는 aria-hidden="true" + focusable="false".

이는 브레드크럼 구분자(CP-088), 페이지네이션 아이콘(CP-130에서 장식 아이콘 숨김), 탭 바 등에서 반복된 ’장식 요소는 보조기술에서 빼라’는 정신과 같습니다.

주의 진짜 의미를 담은 아이콘이면 다르다. 만약 어떤 아이콘이 텍스트 없이 단독으로 의미를 전달한다면 (옆에 설명 텍스트가 없음), 그건 장식이 아니라 정보이므로 대체 텍스트가 필요하죠. CP-159가 ’대체 텍스트를 제공하지 마라’고 단정하는 것은 긴급 공지에서 아이콘이 텍스트와 함께 쓰여 의미가 중복되는 상황을 전제 합니다. 긴급 공지는 항상 텍스트 메시지를 갖추므로(아이콘만으로 긴급을 전하지 않으므로), 그 아이콘은 장식이 되고 대체 텍스트가 불필요한 것이죠. 의미는 텍스트가, 강조는 아이콘이 역할이 분리됩니다.

정리하면 — 긴급 공지 아이콘은 텍스트가 의미를 담는 장식이므로, 대체 텍스트를 제공하지 않아 스크린 리더가 중복 없이 핵심 메시지만 전달하게 합니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 미낭독 — 긴급 공지 장식 아이콘이 스크린 리더에 읽히지 않는가.

의미 중복 없음 — 아이콘 설명과 텍스트 메시지가 중복 낭독되지 않는가.

텍스트 의미 완전성 — 아이콘 없이 텍스트만으로도 의미가 온전한가.

개선 방향

장식 아이콘에 alt=""(img) 또는 aria-hidden="true"(SVG·폰트) 적용.

의미는 텍스트가 담게 하고 아이콘은 강조 역할로 한정.

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

역할	책임
퍼블리셔/개발	장식 아이콘 alt=""·aria-hidden 처리
접근성 담당	아이콘 미낭독·중복 없음 검증

기관 유형	CP-159 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아이콘 있는 긴급 공지 사용 시)

긴급 공지에 경고 아이콘을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 긴급 공지 장식 아이콘이 스크린 리더에 읽히지 않나요?

□ 아이콘 설명과 텍스트가 중복 낭독되지 않나요?

□ 아이콘 없이 텍스트만으로도 의미가 온전한가요?

❓ FAQ

Q1. 대체 텍스트는 항상 제공하는 거 아닌가요? 의미 있는 이미지는 제공하지만, 장식 이미지는 제공하지 않아야 합니다(중복 방지). 긴급 공지 아이콘은 텍스트가 의미를 담아 장식입니다. Q2. 아이콘이 텍스트 없이 단독이면요? 그건 정보를 담은 아이콘이라 대체 텍스트가 필요합니다. CP-159는 텍스트 와 함께 쓰여 중복되는 경우를 전제합니다. Q3. 어떻게 숨기나요? <img alt=""> 또는 SVG·폰트 아이콘에 aria-hidden="true"로 처리합니다.

6. 마무리

CP-159의 메시지:

장식 아이콘은 읽지 마라 — 텍스트가 의미를 담은 아이콘엔 대체 텍스트를 두지 않는다.

긴급 공지 아이콘은 옆 텍스트가 이미 전하는 긴급함을 강조하는 장식입니다. 대체 텍스트를 달면 중복 낭독되어 거추장스럽죠. alt=""·aria-hidden으로 스크린 리더가 건너뛰게 해, 핵심 메시지만 전달합니다. 의미는 텍스트, 강조는 아이콘으로 역할을 나누죠. 다음 편은 긴급 공지 그룹의 마지막 — 링크 이름입니다.

다음 편 예고 ▶ 「280. (CP-160) 목적지를 예측할 수 있는 링크 이름 또는 부가 설명을 제공하고 있다.」

ViewCheck는 긴급 공지 장식 아이콘이 보조기술에서 중복 낭독되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 긴급 공지(Critical alerts) 가이드 — https://www.krds.go.kr/html/site/component/component_13.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컴포넌트,웹표준