이건 탭이고 저건 그 패널이다

KRDS CP-237 — 탭과 패널의 역할 및 관계를 스크린 리더로 확인할 수 있도록 하고 있다.

0. 들어가며 — 탭 그룹의 마지막

이번 357편은 탭 그룹(CP-227~237, 11개)의 마지막 규칙입니다. 탭과 패널의 역할 및 관계를 스크린 리더로 확인할 수 있게 하라는 내용이죠.

시각 사용자는 탭 줄과 패널의 배치(CP-227·228)·배경색(CP-230)으로 ’이건 탭, 저건 그 콘텐츠’를 봅니다. 그런데 스크린 리더 사용자에게는 이 시각 구조가 안 보이죠. WAI-ARIA의 탭 역할·관계 마크업이 있어야 비시각 사용자도 탭 위젯을 인지합니다. CP-237은 이 ARIA 구조를 규정하며 탭 11개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 탭-패널 역할·관계 SR 확인

CP-237 (컴포넌트 > 탭) “탭과 패널의 역할 및 관계를 스크린 리더로 확인할 수 있도록 하고 있다.”

탭 위젯을 WAI-ARIA 역할(tablist/tab/tabpanel)과 관계 속성으로 마크업해, 보조기술이 ’탭 목록·각 탭·각 패널’의 역할과 탭-패널 연결을 인지하게 하라는 뜻입니다.

정리: 탭 위젯을 WAI-ARIA 역할·관계로 마크업해 스크린 리더가 구조를 인지하게 하라. 이게 CP-237입니다.

2. 왜 역할·관계를 ARIA로 전달하나

탭 위젯은 시각적으로 — 탭 줄(여러 탭)과 패널(선택된 탭의 콘텐츠)로 구성됩니다. 시각 사용자는 배치·배경색·선택 표시로 ’이건 탭들이고, 이건 그중 선택된 탭의 콘텐츠’라는 구조를 한눈에 파악하죠. 하지만 스크린 리더 사용자 에게는 이 시각 구조가 통째로 안 보입니다. 그냥 <div>들로 만든 탭은 — 스크린 리더에게 ’버튼 몇 개와 텍스트 덩어리’로만 읽혀, 탭 위젯임을 모르죠.

그래서 WAI-ARIA 탭 패턴으로 역할과 관계를 명시해야 합니다. 표준 구조:

<div role="tablist" aria-label="○○ 정보"> <button role="tab" id="tab1" aria-selected="true" aria-controls="panel1">기본정보</button> <button role="tab" id="tab2" aria-selected="false" aria-controls="panel2">상세정보</button> </div> <div role="tabpanel" id="panel1" aria-labelledby="tab1">…기본정보 콘텐츠…</div> <div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>…상세정보 콘텐츠…</div>

역할(role) — ‘무엇인지’:

role="tablist" — 탭들을 감싼 컨테이너. 스크린 리더가 “탭 목록”으로 인지하고, 그 안에 탭이 몇 개인지 안내하죠.

role="tab" — 각 탭. “탭”으로 읽히고, 선택 상태(aria-selected)와 함께 안내됩니다.

role="tabpanel" — 각 패널(콘텐츠 영역). “탭 패널”로 인지되죠.

이 역할들이 — 스크린 리더 사용자에게 ’여기는 탭 위젯이고, 이건 탭 목록, 이건 탭, 이건 패널’이라는 구조를 전합 니다. 그냥 버튼 나열이 아니라 ’탭 위젯’임을 알죠.

관계 — ‘어느 탭이 어느 패널인지’:

aria-controls(탭→패널) — 각 탭이 자신이 제어하는 패널을 가리킴. “이 탭을 누르면 이 패널이 보인다”는 관계.

aria-labelledby(패널→탭) — 각 패널이 자신의 탭을 가리킴. “이 패널은 이 탭에 속한다”는 관계.

aria-selected — 현재 선택된 탭 표시(CP-234).

이 관계 속성들이 — 시각 사용자가 배경색(CP-230)·배치로 보는 ’이 탭의 내용이 이것’이라는 관계를, 비시각 사용자 에게 코드로 전달하죠. 스크린 리더 사용자가 탭을 선택하면 그 패널로 이동하고, 패널에서 ’어느 탭의 콘텐츠’인지 인지합니다.

