페이지네이션도 내비게이션이다

KRDS CP-124 — 컨테이너가 내비게이션 섹션임을 스크린 리더에서 인지할 수 있도록 구현하고 있다.

0. 들어가며 — 숫자 묶음이 아니라 ‘페이지 이동 영역’

이번 244편은 페이지네이션 컨테이너가 ’내비게이션 섹션’임을 스크린 리더가 인지하게 하라는 규칙입니다.

시각 사용자는 목록 하단의 숫자 묶음을 보고 ‘아, 페이지 이동이구나’ 합니다. 그런데 스크린 리더 사용자에게는 그 시각 단서가 없죠. 컨테이너가 <nav> 같은 시맨틱 구획으로 표시돼 있지 않으면, 스크린 리더는 이 영역을 그냥 ’숫자 링크 여러 개’로만 읽어 — 페이지 내비게이션임을 알 수 없습니다. CP-124는 이 영역에 내비게이션 정체성을 부여합니다. 사이드 메뉴(CP-098)·브레드크럼(CP-085)과 같은 원리죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — nav 섹션 인지

CP-124 (컴포넌트 > 페이지네이션) “컨테이너가 내비게이션 섹션임을 스크린 리더에서 인지할 수 있도록 구현하고 있다.”

페이지네이션을 감싸는 컨테이너를 <nav>(또는 role="navigation")로 마크업하고 고유 이름(aria-label)을 주어, 보조기술이 이 영역을 ’페이지 내비게이션’으로 인지·탐색하게 하라는 뜻입니다.

정리: 페이지네이션 컨테이너를 <nav aria-label="페이지네이션">으로 감싸 내비게이션임을 알려라. 이게 CP-124입니다.

2. 왜 nav 구획으로 인지시키나

이 규칙은 사이드 메뉴 CP-098, 브레드크럼 CP-085에서 본 것과 같은 줄기입니다. 스크린 리더 사용자는 페이지를 위→아래로만 읽지 않고 구획(landmark) 단위로 점프하며 탐색하죠 — “내비게이션으로”, “메인 콘텐츠로”. 이 점프가 가능하려면 각 영역이 시맨틱 구획 태그로 표시돼야 합니다.

페이지네이션 컨테이너를 <div>로만 만들면 — 스크린 리더의 구획 목록에 안 잡힙니다. 그러면 비시각 사용자는 페이지네이션을 ‘찾아서’ 갈 수단이 없죠. 긴 목록을 다 듣고 나서야 우연히 마주치거나, 거기 도달하지 못한 채 지나칩니다. 페이지 이동이라는 핵심 기능에 빠르게 접근할 길이 막힌 셈입니다.

그래서 페이지네이션 컨테이너를 <nav>로 감쌉니다. <nav>는 ’주요 내비게이션 영역’을 뜻하는 시맨틱 구획이라, 스크린 리더가 이를 navigation landmark로 인식해 구획 목록에 올리죠. 사용자는 단축키로 내비게이션 구획들을 훑어 페이지네이션으로 바로 점프합니다.

고유 이름(aria-label)이 중요한 이유. 페이지엔 보통 <nav>가 여럿입니다 — 메인 메뉴, 사이드 메뉴, 브레드 크럼, 그리고 페이지네이션까지. 모두 “내비게이션”으로만 읽히면 구분이 안 되죠. 그래서 페이지네이션 <nav>에 aria-label="페이지네이션"(또는 “페이지 탐색”, “페이지 이동”)을 부여해, 스크린 리더가 “페이지네이션, 내비 게이션”으로 읽게 합니다. 사용자는 이 영역이 페이지 이동임을 즉시 알죠. WAI-ARIA APG에서도 페이지네이션을 <nav aria-label="Pagination">으로 감싸는 패턴을 권장합니다.

이렇게 구획과 이름을 갖추면, CP-124는 페이지네이션 접근성의 토대를 놓습니다. 그 위에 이어지는 규칙들이 쌓이죠 — CP-125가 숫자 링크를 <ul>/<li>로 마크업해 ’개수·구조’를 전달하고(사이드 메뉴 CP-099와 같은 원리), CP-126이 현재 페이지를 aria-current로, CP-128~130이 각 링크·버튼에 접근 가능한 이름을 부여합니다. CP-124의 ’구획 + 이름’이 그 모든 것을 담는 그릇인 셈입니다.

정리하면 — 페이지네이션도 엄연한 내비게이션이므로, 컨테이너를 <nav> + aria-label로 표시해 스크린 리더 사용자가 인지·탐색하게 해야 합니다. 시각 사용자가 숫자 묶음의 위치·모양으로 ’페이지 이동’임을 알듯, 비시각 사용자는 구획과 이름으로 같은 의미를 얻죠.

3. 점검 / 개선

무엇을 점검하나

<nav> 컨테이너 — 페이지네이션이 <nav>(또는 role="navigation")로 감싸였는가.

aria-label — 그 <nav>에 ‘페이지네이션’ 등 고유 이름이 있는가.

구획 인지 — 스크린 리더 구획 목록에 페이지 내비게이션으로 잡히는가.

개선 방향

<nav aria-label="페이지네이션"> <ul> … </ul> <!-- CP-125 --> </nav>

페이지에 nav가 여럿이면 각각 고유 aria-label로 구분.

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

역할	책임
퍼블리셔/개발	<nav> 구획·aria-label 마크업
접근성 담당	스크린 리더 구획 탐색 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 페이지네이션이 <nav> 로 감싸였나요?

□ 그 <nav>에 aria-label="페이지네이션" 등 이름이 있나요?

□ 스크린 리더 구획 목록에 페이지 내비게이션으로 잡히나요?

❓ FAQ

Q1. <div>로 만들면 안 되나요? 시각적으론 페이지네이션으로 보여도 스크린 리더는 내비게이션임을 모릅니다. <nav> 구획이 필요합니다. Q2. 페이지에 nav가 여러 개인데요? 각 nav에 고유 aria-label을 주면 구분됩니다(메인 메뉴/사이드/브레드 크럼/페이지네이션). Q3. CP-085·098과 같은 건가요? 같은 원리입니다. 브레드크럼·사이드 메뉴·페이지네이션 모두 각자 <nav> + 이름을 가집니다.

6. 마무리

CP-124의 메시지:

페이지네이션도 내비게이션이다 — 컨테이너를 <nav> + aria-label로 인지시켜라.

스크린 리더 사용자는 구획 단위로 점프합니다. 페이지네이션을 <nav>로 감싸고 ‘페이지네이션’ 이름을 주면, 비시각 사용자도 이 영역을 페이지 이동으로 인지하고 빠르게 도달하죠. 이 구획 + 이름이 이어지는 접근성 규칙들의 토대입니다. 다음 편은 숫자 링크의 <ul>/<li> 시맨틱입니다.

**다음 편 예고 ▶ 「245. (CP-125)

,

태그를 활용하여 계층 구조로 정보를 제공하고 있다.」**

ViewCheck는 페이지네이션 컨테이너가 <nav> 구획으로 보조기술에 노출되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 페이지네이션(Pagination) 가이드 — https://www.krds.go.kr/html/site/component/component_10.html

WAI-ARIA APG — Pagination — https://www.w3.org/WAI/ARIA/apg/patterns/

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

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