이 영역은 주요 내비게이션이다

KRDS CP-142 — 탭바의 역할을 스크린 리더에서 인지할 수 있도록 제공하고 있다.

0. 들어가며 — 하단 아이콘 묶음이 무엇인지

이번 262편은 탭 바의 역할을 스크린 리더가 인지하게 하라는 규칙입니다.

시각 사용자는 화면 하단의 아이콘+레이블 묶음을 보고 ‘주요 내비게이션이구나’ 합니다. 그런데 스크린 리더 사용 자에게는 그 시각·위치 단서가 없죠. 탭 바가 <nav> 같은 시맨틱 구획으로 표시돼 있지 않으면, 스크린 리더는 이를 그냥 ’링크/버튼 몇 개’로만 읽어 — 주요 내비게이션임을 알 수 없습니다. CP-142는 탭 바에 내비게이션 역할을 부여합니다. 브레드크럼 CP-085, 사이드 메뉴 CP-098, 페이지네이션 CP-124와 같은 원리죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 탭 바 역할 인지

CP-142 (컴포넌트 > 탭 바) “탭바의 역할을 스크린 리더에서 인지할 수 있도록 제공하고 있다.”

탭 바를 <nav>(또는 적절한 role)로 마크업하고 고유 이름을 주어, 보조기술이 이 영역을 ’주요 내비게이션(탭 바)’으로 인지·탐색하게 하라는 뜻입니다.

정리: 탭 바를 <nav> + 이름으로 마크업해 내비게이션 역할을 스크린 리더에 알려라. 이게 CP-142입니다.

2. 왜 탭 바 역할을 인지시키나

이 규칙은 앞서 여러 내비게이션 컴포넌트에서 반복된 ’구획 인지’의 탭 바 버전입니다. 스크린 리더 사용자는 페이지를 위→아래로만 읽지 않고 구획(landmark) 단위로 점프하며 탐색하죠 — “내비게이션으로”, “메인으로”. 탭 바가 시맨틱 구획으로 표시돼야 이 점프 목록에 잡혀, 비시각 사용자가 빠르게 도달합니다.

탭 바 컨테이너를 <div>로만 만들면 — 스크린 리더 구획 목록에 안 잡힙니다. 그러면 비시각 사용자는 주요 내비 게이션인 탭 바를 ‘찾아서’ 갈 수단이 없어, 페이지를 끝까지 훑어야 마주치거나 지나치죠. 탭 바는 사이트의 가장 중요한 내비게이션인데 그 접근이 막히는 셈입니다.

그래서 탭 바를 시맨틱하게 마크업합니다:

<nav> 구획 — 탭 바 컨테이너를 <nav>로 감싸면 스크린 리더가 navigation landmark로 인식해 구획 목록에 올립니다.

고유 이름(aria-label) — 페이지엔 보통 <nav>가 여럿이라(헤더 메뉴 등), 탭 바 <nav>에 aria-label= "주요" 또는 "하단 메뉴", "탭 바" 같은 이름을 줘 구분하죠. “주요 내비게이션, 내비게이션”처럼 읽혀 사용 자가 이 영역의 정체를 압니다.

탭 패턴 vs 내비게이션. 여기서 한 가지 구분이 필요합니다. UI에는 두 종류의 ‘탭’이 있습니다 (1) 같은 페이지 안에서 콘텐츠 패널을 전환하는 탭 위젯(WAI-ARIA의 role="tablist"/tab/tabpanel 패턴), (2) 서로 다른 화면/페이지로 이동하는 내비게이션. 모바일 하단 탭 바는 보통 (2)에 해당합니다 ’홈/검색/마이’는 각각 다른 화면으로 이동하는 링크죠. 따라서 탭 바는 tablist 위젯 패턴이 아니라 <nav> 내비게이션으로 마크업하고, 각 탭은 링크(<a>)로 두는 것이 적절합니다. (반대로 같은 화면 안 콘텐츠를 전환한다면 tablist 패턴이 맞고요 이는 뒤의 ’탭(Tabs)’ 컴포넌트 그룹에서 다룹니다.) 탭 바를 잘못 tablist로 마크업하면 스크린 리더가 ’탭 위젯’으로 오인해 안내가 어긋나죠. CP-142의 ’역할 인지’는 탭 바를 내비게이션으로 올바로 표시 하라는 뜻을 담습니다.

이렇게 <nav> + 이름으로 역할을 부여하면, CP-142는 탭 바 접근성의 토대를 놓습니다. 그 위에 다음 편 CP-143이 ’어느 탭이 활성인지(현재 화면)’를 aria-current로 전달해, 시각 사용자가 선택 상태(CP-135)로 아는 것을 비시각 사용자도 알게 하죠. 함께 탭 바를 모든 사용자가 쓰는 내비게이션으로 완성합니다.

3. 점검 / 개선

무엇을 점검하나

<nav> 구획 — 탭 바가 <nav>(또는 role=navigation)로 마크업됐는가.

고유 이름 — aria-label로 ‘주요/하단 메뉴’ 등 이름이 있는가.

올바른 패턴 — 화면 이동 탭 바를 tablist가 아닌 내비게이션(링크)으로 표시했는가.

개선 방향

<nav aria-label="주요" class="tab-bar"> <a href="/" aria-current="page">홈</a> <!-- CP-143 --> <a href="/search">검색</a> … </nav>

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

역할	책임
퍼블리셔/개발	<nav> 구획·aria-label·올바른 패턴 마크업
접근성 담당	구획 인지·역할 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탭 바가 <nav> 로 마크업됐나요?

□ aria-label로 ‘주요/하단 메뉴’ 등 이름이 있나요?

□ 화면 이동 탭 바를 tablist가 아닌 내비게이션(링크)으로 표시했나요?

❓ FAQ

Q1. 탭 바도 role="tablist"로 하나요? 화면을 이동하는 탭 바는 내비게이션이라 <nav> + 링크가 맞습니다. tablist는 같은 화면 안 콘텐츠 전환 위젯용입니다. Q2. <div>로 만들면 안 되나요? 시각적으론 탭 바로 보여도 스크린 리더는 내비게이션임을 모릅니다. <nav> 구획이 필요합니다. Q3. CP-085·098·124와 같은 건가요? 같은 원리입니다. 모든 내비게이션 컴포넌트가 각자 <nav> + 이름을 가집니다.

6. 마무리

CP-142의 메시지:

이 영역은 주요 내비게이션이다 — 탭 바를 <nav> + 이름으로 역할 인지시켜라.

스크린 리더 사용자는 구획 단위로 점프합니다. 탭 바를 <nav>로 감싸고 이름을 주면 비시각 사용자도 주요 내비 게이션으로 인지하고 빠르게 도달하죠. 화면 이동 탭 바는 tablist가 아닌 내비게이션으로 올바로 표시해야 합니다. 다음 편은 활성 탭의 보조기술 전달입니다.

다음 편 예고 ▶ 「263. (CP-143) 활성화된 메뉴 정보가 스크린 리더로 전달될 수 있도록 제공하고 있다.」

ViewCheck는 탭 바가 <nav> 구획으로 내비게이션 역할을 노출하는지를 진단합니다.

📚 참고 출처

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

WAI-ARIA — Navigation landmark — https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/

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

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