숨은 패널 처리. 선택 안 된 탭의 패널은 hidden(또는 display:none)으로 숨겨, 스크린 리더·키보드에서 제외합니다(캐러셀 CP-225, 사이드 메뉴 CP-105 정신). 보이는 패널만 접근 가능하게요.

이 규칙의 난이도가 높은(★★★★) 이유는 — 역할·관계 속성을 정확히 연결하고, 선택 변경 시 aria-selected·hidden 을 동적으로 갱신하며, 키보드 패턴(CP-235)과 통합해야 하기 때문입니다. WAI-ARIA 위젯 구현은 세심함이 필요하죠.

이로써 탭 11개 규칙(CP-227~237)이 완성됩니다 — 배치(227·228), 용도(229), 관계 표현(230), 중첩 구분(231), 배치 원칙(232·233), 선택 상태(234), 키보드(235·236), ARIA 구조(237)까지. 시각·키보드·스크린 리더 모든 측면 에서 탭 위젯을 제대로 만드는 규칙들이죠. CP-230(시각 관계)·CP-234(선택 전달)·CP-237(ARIA 구조)이 함께 탭- 패널 관계를 모든 사용자에게 전합니다.

정리하면 — 탭 위젯은 tablist/tab/tabpanel 역할과 aria-controls/aria-labelledby/aria-selected 관계로 마크업해, 스크린 리더 사용자가 시각 사용자와 동등하게 탭 구조와 관계를 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

역할 마크업 — role="tablist"/tab/tabpanel이 부여됐는가.

관계 속성 — aria-controls(탭→패널)·aria-labelledby(패널→탭)·aria-selected가 연결됐는가.

숨은 패널·갱신 — 비선택 패널이 hidden이고, 선택 변경 시 상태가 갱신되는가.

개선 방향

WAI-ARIA 탭 패턴 적용: tablist/tab/tabpanel + aria-controls/aria-labelledby/aria-selected.

비선택 패널 hidden. 선택 변경 시 ARIA·hidden 동적 갱신. 키보드(CP-235) 통합.

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

역할	책임
퍼블리셔/개발	WAI-ARIA 탭 역할·관계·갱신 구현
접근성 담당	스크린 리더 탭 구조·관계 인지 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ role="tablist"/tab/tabpanel이 부여됐나요?

□ aria-controls·aria-labelledby·aria-selected가 연결됐나요?

□ 비선택 패널이 hidden이고, 선택 변경 시 상태가 갱신되나요?

❓ FAQ

Q1. <div>로 만들고 CSS만 잘 하면 안 되나요? 시각적으론 탭처럼 보여도 스크린 리더는 탭 위젯임을 모릅니다. ARIA 역할·관계가 필요하죠. Q2. 관계 속성이 왜 둘(controls/labelledby)인가요? aria-controls는 탭→패널(이 탭이 이 패널을 제어), aria-labelledby는 패널→탭(이 패널은 이 탭의 것)으로 양방향 관계를 전합니다. Q3. 왜 난이도가 높나요? 역할·관계를 정확히 연결하고 선택 변경 시 동적 갱신하며 키보드와 통합해야 해서, WAI-ARIA 위젯 구현은 세심함이 필요합니다.

6. 마무리

CP-237의 메시지:

이건 탭이고 저건 그 패널이다 — 탭-패널 역할·관계를 WAI-ARIA로 전달하라.

시각 사용자가 배치·배경색으로 보는 탭 구조와 관계를, 스크린 리더 사용자에게는 tablist/tab/tabpanel 역할과 aria-controls/aria-labelledby/aria-selected 관계로 전달하죠. 이로써 탭 11개(CP-227~237)를 마칩 니다. 다음 편부터는 새 컴포넌트 그룹 표(Table) 로 넘어갑니다.

다음 편 예고 ▶ 「358. (CP-238) 표 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 탭-패널의 역할·관계가 WAI-ARIA로 스크린 리더에 전달되는지를 진단합니다.

📚 참고 출처

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컴포넌트,웹표준