아이콘 의미도 텍스트로

KRDS BP-043 — 정보 전달을 위해 아이콘 및 첨부파일 아이콘 이미지를 사용하는 경우 대체 텍스트를 제공하고 있다.

0. 들어가며 — 첨부 아이콘이 안 읽히면

이번 609편은 정보 전달을 위해 아이콘·첨부파일 아이콘 이미지를 사용하는 경우 대체 텍스트를 제공하라는 규칙입니다.

목록에서 — 첨부파일 아이콘(📎), 잠금 아이콘(🔒), 새 글 표시(N) 같은 정보 전달 아이콘이 — 대체 텍스트 없으면 스크린 리더 사용자가 그 정보를 못 얻죠. BP-043은 정보 아이콘의 대체 텍스트를 규정합니다. 이미지 alt(CP-189)의 목록 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 정보 아이콘 대체 텍스트

BP-043 (기본 패턴 > 목록 탐색) “정보 전달을 위해 아이콘 및 첨부파일 아이콘 이미지를 사용하는 경우 대체 텍스트를 제공하고 있다.”

목록에서 정보를 전달하는 아이콘·첨부 아이콘 이미지에, 그 의미를 알리는 대체 텍스트를 제공하라는 뜻입니다.

정리: 정보 전달 아이콘에 대체 텍스트를 제공하라. 이게 BP-043입니다.

2. 왜 정보 아이콘 대체 텍스트인가

목록 항목에는 — 정보를 전달하는 아이콘이 쓰입니다:

첨부파일 아이콘(📎) — 그 게시글에 첨부파일이 있음.

잠금 아이콘(🔒) — 비공개·보안 게시글.

새 글 표시(N, NEW) — 새로 등록된 글.

답글·인기·고정 아이콘 등.

이 아이콘들은 정보를 전합니다(첨부 있음, 비공개 등). 그런데 이미지·아이콘이라 시각적으로만 보이죠. 스크린 리더 사용자는 대체 텍스트가 없으면 그 아이콘의 의미를 못 얻습니다. BP-043은 대체 텍스트를 요구합니다.

대체 텍스트가 없을 때의 문제:

정보 손실 첨부 아이콘(📎)에 대체 텍스트가 없으면, 스크린 리더 사용자는 그 게시글에 첨부파일이 있는지 모릅니다. 잠금 아이콘(🔒)도 비공개 여부를 못 알죠. 시각 사용자는 아이콘으로 즉시 아는 정보를 스크린 리더 사용자는 놓칩니다.

이미지 아이콘 미인식 아이콘이 <img> 이미지인데 alt가 없거나, 폰트 아이콘·SVG인데 접근가능한 이름이 없으면, 스크린 리더가 무시하거나 깨진 정보를 읽죠.

그래서 BP-043은 — 정보 전달 아이콘에 대체 텍스트를 제공하라고 합니다:

의미를 담은 대체 텍스트 — 각 정보 아이콘에 — 그 의미를 알리는 대체 텍스트를 줍니다:

첨부 아이콘 → ‘첨부파일 있음’

잠금 아이콘 → ‘비공개 게시글’

새 글 → ‘새 글’ 스크린 리더가 — ’○○ 게시글, 첨부파일 있음’처럼 읽어, 그 정보를 전하죠.

구현 방법 — 이미지(<img>)면 alt 속성으로(CP-189), 폰트 아이콘·SVG면 aria-label이나 sr-only 텍스트로 접근가능한 이름을요. 첨부 아이콘이 링크면 — 그 링크에 ‘첨부파일 다운로드’ 같은 이름도요.

장식 아이콘은 빈 alt — 반대로 — 순수 장식 아이콘(의미 없는)은 빈 alt(alt="")로 스크린 리더가 무시하게 합니다(CP-189). 정보 아이콘만 대체 텍스트를 주죠.

