아이콘만으론 부족하다

KRDS CP-024 — 아이콘 버튼/링크에 텍스트 레이블을 제공하고 있다.

0. 들어가며 — 돋보기는 무슨 뜻일까

이번 144편은 헤더의 아이콘 버튼/링크에 텍스트 레이블을 제공하는 규칙입니다.

헤더에는 아이콘만으로 된 버튼이 많습니다 — 돋보기(검색), 사람 모양(로그인), 햄버거(메뉴) 등이죠. 디자이너는 공간을 아끼려 아이콘만 두지만, 아이콘의 의미는 사람마다 다르게 해석될 수 있고 스크린리더는 아이콘을 읽지 못합니다. CP-024는 아이콘 버튼에 텍스트 레이블을 함께 제공하라고 규정하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 텍스트 레이블 제공

CP-024 (컴포넌트 > 헤더) “아이콘 버튼/링크에 텍스트 레이블을 제공하고 있다.”

아이콘만으로 된 버튼·링크에 텍스트 레이블(이름)을 함께 제공하라는 뜻입니다.

정리: 아이콘 버튼/링크에 텍스트 레이블을 제공하라. 이게 CP-024입니다.

2. 왜 아이콘만으론 부족한가

아이콘은 직관적으로 보이지만, 의미가 항상 명확하진 않습니다.

첫째, 해석의 모호함입니다. 돋보기는 대개 ’검색’이지만, 사람 아이콘은 ’로그인’인지 ’마이페이지’인지 ’회원정보’인지 모호하죠. 하트는 ’좋아요’인지 ’즐겨찾기’인지, 종 모양은 ’알림’인지 모릅니다. 아이콘 의미는 학습과 문화에 따라 달라, 모두가 같게 해석하지 않습니다. 특히 고령층·디지털 취약계층은 아이콘에 익숙하지 않아 더 어렵죠.

둘째, 스크린리더 접근성입니다. 스크린리더는 아이콘(이미지·폰트 아이콘)을 읽지 못합니다. 텍스트 레이블이 없으면 시각장애 사용자는 그 버튼이 무엇인지 전혀 알 수 없죠. “버튼”이라고만 읽히거나 아예 건너뛰어집니다.

그래서 CP-024는 아이콘에 텍스트 레이블을 제공하라고 합니다. 방법은 두 가지입니다.

① 보이는 텍스트 레이블 — 아이콘 옆이나 아래에 텍스트를 함께 표시합니다(예: 돋보기 + “검색”). 가장 명확 하고, 모든 사용자(고령층 포함)에게 좋습니다. KRDS는 이를 권장하죠 — 91편(아이콘은 텍스트와 함께)의 원리입니다.

② 시각적으로 숨긴 레이블 — 공간이 정말 부족하면, 아이콘만 보이게 하되 스크린리더용 텍스트를 숨겨 제공 합니다(aria-label 또는 시각적으로 숨긴 텍스트). 이러면 시각 사용자에겐 아이콘만, 스크린리더 사용자에겐 “검색”이 전달되죠. 최소한 이건 반드시 해야 합니다.

핵심은 — 아이콘 버튼이 ‘시각으로도, 스크린리더로도’ 무슨 기능인지 전달되어야 한다는 것입니다. 가능하면 보이는 레이블을, 최소한 스크린리더용 레이블을 제공하는 것이 CP-024죠. 다음 편들(CP-030 등)에서 로고·이미지의 대체 텍스트도 같은 맥락으로 다룹니다.

3. 점검 / 개선

무엇을 점검하나

레이블 존재 — 아이콘 버튼에 텍스트 레이블(보이는/숨긴)이 있는가.

의미 명확 — 레이블이 버튼 기능을 정확히 설명하는가.

스크린리더 — 스크린리더가 버튼 기능을 읽는가.

Before / After

<!-- ❌ 아이콘만 (의미 불명, 스크린리더 못 읽음) --> <button><svg class="icon-search"></svg></button> <!-- ✅ 보이는 레이블 (최선) --> <button><svg class="icon-search"></svg><span>검색</span></button> <!-- ✅ 최소한 숨긴 레이블 --> <button aria-label="검색"><svg class="icon-search" aria-hidden="true"></svg></button>

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

역할	책임
디자이너	아이콘 + 텍스트 레이블 구성
퍼블리셔/개발	보이는/숨긴 레이블 구현

기관 유형	CP-024 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아이콘 버튼이 있을 때)

아이콘 버튼/링크가 있는 사이트 = 해당. (KWCAG ’레이블 제공’과 직결.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 버튼에 텍스트 레이블(보이는/숨긴)이 있나요?

□ 레이블이 버튼 기능을 정확히 설명하나요?

□ 스크린리더가 버튼 기능을 읽나요?

❓ FAQ

Q1. 공간이 없는데 보이는 레이블을 꼭 넣어야 하나요? 가능하면 보이는 레이블이 최선입니다. 정말 공간이 없으면 최소한 aria-label로 스크린리더용 레이블을 제공해야 합니다. Q2. 돋보기는 누구나 검색인 줄 알지 않나요? 돋보기는 비교적 보편적이지만, 스크린리더는 못 읽습니다. 또 사람·하트·종 등은 의미가 모호하죠. 레이블이 안전합니다. Q3. KRDS를 채택하면 자동인가요? 표준 아이콘 버튼은 레이블을 포함해 제공됩니다.

6. 마무리

CP-024의 메시지:

아이콘만으론 부족하다 — 시각으로도 스크린리더로도 ‘무슨 기능인지’ 전달되어야 한다.

아이콘은 의미가 모호하고 스크린리더가 못 읽으므로, 텍스트 레이블이 필요합니다. 가능하면 보이는 레이블(아이콘 +텍스트)을, 최소한 스크린리더용 숨긴 레이블을 제공해야 모든 사용자가 버튼 기능을 알죠. 91편의 원리가 헤더 아이콘에 적용된 것입니다.

다음 편은 메인 메뉴와 검색의 위치를 다룹니다. CP-025 — “메인 메뉴와 검색의 위치는 웹사이트의 목적에 적합한 형태로 제공한다.”

다음 편 예고 ▶ 「145. (CP-025) 메인 메뉴와 검색의 위치는 웹사이트의 목적에 적합한 형태로 제공하고 있다.」

ViewCheck는 헤더 아이콘 버튼에 텍스트 레이블이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

WCAG 2.1 SC 1.1.1 / 2.4.4 / KWCAG 레이블 제공

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

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