텍스트가 있으면 아이콘은 장식

KRDS CP-273 — 기능을 설명할 수 있는 텍스트 레이블이 있는 아이콘 버튼에 대체 텍스트를 제공하지 않고 있다.

0. 들어가며 — 중복을 피하라

이번 393편은 텍스트 레이블이 있는 아이콘 버튼에는 (아이콘) 대체 텍스트를 제공하지 않는다는 규칙입니다.

앞 편(CP-272)에서 아이콘만의 버튼엔 텍스트 설명을 줬습니다. CP-273은 그 반대 경우 — 아이콘 옆에 텍스트 레이블이 이미 있는 버튼이면, 아이콘에 또 대체 텍스트를 달지 말라는 것이죠. 텍스트가 의미를 담으니 아이콘은 장식이라, 대체 텍스트를 또 주면 중복 낭독됩니다. 배지 장식 아이콘(CP-159), 이미지 장식(CP-205) 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 텍스트 레이블 있는 아이콘 버튼 대체 텍스트 미제공

CP-273 (컴포넌트 > 버튼) “기능을 설명할 수 있는 텍스트 레이블이 있는 아이콘 버튼에 대체 텍스트를 제공하지 않고 있다.”

아이콘과 텍스트 레이블이 함께 있는 버튼에서, 텍스트가 이미 기능을 설명하므로 아이콘에는 별도 대체 텍스트(중복)를 제공하지 말라는 뜻입니다.

정리: 텍스트 레이블이 있으면 아이콘엔 대체 텍스트를 달지 마라(중복 방지). 이게 CP-273입니다.

2. 왜 중복 대체 텍스트를 배제하나

이미지·아이콘의 대체 텍스트 원칙(이미지 CP-205·206, 배지 CP-159)은 — ’의미를 담으면 제공, 장식이면 제공하지 않음(중복 방지)’입니다. 버튼 속 아이콘에도 같은 원리가 적용되죠.

텍스트 레이블이 있으면 아이콘은 장식. 버튼에 텍스트 레이블이 함께 있으면 그 버튼의 기능·의미는 텍스트가 전달합니다. 예를 들어 <button>🔍 검색</button>에서 ’검색’이라는 텍스트가 기능을 명확히 전하죠(CP-272의 텍스트 설명). 이때 옆의 돋보기 아이콘(🔍)은 텍스트가 전하는 의미를 시각적으로 강조·보조하는 장식일 뿐, 새로운 정보를 더하지 않습니다.

중복 대체 텍스트의 문제. 이 장식 아이콘에 또 대체 텍스트(aria-label="검색 아이콘" 등)를 주면 — 스크린 리더가 중복 낭독합니다. “검색, 검색 아이콘, 버튼” 또는 “검색 아이콘, 검색, 버튼”처럼, ’검색’이라는 의미를 두 번 읽죠. 사용자는 거추장스러운 중복을 듣고, 정작 깔끔한 정보 전달이 방해받습니다. 배지 장식 아이콘(CP-159), 이미지 인접 설명 중복(CP-206)에서 본 것과 같은 문제죠.

그래서 CP-273은 — 텍스트 레이블이 있는 아이콘 버튼의 아이콘에는 대체 텍스트를 제공하지 않습니다. 정확히는 — 그 아이콘을 보조기술에서 숨깁니다:

aria-hidden="true" — 아이콘(폰트 아이콘·SVG·이미지)에 aria-hidden="true"를 줘 스크린 리더가 건너뛰게. <button><span aria-hidden="true">🔍</span> 검색</button> 식으로요. 그러면 스크린 리더는 “검색, 버튼”만 깔끔히 읽죠.

<img alt=""> — 아이콘이 <img>면 빈 alt(alt="")로 건너뛰게(이미지 CP-205 장식 처리).

이렇게 하면 — 텍스트(‘검색’)가 기능을 전하고, 아이콘은 시각 강조만 하며 보조기술에선 건너뛰어, 중복 없이 깔끔 하죠. 의미는 텍스트가, 강조는 아이콘이 — 역할이 분리됩니다(배지 텍스트+색 CP-190·186 정신).