핵심 — 정보 vs 장식 구분. 아이콘이 — 정보를 전달하면(첨부·잠금·상태) 대체 텍스트 필수, 순수 장식이면 빈 alt로 무시. 이 구분이 핵심입니다(이미지 alt CP-189 정신).

색만으로 정보 전달 금지와도 통함. 정보를 — 색이나 아이콘만으로 전하지 말고, 텍스트로도 전하는 정신(색 무관 인식 CP-256 등)의 목록 적용이죠. 첨부 여부를 — 아이콘 + 대체 텍스트로 모두에게 전합니다.

이 규칙은 목록 탐색의 ’아이콘 정보 접근성’을 담당합니다 — 정보 전달 아이콘에 대체 텍스트를 줘(043), 스크린 리더 사용자도 첨부·상태 등 정보를 얻게 하죠. 이미지 alt(CP-189)를 목록 아이콘에 적용한 것입니다.

정리하면 — 목록의 정보 전달 아이콘(첨부·잠금·상태)이 대체 텍스트가 없으면 스크린 리더 사용자가 그 정보를 놓치 므로, 각 정보 아이콘에 의미를 담은 대체 텍스트를 제공하고 장식 아이콘은 빈 alt로 처리해야 합니다.

3. 점검 / 개선

무엇을 점검하나

정보 아이콘 대체 텍스트 — 첨부·잠금·상태 등 정보 아이콘에 대체 텍스트가 있는가.

구현 정확 — 이미지는 alt, 폰트/SVG 아이콘은 aria-label/sr-only인가.

장식 구분 — 순수 장식 아이콘은 빈 alt로 무시되는가.

개선 방향

정보 전달 아이콘(첨부·잠금·새글·상태)에 의미 대체 텍스트(alt/aria-label).

장식 아이콘은 빈 alt. 정보 vs 장식 구분(CP-189).

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

역할	책임
퍼블리셔/개발	아이콘 대체 텍스트 구현
QA/접근성	정보 아이콘 스크린 리더 검증

기관 유형	BP-043 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (정보 아이콘 사용 목록)

웹접근성 의무 대상이며 정보 아이콘을 쓰는 목록이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 첨부·잠금·상태 등 정보 아이콘에 대체 텍스트가 있나요?

□ 이미지는 alt, 폰트/SVG 아이콘은 aria-label/sr-only인가요?

□ 순수 장식 아이콘은 빈 alt로 무시되나요?

❓ FAQ

Q1. 첨부 아이콘에 왜 대체 텍스트가 필요한가요? 스크린 리더 사용자가 그 게시글에 첨부파일이 있는지 모릅니다. ‘첨부파일 있음’ 대체 텍스트로 전하죠. Q2. 모든 아이콘에 대체 텍스트를 주나요? 정보 전달 아이콘만요. 순수 장식 아이콘은 빈 alt로 무시합니다. 정보 vs 장식 구분이 핵심이죠(CP-189). Q3. 폰트 아이콘은 어떻게 하나요? aria-label이나 sr-only 텍스트로 접근가능한 이름을 줍니다. alt는 이미지용 이죠.

6. 마무리

BP-043의 메시지:

아이콘 의미도 텍스트로 — 정보 전달 아이콘에 대체 텍스트를 제공하라.

정보 전달 아이콘에 대체 텍스트가 없으면 스크린 리더 사용자가 첨부·상태 정보를 놓칩니다. 각 정보 아이콘에 의미를 담은 대체 텍스트를 주고 장식은 빈 alt로 처리하는 게 핵심이죠. 다음 편은 목록 마크업 — 목록 탐색 그룹의 마지막 입니다.

다음 편 예고 ▶ 「610. (BP-044) 스크린 리더 사용자가 목록형 정보임을 인지하고 각 항목의 논리적 구성을 이해할 수 있도록 적절한 마크업을 사용하고 있다.」

ViewCheck는 정보 전달 아이콘에 대체 텍스트가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 목록 탐색 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_04.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컴포넌트,웹표준