아이콘만으론 안 된다

KRDS CP-272 — 모든 버튼에는 기능, 목적을 이해할 수 있는 설명을 텍스트로 제공하고 있다.

0. 들어가며 — 아이콘 버튼의 의미

이번 392편은 모든 버튼에 기능·목적을 이해할 수 있는 설명을 텍스트로 제공하라는 규칙입니다.

버튼을 아이콘만으로(텍스트 없이) 만드는 경우가 많죠 — 검색(돋보기), 삭제(휴지통), 닫기(X) 등. 그런데 아이콘 만으론 — 의미가 모호하거나 스크린 리더가 못 읽습니다. CP-272는 모든 버튼에 그 기능·목적을 텍스트로 제공하라고 규정합니다. 배지 텍스트(CP-190), 이미지 대체 텍스트(CP-205) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 기능·목적 텍스트 설명

CP-272 (컴포넌트 > 버튼) “모든 버튼에는 기능, 목적을 이해할 수 있는 설명을 텍스트로 제공하고 있다.”

모든 버튼에 그 버튼의 기능·목적을 이해할 수 있는 텍스트 설명(보이는 레이블 또는 접근 가능한 이름)을 제공하라는 뜻입니다.

정리: 모든 버튼에 기능·목적을 텍스트로 제공하라. 이게 CP-272입니다.

2. 왜 텍스트 설명이 필요한가

버튼은 — 사용자가 누르면 동작이 실행되는 요소입니다. 사용자가 ’이 버튼이 무슨 기능인지’를 알아야 누르죠. 이 기능·목적을 전하는 가장 확실한 수단이 텍스트입니다. 버튼이 아이콘만 있으면 두 가지 문제가 생깁니다.

① 아이콘만의 의미 모호성. 아이콘은 — 시각적으로 빠르게 인지되지만 의미가 모호한 경우가 많습니다(이미지 CP-202, 탭 바 아이콘+레이블 CP-138에서 본 문제). 보편적 아이콘(돋보기=검색, X=닫기)도 있지만, 상당수는 해석이 갈리죠 — 하트(좋아요/즐겨찾기/건강), 별(즐겨찾기/평점), 톱니바퀴(설정/도구) 등. 아이콘만 있으면 사용자는 ‘이 버튼이 무슨 기능이지?’ 추측해야 합니다.

② 접근성 스크린 리더가 못 읽음. 더 결정적입니다. 아이콘은 시각 그래픽(폰트 아이콘·SVG·이미지)이라 스크린 리더가 읽을 텍스트가 없죠. 아이콘만의 버튼을 스크린 리더가 만나면 “버튼”이라고만 읽거나, 최악의 경우 파일명을 읽어, 비시각 사용자는 그 버튼이 무슨 기능인지 전혀 모릅니다(이미지 CP-205, 페이지네이션 아이콘 버튼 CP-130 정신).

그래서 CP-272는 — 모든 버튼에 기능·목적을 텍스트로 제공하라고 합니다. 방법:

보이는 텍스트 레이블 (가장 좋음) — 버튼에 텍스트를 표시. “검색”, “삭제”, “저장” 등. 시각·색맹·스크린 리더 모든 사용자가 의미를 얻죠. 아이콘+텍스트 병행도 좋습니다(탭 바 CP-138처럼).

접근 가능한 이름 (아이콘만일 때) — 디자인상 아이콘만 보여야 하면 — aria-label이나 시각적으로 숨긴 텍스트(sr-only)로 기능을 제공. <button aria-label="검색">🔍</button> 식으로요. 화면엔 아이콘만, 스크린 리더엔 “검색, 버튼”으로 전달되죠. (페이지네이션 아이콘 버튼 CP-130 방식.)

핵심 ‘모든 버튼’. 규칙은 ’모든 버튼’을 강조합니다. 텍스트 버튼은 자연히 충족되지만 아이콘만의 버튼이 빠지기 쉽죠. 검색·닫기·메뉴(햄버거)·더보기(⋯) 같은 아이콘 버튼들이 접근 가능한 이름 없이 방치되는 경우가 흔합니다. 이들에 빠짐없이 텍스트 설명을 줘야 하죠.

