모든 패턴
Pagination
여러 페이지의 콘텐츠를 탐색하는 페이지 번호 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
Baseline (React)tsx
Loading...
공통 베이스라인
모든 디자인 시스템에 적용Must4
<nav> 랜드마크와 aria-label
페이지네이션을 <nav> 요소로 감싸고 aria-label="pagination" 또는 "페이지 탐색"으로 레이블을 제공해야 합니다.
각 버튼에 aria-label 제공
"이전", "다음", "1페이지로 이동" 등 버튼의 목적을 설명하는 aria-label을 제공해야 합니다.
aria-current="page" 설정
현재 활성 페이지 버튼에 aria-current="page"를 설정해야 합니다.
비활성 버튼에 aria-disabled
이전/다음 버튼이 비활성일 때 aria-disabled="true"로 표시하고 포커스는 유지하세요.
Should2
총 페이지 수 안내
스크린리더 사용자에게 "12페이지 중 3페이지"처럼 현재 위치 컨텍스트를 제공하세요.
페이지 변경 시 알림
페이지 변경 후 새 콘텐츠가 로드되면 role="status"로 스크린리더에 변경 사항을 알리세요.
Avoid2
숫자만 있는 버튼
"3" 같은 숫자만 있는 버튼은 맥락 없이 읽힙니다. aria-label="3페이지로 이동"을 추가하세요.
비활성 버튼 포커스 완전 제거
disabled 버튼에서 포커스를 제거하면 키보드 사용자가 구조를 탐색할 수 없습니다.
디자인 시스템별 구현
추가 체크포인트
getItemAriaLabel로 aria-label 커스텀
MUI Pagination의 기본 aria-label은 영어입니다. getItemAriaLabel prop으로 한국어 레이블을 제공하세요.
코드 샘플
MUI Paginationtsx
Loading...
구현 노트
- –MUI Pagination은 자동으로 <nav role="navigation"> 랜드마크를 사용합니다.
- –현재 페이지에 aria-current가 자동으로 적용됩니다.
- –getItemAriaLabel로 모든 버튼의 aria-label을 한 번에 커스텀할 수 있습니다.