배지는 누르는 게 아니다

KRDS CP-187 — 배지를 대화형 요소로 마크업 또는 역할을 부여하거나 부적절한 속성을 적용하고 있지 않다.

0. 들어가며 — 읽는 라벨, 누르는 버튼

이번 307편은 배지를 대화형 요소로 마크업하거나 역할을 부여하거나 부적절한 속성을 적용하지 않는다는 규칙 입니다.

배지는 ‘상태를 표시하는 정적 라벨’입니다 — 읽는 정보이지, 누르는 컨트롤이 아니죠. 그런데 배지를 <button>이나 <a>, role="button" 등 대화형 요소로 만들면 — 스크린 리더가 ’버튼/링크’로 읽어 사용자가 ’눌러야 하나?’ 오해합니다. CP-187은 배지를 비대화형으로, 부적절한 속성 없이 마크업하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 대화형 마크업·역할·부적절 속성 금지

CP-187 (컴포넌트 > 배지) “배지를 대화형 요소로 마크업 또는 역할을 부여하거나 부적절한 속성을 적용하고 있지 않다.”

배지를 버튼·링크 같은 대화형 요소나 role="button" 등 상호작용 역할로 만들지 말고, 정적 상태 라벨에 맞지 않는 부적절한 ARIA 속성도 적용하지 말라는 뜻입니다.

정리: 배지를 대화형 요소·역할로 만들지 말고 부적절한 속성을 붙이지 마라. 이게 CP-187입니다.

2. 왜 비대화형이어야 하나

웹 요소의 ‘역할(role)’은 사용자에게 ’이게 무엇이고 어떻게 작동하는지’를 약속합니다. 배지의 본질은’상태를 표시하는 정적 텍스트 라벨’이죠 — 정보를 ‘읽는’ 것이지 ‘누르는’ 것이 아닙니다(CP-184). 이 본질에 맞게 마크업 해야, 사용자가 배지를 오해하지 않습니다.

대화형으로 만들면 — 오해를 부른다. 배지를 <button>, <a href>, 또는 role="button"/role="link"로 만들면:

스크린 리더 오안내 — 스크린 리더가 그 배지를 “버튼” 또는 “링크”로 읽습니다. 사용자는 ‘이걸 누르면 무슨 동작/이동이 있구나’ 기대하죠. 그런데 누를 게 없으면(그냥 상태 라벨이면) — 눌러도 아무 일이 안 일어나 혼란 스럽습니다. ‘버튼인데 작동 안 하는’ 깨진 경험이죠.

키보드 함정 — 대화형 요소로 만들면 키보드 포커스를 받습니다. 사용자가 Tab으로 배지에 초점을 두는데 (그냥 라벨인데) 실행할 동작이 없으면, ‘왜 여기 초점이 오지? 뭘 하라는 거지?’ 헷갈리죠. 정적 정보에 불필요한 초점이 가는 건 탐색을 번거롭게 합니다.

그래서 배지는 비대화형 요소로 마크업합니다 — 보통 <span>(인라인 텍스트)으로요. <span>은 역할이 없는 일반 텍스트라, 스크린 리더가 그냥 텍스트로 읽고 키보드 초점도 안 받죠. 배지의 ‘읽는 정보’ 성격에 정확히 맞습니다.

부적절한 속성도 금지. 규칙은 ’부적절한 속성’도 언급합니다 — 정적 라벨에 맞지 않는 ARIA 속성을 잘못 붙이는 경우죠. 예를 들어:

aria-pressed(토글 버튼 상태), aria-expanded(펼침 상태), aria-selected(선택 상태) 등 대화형 위젯 전용 속성을 배지에 붙이면 — 스크린 리더가 배지를 대화형 위젯으로 오인합니다. 배지는 이런 상태 속성이 필요 없죠.

tabindex="0"을 줘서 불필요하게 초점받게 만드는 것도 부적절합니다.

