어느 탭이 선택됐는지 모두에게

KRDS CP-234 — 탭의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하고, 스크린 리더로 확인할 수 있도록 하고 있다.

0. 들어가며 — 지금 어느 탭이 켜져 있는지

이번 354편은 탭 선택 상태를 색상 이외 시각 단서로 구분하고, 스크린 리더로도 확인하게 하라는 규칙입니다.

탭 위젯에서 ’지금 어느 탭이 선택됐는지’는 핵심 정보입니다. 그런데 이를 색만으로 표시하면 — 색맹 사용자가 구별 못 하고, 스크린 리더 사용자에게는 아예 전달 안 되죠. CP-234는 선택 상태를 색 외 단서(밑줄·굵기 등)로 표시하고 aria-selected로 보조기술에도 전달하라고 규정합니다. 배지 CP-186·190, 탭 바 CP-135·143 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 색 외 단서 + 스크린 리더 확인

CP-234 (컴포넌트 > 탭) “탭의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하고, 스크린 리더로 확인할 수 있도록 하고 있다.”

선택된 탭을 색뿐 아니라 밑줄·굵기 등 색 외 시각 단서로 구분하고, aria-selected 등으로 스크린 리더에도 선택 상태를 전달하라는 뜻입니다.

정리: 탭 선택 상태를 색 외 단서 + 스크린 리더로 전달하라. 이게 CP-234입니다.

2. 왜 색 외 단서와 스크린 리더 전달이 필요한가

탭 위젯의 핵심은 ’여러 탭 중 현재 선택된 탭과 그 콘텐츠’입니다. 사용자가 ’지금 어느 탭이 켜져 있는지’를 알아야 자기가 보는 콘텐츠가 어느 탭 것인지, 다음에 어느 탭을 누를지 판단하죠. 이 선택 상태는 모든 사용자에게 전달돼야 합니다. 두 가지 색 외 단서, 스크린 리더 전달.

① 색 외 시각 단서. 선택된 탭을 색만으로 표시하면(예: 선택 탭만 파란 글씨) — 색을 구별하기 어려운 사용자(색각 이상, 흑백 환경, 저시력)는 어느 탭이 선택됐는지 모릅니다. 이는 ‘색에 무관한 인식’(KWCAG, WCAG SC 1.4.1) 위반이죠(배지 CP-186, 달력 CP-165에서 반복). 그래서 색에 더해 색 외 단서로 선택을 표시해야 합니다:

밑줄/강조선(active indicator) — 선택된 탭 아래(또는 옆)에 강조선을 둬, 색을 못 봐도 선이 있는 탭이 선택됨을 알림. 가장 흔합니다.

굵기(bold) — 선택 탭 레이블을 굵게.

배경/형태 — 선택 탭에 배경색 채움(CP-230의 패널과 같은 배경)·테두리 등 형태 차이.

위치 변화 — 폴더 탭처럼 선택 탭이 살짝 튀어나오거나 패널과 이어지는 형태.

보통 여러 단서를 겹쳐(밑줄 + 굵기 + 색) 선택을 명확히 하죠. 핵심은 — 색을 빼고 봐도 어느 탭이 선택됐는지 구별되는 것입니다.

② 스크린 리더 전달. 시각 단서(색·밑줄·굵기)는 모두 시각적이라 스크린 리더 사용자에게는 전달되지 않죠. 그들에게도 ’어느 탭이 선택됐는지’를 알리려면 — aria-selected 속성이 필요합니다. WAI-ARIA 탭 패턴에서:

선택된 탭에 aria-selected="true", 나머지에 aria-selected="false" 를 부여.

스크린 리더가 선택된 탭을 읽을 때 “선택됨(selected)”을 함께 낭독해, 사용자가 현재 선택을 인지하죠.

