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