굳이 역할을 준다면 — 정적 상태를 보조기술에 보강하는 정도(예: 의미를 명확히 하는 aria-label이나, 맥락상 필요하면 role="status" 같은 라이브 영역)는 용도에 맞을 수 있지만, 대화형 역할은 아니어야 하죠.

예외 배지가 정말 클릭 대상이면? 드물게 ‘배지를 클릭하면 그 상태로 필터링’되는 식의 인터랙티브 배지(칩 필터 등)를 만들 수도 있습니다. 하지만 그건 엄밀히는 배지가 아니라 ’필터 칩’ 같은 다른 컴포넌트죠 그렇다면 그에 맞는 대화형 마크업(버튼)을 정확히 하면 됩니다. 핵심은 ’상태 표시 배지’라면 비대화형, ’클릭하는 컨트롤’이라면 그에 맞는 컴포넌트로 요소의 실제 역할과 마크업을 일치시키는 것입니다. 디스클로저 버튼 역할 (CP-174), 모달 닫기 버튼(CP-183)에서 본 ’역할에 맞는 마크업’의 배지 버전이죠.

정리하면 — 배지는 읽는 정적 상태 라벨이므로, <span> 같은 비대화형 요소로 마크업하고 대화형 역할·부적절한 ARIA 속성을 붙이지 않아, 사용자가 ’누르는 것’으로 오해하지 않게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

비대화형 요소 — 배지가 <span> 등 비대화형으로 마크업됐는가(<button>·<a> 아님).

대화형 역할 없음 — role="button"/"link" 등이 부여되지 않았는가.

부적절 속성 없음 — aria-pressed/aria-expanded/불필요한 tabindex 등이 없는가.

개선 방향

배지를 <span>으로 마크업. 대화형 요소·역할 제거.

정적 라벨에 맞지 않는 ARIA 속성 제거. 클릭 컨트롤이면 별도 컴포넌트(필터 칩 등)로.

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

역할	책임
퍼블리셔/개발	배지를 비대화형으로 마크업·부적절 속성 제거
접근성 담당	스크린 리더가 배지를 텍스트로 읽는지 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 배지가 <span> 등 비대화형으로 마크업됐나요(<button>·<a> 아님)?

□ role="button"/"link" 등 대화형 역할이 없나요?

□ aria-pressed/aria-expanded/불필요한 tabindex 등이 없나요?

❓ FAQ

Q1. 배지를 버튼으로 만들면 안 되나요? 배지는 읽는 상태 라벨입니다. 버튼으로 만들면 스크린 리더가 ‘버튼’으로 읽어 누르라는 줄 오해합니다. Q2. 배지를 클릭해 필터링하고 싶으면요? 그건 ’필터 칩’ 같은 다른 컴포넌트입니다. 그에 맞는 버튼 마크업을 정확히 하면 됩니다. Q3. 어떤 요소로 만드나요? 보통 <span> 인라인 텍스트로 만듭니다. 역할이 없어 텍스트로 읽히고 초점도 안 받습니다.

6. 마무리

CP-187의 메시지:

배지는 누르는 게 아니다 — 대화형 요소·역할·부적절 속성 없이 마크업하라.

배지는 읽는 정적 상태 라벨입니다. 버튼·링크나 대화형 역할로 만들면 스크린 리더·키보드 사용자가 ‘눌러야 하나’ 오해하죠. <span> 같은 비대화형으로 마크업하고 부적절한 ARIA 속성을 빼, 요소의 실제 역할과 마크업을 일치 시킵니다. 다음 편은 요소당 배지 하나 규칙입니다.

다음 편 예고 ▶ 「308. (CP-188) 하나의 요소에 한 개의 배지를 사용하고 있다.」

ViewCheck는 배지가 비대화형 요소로 적절히 마크업되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 배지(Badge) 가이드 — https://www.krds.go.kr/html/site/component/component_17.html

WAI-ARIA — Roles — https://www.w3.org/WAI/ARIA/apg/

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

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