아이콘도 읽히게

KRDS BP-087 — 첨부파일 아이콘 이미지에 적절한 대체 텍스트를 제공하고 있다.

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

이번 653편은 첨부파일 아이콘 이미지에 적절한 대체 텍스트를 제공하라는 규칙입니다.

첨부파일에는 — 형식을 알리는 아이콘(PDF·HWP·XLS 아이콘)이 붙죠. 이 아이콘이 — 이미지인데 대체 텍스트가 없으면, 스크린 리더 사용자는 형식 정보를 못 얻습니다. BP-087은 아이콘 대체 텍스트를 규정합니다. BP-043(목록 아이콘)·BP-085 (형식 표시)와 연결되죠. 이번 편을 풀어냅니다.

1. 원문 — 첨부 아이콘 대체 텍스트

BP-087 (기본 패턴 > 첨부파일) “첨부파일 아이콘 이미지에 적절한 대체 텍스트를 제공하고 있다.”

첨부파일 형식 아이콘 이미지에 적절한 대체 텍스트를 제공하라는 뜻입니다.

정리: 첨부파일 아이콘 이미지에 대체 텍스트를 제공하라. 이게 BP-087입니다.

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

첨부파일에는 형식을 알리는 아이콘이 흔히 붙습니다: PDF 아이콘, HWP 아이콘, 엑셀 아이콘 등. 이 아이콘은 파일 형식(BP-085)을 시각적으로 알리죠. 그런데 아이콘이 이미지인데 대체 텍스트가 없으면, 스크린 리더 사용자는 그 형식 정보를 못 얻습니다. BP-087은 대체 텍스트를 요구합니다.

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

형식 정보 손실 PDF·HWP 아이콘이 대체 텍스트 없는 이미지면, 스크린 리더 사용자는 이 파일이 어떤 형식인지 모릅니다. 시각 사용자는 아이콘으로 즉시 아는데요. 형식을 알아야 열 수 있는지 판단하죠(BP-085).

이미지 미인식 alt 없는 이미지는 스크린 리더가 무시하거나, 파일 경로를 읽어(혼란) 깨진 정보를 줍니다.

그래서 BP-087은 — 적절한 대체 텍스트를 주라고 합니다:

형식을 알리는 대체 텍스트 형식 아이콘에 그 형식을 알리는 대체 텍스트를요. PDF 아이콘 → ‘PDF 파일’, HWP 아이콘 → ’한글 파일’처럼요. 스크린 리더가 ’신청서, 한글 파일’로 읽어, 형식을 전하죠.

**‘적절한’의 의미** 대체 텍스트는 의미를 정확히 전해야 합니다. ’image’, ‘icon’ 같은 무의미한 alt가 아니라, 실제 형식(‘PDF 파일’)을요. 또는 형식 정보가 링크 텍스트에 이미 있으면(BP-085 ‘신청서.pdf’), 아이콘은 장식 으로 보고 빈 alt(중복 방지)로 처리할 수도 있죠.

중복 방지 링크 텍스트에 ’신청서.pdf (PDF, 245KB)’처럼 형식이 이미 있으면, 아이콘 alt를 또 ’PDF 파일’로 하면 중복돼 스크린 리더가 두 번 읽습니다. 이 경우 아이콘은 빈 alt(alt="")로 장식 처리하죠. 정보가 텍스트에 없으면 아이콘 alt로 형식을 전합니다.

정보 vs 장식 판단(BP-043 정신). 핵심은 — 아이콘이 정보를 전달하는지입니다. 형식 정보가 — 아이콘으로만 전달 되면 → 대체 텍스트 필수. 텍스트에 이미 있으면 → 빈 alt(중복 방지). 이미지 alt 원칙(CP-189, BP-043)의 첨부 아이콘 적용이죠.

BP-085·087의 연계. BP-085(이름·크기·형식 표시)는 형식 정보를 제공하라는 것이고, BP-087은 그 형식이 아이콘 이미지로 표현될 때 대체 텍스트로 접근성을 보장하라는 것입니다. 형식 정보를 모두가 얻게 하는 짝이죠.

이 규칙은 첨부파일의 ’아이콘 접근성’을 담당합니다 — 첨부 아이콘에 적절한 대체 텍스트를 줘(087), 스크린 리더 사용자도 파일 형식을 알게 하죠. 정보/장식 판단으로 중복 없이요.

정리하면 — 첨부 형식 아이콘이 대체 텍스트 없는 이미지면 스크린 리더 사용자가 형식을 못 얻으므로, 정보를 전하는 아이콘 엔 형식 대체 텍스트(‘PDF 파일’)를, 텍스트에 형식이 이미 있으면 빈 alt(중복 방지)로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

형식 대체 텍스트 — 정보 전달 아이콘에 형식 대체 텍스트(‘PDF 파일’)가 있는가.

중복 방지 — 텍스트에 형식이 이미 있으면 아이콘이 빈 alt인가.

무의미 alt 없음 — ‘image’·‘icon’ 같은 무의미 alt가 없는가.

개선 방향

형식 아이콘에 ‘PDF 파일’·‘한글 파일’ 등 형식 대체 텍스트.

텍스트에 형식 중복 시 빈 alt. 정보/장식 판단(BP-043, CP-189).

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

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

기관 유형	BP-087 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (첨부 형식 아이콘 사용 시)

웹접근성 의무 대상이며 첨부 형식 아이콘을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 정보 전달 아이콘에 형식 대체 텍스트(‘PDF 파일’)가 있나요?

□ 텍스트에 형식이 이미 있으면 아이콘이 빈 alt인가요?

□ ‘image’·‘icon’ 같은 무의미 alt가 없나요?

❓ FAQ

Q1. 형식 아이콘에 왜 대체 텍스트가 필요한가요? 스크린 리더 사용자가 파일 형식(PDF·HWP)을 알아야 열 수 있는지 판단합니다(BP-085). 아이콘 이미지에 alt가 없으면 그 정보를 못 얻죠. Q2. 링크 텍스트에 ’PDF’가 이미 있으면요? 아이콘 alt를 또 ’PDF 파일’로 하면 중복돼 두 번 읽힙니다. 이 경우 아이콘 은 빈 alt(alt="")로 장식 처리하죠. 중복 방지입니다. Q3. 정보/장식 판단 기준은요? 형식 정보가 아이콘으로만 전달되면 대체 텍스트 필수, 텍스트에 이미 있으면 빈 alt 입니다. 이미지 alt 원칙(CP-189, BP-043)이죠.

6. 마무리

BP-087의 메시지:

아이콘도 읽히게 — 첨부파일 아이콘 이미지에 적절한 대체 텍스트를 제공하라.

형식 아이콘이 대체 텍스트 없는 이미지면 스크린 리더 사용자가 형식을 못 얻습니다. 정보 아이콘엔 형식 대체 텍스트, 중복 시 빈 alt로 제공하는 게 핵심이죠. 다음 편은 첨부파일 접근 가능 형식 — 첨부파일 그룹의 마지막입니다.

다음 편 예고 ▶ 「654. (BP-088) 첨부파일은 스크린 리더가 접근할 수 있는 형식으로 제공하고 있다.」

ViewCheck는 첨부파일 아이콘에 적절한 대체 텍스트가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 첨부파일 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_09.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컴포넌트,웹표준