지금 어느 탭인지 귀로도

KRDS CP-143 — 활성화된 메뉴 정보가 스크린 리더로 전달될 수 있도록 제공하고 있다.

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

이번 263편은 탭 바 그룹(CP-134~143, 10개)의 마지막 규칙입니다. 활성화된(선택된) 메뉴 정보를 스크린 리더로 전달하라는 내용이죠.

CP-135에서 선택된 탭을 아이콘 형태·인디케이터로 ‘시각적으로’ 구분했습니다. 그런데 그 시각 단서는 스크린 리더 사용자에게 전달되지 않죠. 비시각 사용자도 ‘지금 어느 탭(화면)에 있는지’ 알려면 — aria-current 같은 ARIA로 ’현재 활성’임을 전달해야 합니다. CP-143은 이를 규정하며 탭 바 10개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 활성 메뉴 정보 SR 전달

CP-143 (컴포넌트 > 탭 바) “활성화된 메뉴 정보가 스크린 리더로 전달될 수 있도록 제공하고 있다.”

현재 선택된(활성) 탭이 어느 것인지를, 시각 강조뿐 아니라 aria-current 등으로 보조기술에도 전달해 스크린 리더 사용자가 현재 위치를 인지하게 하라는 뜻입니다.

정리: 활성 탭 정보를 aria-current로 스크린 리더에 전달하라. 이게 CP-143입니다.

2. 왜 활성 메뉴를 보조기술에 전달하나

탭 바는 ‘지금 어느 화면에 있는지’를 표시하는 위치 지표입니다(CP-135). 시각 사용자는 활성 탭의 채워진 아이콘· 인디케이터·색 강조를 보고 현재 위치를 알죠. 하지만 이 모든 단서는 시각적이라, 스크린 리더 사용자에게는 전달되지 않습니다. 활성 탭과 비활성 탭이 코드상 똑같이 <a>로만 돼 있으면 — 스크린 리더는 둘을 구별 없이 읽어, 비시각 사용자는 ’내가 지금 어느 탭에 있는지’ 전혀 모릅니다.

이 격차를 메우는 것이 WAI-ARIA의 aria-current 속성입니다(사이드 메뉴 CP-100·101, 페이지네이션 CP-126 에서 본 동일 메커니즘). 활성 탭에 aria-current를 부여하면, 스크린 리더가 그 탭을 읽을 때 “현재 페이지” 같은 정보를 함께 낭독하죠. 시각 사용자가 강조로 얻는 ’현재’라는 정보를, 비시각 사용자는 이 속성의 낭독으로 동등하게 얻습니다.

값은 무엇으로? 탭 바는 보통 서로 다른 화면(페이지)으로 이동하는 내비게이션이므로(CP-142), 활성 탭은 ’현재 페이지’에 해당합니다. 따라서 aria-current="page" 가 적절하죠 — 스크린 리더가 “현재 페이지, 홈, 링크”처럼 읽어 ’지금 홈 화면에 있구나’를 명확히 전달합니다. (만약 탭 바가 같은 화면 안 콘텐츠를 전환하는 탭 위젯이라면 aria-selected를 쓰지만, 화면 이동 탭 바는 내비게이션이라 aria-current가 맞습니다 — CP-142의 패턴 구분과 연결.)

시각 + ARIA 둘 다. 핵심은 CP-135(시각 선택 구분)와 CP-143(ARIA 전달)을 함께 갖춰야 한다는 점입니다. 시각 강조만 있으면 비시각 사용자가, ARIA만 있으면 시각 사용자가 각각 놓치죠. 실무에서는 활성 탭에 aria- current="page"를 부여하고, CSS [aria-current="page"] 선택자로 시각 강조(채움 아이콘·인디케이터·색)를 걸면 — 속성 하나로 시각과 보조기술 표시가 동기화됩니다. ‘강조됐는데 aria-current가 없는’ 또는 그 반대의 불일치가 구조적으로 예방되죠.

상태 갱신. 사용자가 다른 탭으로 이동하면 활성 탭이 바뀌므로, aria-current도 새 탭으로 옮겨가야 합니다. 이전 활성 탭에서는 제거하고(또는 false), 새 활성 탭에 부여하죠. SPA(단일 페이지 앱)에서 라우팅으로 화면이 바뀔 때도 이 갱신이 필요합니다 — 화면은 바뀌었는데 aria-current가 옛 탭에 남아 있으면 스크린 리더가 잘못된 현재를 알리니까요.

이로써 탭 바 10개 규칙(CP-134~143)이 완성됩니다 — 균등 배치(134)·선택 구분(135)·색 일관(136)·개수(137)· 아이콘+레이블(138)·짧은 레이블(139)·양 끝 배치(140)·하단 고정(141)·역할 인지(142)·활성 전달(143)까지. 시각· 물리·접근성 모든 측면에서 탭 바를 모든 사용자가 쓰게 하는 규칙들이죠. CP-135(시각)와 CP-143(보조기술)이 현재 표시를 양 채널로 완성합니다.

3. 점검 / 개선

무엇을 점검하나

aria-current 부여 — 활성 탭에 aria-current="page"가 있는가.

시각+ARIA 동반 — 시각 선택 구분(CP-135)과 ARIA가 함께 적용됐는가.

상태 갱신 — 탭 이동 시 aria-current가 새 탭으로 옮겨가는가.

낭독 확인 — 스크린 리더가 활성 탭에서 “현재 페이지”를 읽는가.

개선 방향

<a href="/" aria-current="page">홈</a> <!-- 활성 --> <a href="/search">검색</a> <!-- 비활성: 속성 없음 -->

CSS [aria-current="page"]로 시각 강조 묶기. 라우팅 시 속성 갱신.

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

역할	책임
퍼블리셔/개발	활성 탭 aria-current 부여·갱신·CSS 연동
접근성 담당	현재 탭 낭독 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 활성 탭에 aria-current="page" 가 있나요?

□ 시각 선택 구분(CP-135)과 ARIA가 함께 적용됐나요?

□ 탭 이동 시 aria-current가 새 탭으로 옮겨가나요?

□ 스크린 리더가 활성 탭에서 “현재 페이지”를 읽나요?

❓ FAQ

Q1. 시각 강조(CP-135)만으론 안 되나요? 시각 단서는 스크린 리더에 전달되지 않습니다. aria-current가 별도로 필요합니다. Q2. page인가 selected인가요? 화면 이동 탭 바는 내비게이션이라 aria-current="page"입니다. aria-selected는 같은 화면 내 탭 위젯용입니다. Q3. SPA에서 화면이 바뀌면요? 라우팅에 맞춰 aria-current를 새 활성 탭으로 갱신해야 합니다.

6. 마무리

CP-143의 메시지:

지금 어느 탭인지 귀로도 — 활성 메뉴를 aria-current로 스크린 리더에 전달하라.

탭 바의 시각적 선택 구분(CP-135)은 비시각 사용자에게 전달되지 않습니다. 활성 탭에 aria-current="page"를 부여하면 스크린 리더가 “현재 페이지”를 낭독해 위치를 알리죠. 시각과 ARIA를 둘 다 갖추고 이동 시 갱신해야 합니다. 이로써 탭 바 10개 규칙(CP-134~143)을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 구조화 목록 (Structured list) 으로 넘어갑니다.

다음 편 예고 ▶ 「264. (CP-144) 구조화 목록 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 탭 바의 활성 메뉴 정보가 aria-current로 보조기술에 전달되는지를 진단합니다.

📚 참고 출처

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

MDN — aria-current — https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

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

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