다음 편과의 관계. 한 가지 — 텍스트 레이블이 이미 있는 아이콘 버튼(아이콘+텍스트)이면, 그 아이콘에 별도 대체 텍스트를 또 주면 중복입니다. 이는 다음 편 CP-273에서 다루죠 — ‘텍스트 레이블이 있는 아이콘 버튼엔 (아이콘) 대체 텍스트를 제공하지 마라’(중복 방지). 즉:

아이콘만 → 접근 가능한 이름(aria-label) 제공(CP-272).

아이콘+텍스트 → 텍스트가 이름이 되고, 아이콘은 장식이라 aria-hidden(CP-273, 중복 방지).

CP-272(설명 제공)와 CP-273(중복 배제)이 함께 — 버튼이 텍스트 설명을 갖되 중복 없이 하죠.

이 규칙은 버튼 레이블 명확성 묶음(CP-270 동사형, CP-272 텍스트 설명, CP-274 접근 가능한 이름)의 하나입니다. 함께 버튼이 모든 사용자에게 기능을 명확히 전하게 하죠.

정리하면 — 아이콘만으론 의미가 모호하고 스크린 리더가 못 읽으므로, 모든 버튼에 기능·목적을 텍스트(보이는 레이블 또는 접근 가능한 이름)로 제공해 모든 사용자가 버튼 기능을 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

텍스트 설명 — 모든 버튼에 기능 텍스트(보이는 레이블 또는 접근 가능한 이름)가 있는가.

아이콘 버튼 — 아이콘만의 버튼에 aria-label·sr-only 등 이름이 있는가.

스크린 리더 — 스크린 리더가 각 버튼의 기능을 읽는가(빈 버튼·파일명 아님).

개선 방향

가능하면 보이는 텍스트 레이블(아이콘+텍스트). 아이콘만이면 aria-label·sr-only로 이름 제공.

모든 버튼(특히 검색·닫기·메뉴·더보기 아이콘 버튼) 점검.

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

역할	책임
퍼블리셔/개발	버튼 텍스트 레이블·aria-label 제공
접근성 담당	버튼 기능 낭독 검증

기관 유형	CP-272 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (버튼 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 버튼에 기능 텍스트(보이는 레이블 또는 접근 가능한 이름)가 있나요?

□ 아이콘만의 버튼에 aria-label·sr-only 등 이름이 있나요?

□ 스크린 리더가 각 버튼의 기능을 읽나요(빈 버튼·파일명 아님)?

❓ FAQ

Q1. 아이콘만으로 깔끔하게 하면 안 되나요? 아이콘은 의미가 모호하고 스크린 리더가 못 읽습니다. 최소한 aria-label로 기능을 제공해야 하죠. Q2. 아이콘+텍스트면 아이콘에도 대체 텍스트를 주나요? 아닙니다. 텍스트가 이름이 되고 아이콘은 장식이라 aria-hidden으로 숨깁니다(중복 방지, CP-273). Q3. 어떤 버튼이 빠지기 쉽나요? 검색·닫기·햄버거·더보기 같은 아이콘만의 버튼이 접근 가능한 이름 없이 방치 되기 쉽습니다.

6. 마무리

CP-272의 메시지:

아이콘만으론 안 된다 — 모든 버튼에 기능·목적을 텍스트로 제공하라.

아이콘만의 버튼은 의미가 모호하고 스크린 리더가 못 읽습니다. 보이는 텍스트 레이블이 가장 좋고, 아이콘만이면 aria-label로 기능을 제공하죠. 모든 버튼(특히 아이콘 버튼)을 점검합니다. 다음 편은 텍스트 레이블 있는 아이콘 버튼의 중복 방지입니다.

다음 편 예고 ▶ 「393. (CP-273) 기능을 설명할 수 있는 텍스트 레이블이 있는 아이콘 버튼에 대체 텍스트를 제공하지 않고 있다.」

ViewCheck는 모든 버튼에 기능·목적 텍스트 설명이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 버튼(Button) 가이드 — https://www.krds.go.kr/html/site/component/component_25.html

WCAG 2.1 SC 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

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

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