두 경우의 정리(CP-272 + CP-273):

버튼 구성	처리
아이콘만 (텍스트 없음)	아이콘이 의미를 담으므로 — aria-label 등으로 이름 제공(CP-272)
아이콘+텍스트	텍스트가 의미를 담으므로 — 아이콘은 장식, 대체 텍스트 미제공(aria-hidden)(CP-273)

이 둘이 짝을 이뤄 — 버튼이 기능 설명을 갖되, 중복 없이 깔끔하게 하죠. 핵심 판단은 ‘의미를 무엇이 전달하는가’ — 아이콘만이면 아이콘이(이름 제공), 텍스트가 있으면 텍스트가(아이콘은 숨김).

이 규칙은 버튼의 ’접근성 정돈’을 담당합니다 — 텍스트 설명을 제공(CP-272)하되 중복을 배제(CP-273)해, 스크린 리더 사용자가 군더더기 없이 버튼 기능을 인지하게 하죠.

정리하면 — 텍스트 레이블이 있는 아이콘 버튼은 텍스트가 의미를 전하고 아이콘은 장식이므로, 아이콘에 대체 텍스트를 주지 말고 aria-hidden으로 숨겨 중복 낭독을 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

중복 없음 — 아이콘+텍스트 버튼에서 아이콘에 대체 텍스트(중복)가 없는가.

아이콘 숨김 — 장식 아이콘이 aria-hidden="true"(또는 alt="")로 처리됐는가.

낭독 확인 — 스크린 리더가 텍스트만 깔끔히 읽는가(아이콘 중복 안 읽음).

개선 방향

아이콘+텍스트 버튼의 아이콘에 aria-hidden="true"(SVG·폰트) 또는 alt=""(img).

아이콘 aria-label·“○○ 아이콘” 같은 중복 대체 텍스트 제거.

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

역할	책임
퍼블리셔/개발	장식 아이콘 aria-hidden·중복 대체 텍스트 제거
접근성 담당	중복 낭독 없음 검증

기관 유형	CP-273 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아이콘+텍스트 버튼 사용 시)

아이콘과 텍스트가 함께 있는 버튼을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘+텍스트 버튼에서 아이콘에 대체 텍스트(중복)가 없나요?

□ 장식 아이콘이 aria-hidden="true"(또는 alt="")로 처리됐나요?

□ 스크린 리더가 텍스트만 깔끔히 읽나요(아이콘 중복 안 읽음)?

❓ FAQ

Q1. 아이콘에도 설명을 주면 더 친절하지 않나요? 텍스트가 이미 의미를 전하므로 중복 낭독만 됩니다. 아이콘은 장식이라 숨깁니다. Q2. CP-272와 모순 아닌가요? 아닙니다. 아이콘’만’이면 이름 제공(272), 아이콘+텍스트면 아이콘 숨김(273) 입니다. ’의미를 무엇이 전하는가’로 갈리죠. Q3. 어떻게 숨기나요? SVG·폰트 아이콘은 aria-hidden="true", <img> 아이콘은 alt=""로 처리합니다.

6. 마무리

CP-273의 메시지:

텍스트가 있으면 아이콘은 장식 — 텍스트 레이블 있는 아이콘 버튼엔 대체 텍스트를 두지 마라.

아이콘+텍스트 버튼에서 텍스트가 의미를 전하므로, 아이콘은 장식이라 대체 텍스트를 주면 중복 낭독됩니다. aria-hidden으로 아이콘을 숨겨 텍스트만 깔끔히 읽히게 하죠. CP-272(아이콘만=이름 제공)와 짝을 이룹니다. 다음 편은 버튼의 접근 가능한 이름입니다.

다음 편 예고 ▶ 「394. (CP-274) 버튼의 접근 가능한 이름은 버튼을 통해 실행되는 기능을 적절하게 설명할 수 있는 내용으로 제공하고 있다.」

ViewCheck는 텍스트 레이블 있는 아이콘 버튼에 중복 대체 텍스트가 없는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 버튼(Button) 가이드 — https://www.krds.go.kr/html/site/component/component_25.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컴포넌트,웹표준