이는 탭 바 활성 표시(CP-143)가 화면 이동 탭이라 aria-current를 쓴 것과 달리, 같은 화면 내 콘텐츠 전환 탭 위젯이라 aria-selected 를 씁니다(CP-142·143에서 구분한 패턴 차이). 탭 위젯은 role="tab" + aria- selected, role="tabpanel" 구조죠(CP-237에서 상세).

시각 + ARIA 함께. 핵심은 — 색 외 시각 단서(색맹 배려)와 aria-selected(전맹 배려)를 둘 다 갖추는 것입니다. 시각 단서만 있으면 스크린 리더 사용자가, ARIA만 있으면 시각 사용자가 각각 놓치죠. 실무에서는 [aria-selected="true"] CSS 선택자로 시각 강조(밑줄·굵기)를 걸면, 속성 하나로 시각·보조기술 표시가 동기화 됩니다(탭 바 CP-143, 페이지네이션 CP-126 정신).

이 규칙은 탭 접근성 묶음의 핵심입니다 — 선택 상태를 색 외 단서·ARIA로 전달(234), 키보드 탐색(235), 초점 표시 (236), 역할·관계 ARIA(237). 함께 탭 위젯을 모든 사용자가 쓰게 하죠.

정리하면 — 탭 선택 상태는 색맹·전맹 모두에게 전달돼야 하므로, 색 외 시각 단서(밑줄·굵기)와 aria-selected를 함께 제공해 ’어느 탭이 선택됐는지’를 모든 사용자가 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

색 외 단서 — 선택 탭이 색뿐 아니라 밑줄·굵기 등으로 구분되는가(회색조로 봐도 구별).

aria-selected — 선택 탭에 aria-selected="true", 나머지 false가 부여됐는가.

낭독 확인 — 스크린 리더가 선택 탭에서 “선택됨”을 읽는가.

개선 방향

선택 탭에 밑줄/강조선·굵기·배경 등 색 외 단서 부여(색만 의존 금지).

aria-selected 부여·갱신. [aria-selected="true"] CSS로 시각·ARIA 동기화.

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

역할	책임
디자이너	선택 상태 색 외 단서 정의
퍼블리셔/개발	단서·aria-selected 구현·동기화

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택 탭이 색뿐 아니라 밑줄·굵기 등으로 구분되나요(회색조로 봐도 구별)?

□ 선택 탭에 aria-selected="true", 나머지 false가 부여됐나요?

□ 스크린 리더가 선택 탭에서 “선택됨”을 읽나요?

❓ FAQ

Q1. 선택 탭만 색을 바꾸면 안 되나요? 색만으론 색맹 사용자가 구별 못 합니다. 밑줄·굵기 등 색 외 단서를 함께 씁니다. Q2. aria-current인가 aria-selected인가요? 같은 화면 콘텐츠 전환 탭 위젯은 aria-selected입니다. aria-current는 화면 이동 탭 바(CP-143)용이죠. Q3. 스크린 리더에 어떻게 전달되나요? aria-selected="true"면 “선택됨”을 함께 낭독합니다.

6. 마무리

CP-234의 메시지:

어느 탭이 선택됐는지 모두에게 — 색 외 단서 + aria-selected로 선택 상태를 전달하라.

탭 선택 상태를 색만으로 표시하면 색맹·스크린 리더 사용자가 놓칩니다. 밑줄·굵기 등 색 외 단서(색맹)와 aria-selected(전맹)를 함께 제공해 ’어느 탭이 켜졌는지’를 모두에게 전하죠. 다음 편은 탭의 키보드 탐색·실행 입니다.

다음 편 예고 ▶ 「355. (CP-235) 탭을 키보드로 탐색하고 실행할 수 있도록 하고 있다.」

ViewCheck는 탭 선택 상태가 색 외 단서·스크린 리더로 전달되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭(Tab) 가이드 — https://www.krds.go.kr/html/site/component/component_21.html

WAI-ARIA APG — Tabs Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

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

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