페이지네이션 ul li계층

KRDS CP-125 — 스크린 리더 사용자가 항목 수를 빠르게 파악할 수 있도록

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

KRDS 체크리스트 항목 CP-125 · 컴포넌트 > 페이지네이션(Pagination) 〈846 규칙 완전 분해 시리즈 (245)〉 — “몇 페이지인지 귀로 세게”: ul/li 목록 마크업

0. 들어가며 — 목록으로 만들면 개수가 들린다

이번 245편은 페이지네이션을 <ul>, <li>로 마크업해 스크린 리더가 항목 수를 빠르게 파악하게 하라는 규칙입니다.

시각 사용자는 “1 2 3 4 5”를 보고 한눈에 ’5개 정도구나’를 압니다. 그런데 스크린 리더 사용자는? 페이지네이션을 <ul>/<li> 목록으로 마크업하면, 스크린 리더가 “목록, 항목 N개”라고 개수를 먼저 읽어주고 각 항목을 “N개 중 M번째”로 안내하죠. 그냥 링크를 나열하면 이 개수 정보가 안 들립니다. CP-125는 목록 시맨틱으로 개수·구조를 전달합니다. 사이드 메뉴 CP-099와 같은 원리죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — ul/li 목록 마크업

CP-125 (컴포넌트 > 페이지네이션) “스크린 리더 사용자가 항목 수를 빠르게 파악할 수 있도록 <ul>, <li> 태그를 활용하여 계층 구조로 정보를 제공하고 있다.”

페이지네이션의 링크들(이전/다음·숫자 링크)을 <ul>(목록)과 <li>(항목)로 마크업해, 보조기술이 전체 항목 수와 각 항목의 위치를 인지하게 하라는 뜻입니다.

정리: 페이지네이션을 <ul>+<li>로 마크업해 개수·구조를 스크린 리더에 전달하라. 이게 CP-125입니다.

2. 왜 ul/li로 마크업하나

스크린 리더 사용자의 강력한 탐색 수단 중 하나가 목록(list) 탐색입니다. <ul>/<ol>로 마크업된 목록을 만나면, 스크린 리더는 두 가지를 자동으로 전달하죠 — (1) “목록, 항목 N개” 처럼 전체 개수, (2) 각 항목을 “항목 3 / 7” 처럼 위치와 함께요. 페이지네이션을 이 목록 시맨틱으로 마크업하면, 비시각 사용자도 시각 사용자처럼 ’페이지 이동 항목이 몇 개고 지금 몇 번째인지’를 빠르게 파악합니다.

개수 파악의 가치. 페이지네이션에서 ’항목이 몇 개인가’는 사용자가 선택지의 규모를 가늠하는 단서입니다 — “이전, 1, 2, 3, 4, 5, 다음” 처럼 7개 항목이 있다면, 스크린 리더가 “목록, 항목 7개”라고 먼저 알려줘 사용자는 ’아, 이동 선택지가 7개 정도구나’를 즉시 압니다. 그런 뒤 각 링크를 차례로 들으며 원하는 것을 고르죠. 목록 마크업 없이 링크만 줄줄 나열하면 — 사용자는 끝까지 들어봐야 개수를 알고, 중간에 자기가 몇 번째 듣고 있는지도 모릅니다.

계층 구조. 규칙이 ’계층 구조로’라 표현한 것은, 페이지네이션의 구성을 <nav>(CP-124) → <ul> → <li> → <a>로 시맨틱하게 쌓으라는 뜻입니다. <nav>가 ’페이지 내비게이션 영역’을, <ul>이 ’항목 목록’을, 각 <li>가 ’하나의 이동 항목’을, 그 안의 <a>가 ’링크’를 나타내죠. 이 구조가 스크린 리더에게 페이지네이션의 전체 골격을 전달합니다. 흔한 실수는 링크들을 <div>나 그냥 인라인 <a>로만 나열하는 것 — 그러면 개수·구조 정보가 사라집니다.

구성 요소 포함. 숫자 링크뿐 아니라 이전/다음 버튼, 첫/마지막, 말줄임표(…)도 각각 <li> 안에 넣는 것이 일반적입니다. 말줄임표는 클릭 대상이 아니라 ’생략 표시’이므로 <li> 안에 텍스트(또는 aria-hidden)로 두어, 스크린 리더가 의미 없는 점들을 거추장스럽게 읽지 않게 하기도 하죠(브레드크럼 구분자 처리 CP-088과 유사한 고려).

이 규칙은 페이지네이션 접근성 묶음의 한 조각입니다 — CP-124(nav 구획)가 영역을, CP-125(ul/li)가 개수·구조를, CP-126(aria-current)이 현재 위치를, CP-128~130(aria-label)이 각 항목의 이름을 전달합니다. 함께 스크린 리더 사용자에게 시각 사용자와 동등한 페이지네이션 경험을 주죠. CP-125는 그중 ’목록 구조와 개수’를 담당합니다.

3. 점검 / 개선

무엇을 점검하나

<ul> 사용 — 페이지네이션 링크들이 <ul> 목록으로 마크업됐는가(<div> 아님).

<li> 항목 — 각 링크(이전/다음·숫자·말줄임)가 <li>로 마크업됐는가.

개수 낭독 — 스크린 리더가 “목록, 항목 N개”를 읽는가.

개선 방향

<nav aria-label="페이지네이션"> <ul> <li><a href="?page=1" aria-label="이전 페이지">◀</a></li> <li><a href="?page=1">1</a></li> <li><span aria-current="true">2</span></li> <!-- 현재, CP-126 --> <li><a href="?page=3">3</a></li> <li><a href="?page=3" aria-label="다음 페이지">▶</a></li> </ul> </nav>

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

역할	책임
퍼블리셔/개발	<ul>/<li> 시맨틱 목록 마크업
접근성 담당	개수·위치 낭독 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 페이지네이션이 <ul> 로 마크업됐나요(<div> 아님)?

□ 각 링크(이전/다음·숫자·말줄임)가 <li> 인가요?

□ 스크린 리더가 “목록, 항목 N개”를 읽나요?

❓ FAQ

Q1. 링크만 나열하면 안 되나요? 그러면 개수·위치 정보가 안 들립니다. <ul>/<li>로 묶어야 “항목 N개 중 M번째”가 전달됩니다. Q2. <ol>이 아니라 <ul>인가요? 규칙은 <ul>을 명시합니다. 페이지네이션은 분류된 이동 항목 묶음으로 다루죠(순서가 본질인 브레드크럼은 <ol>). Q3. 말줄임표(…)도 <li>에 넣나요? 네, 보통 <li> 안에 두되 클릭 대상이 아니므로 스크린 리더가 거추장 스럽게 읽지 않게 처리합니다.

6. 마무리

CP-125의 메시지:

몇 페이지인지 귀로 세게 — <ul>+<li>로 개수·구조를 전달하라.

페이지네이션을 목록 시맨틱으로 마크업하면 스크린 리더가 “항목 N개 중 M번째”를 자동으로 전달해, 비시각 사용자도 이동 선택지의 규모와 위치를 빠르게 파악합니다. <nav>(CP-124)와 함께 페이지네이션의 접근성 골격을 이루죠. 다음 편은 현재 페이지 링크의 처리 — href 삭제 + aria-current입니다.

다음 편 예고 ▶ 「246. (CP-126) 현재 화면 링크의 href 속성을 삭제하고 aria-current=“true”를 부여하고 있다.」

ViewCheck는 페이지네이션이 <ul>/<li> 시맨틱으로 항목 수·구조를 노출하는지를 진단합니다.

📚 참고 출처

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

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

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