기본 코드 예시
공통 베이스라인
<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으로 다국어 레이블을 제공하고 현재 페이지 상태를 포함하세요.
Pagination 컨테이너에 aria-label 제공
MUI Pagination은 <nav>로 렌더링되지만 aria-label이 없어 스크린리더가 다른 nav와 구분하기 어렵습니다. 감싸는 nav에 aria-label을 추가하거나 componentsProps를 활용하세요.
코드 샘플
구현 노트
- –MUI Pagination은 자동으로 <nav> 랜드마크를 사용하며 현재 페이지에 aria-current="true"를 적용합니다.
- –getItemAriaLabel(type, page, selected) 콜백으로 모든 버튼의 aria-label을 한 번에 커스텀하세요.
- –showFirstButton, showLastButton prop으로 첫/마지막 페이지 이동 버튼을 추가하세요.
- –aria-live 영역으로 현재 페이지 변경을 스크린리더에 알리면 접근성이 향상됩니다.