수십 페이지의 게시판 페이지네이션(Pagination)에서 현재 페이지 안내와 접근성 링크

블로그 글 목록, 게시판, 쇼핑몰 검색 결과 등 대량의 게시물 목록 하단에 위치한 '페이지네이션(Pagination, 페이지 번호 매기기)' 내비게이션은 사용자가 원하는 콘텐츠를 탐색할 수 있도록 돕는 필수적인 UI 요소입니다. 이전 페이지(<), 1, 2, 3, 4, 5, 다음 페이지(>) 형태로 나열된 숫자 버튼들은 눈으로 보는 사용자에게는 지극히 명확해 보입니다. 그러나 화면을 볼 수 없어 스크린리더를 사용하는 시각장애인에게 이러한 숫자들의 나열은 극심한 혼란을 유발합니다. 브라우저가 링크를 읽어줄 때 단지 '1 링크, 2 링크, 3 링크'라고만 낭독하여 이 숫자가 무엇을 의미하는지 전혀 알 수 없으며, 특히 '현재 내가 머물고 있는 페이지가 몇 번인지'를 알려주는 시각적 하이라이트(예: 2번에 파란색 원형 배경)가 보조공학에는 아무런 상태 단서 없이 증발해 버리기 때문입니다. WCAG 2.2 성공 기준 1.3.1(Info and Relationships)과 4.1.2(Name, Role, Value)는 페이지네이션의 구조적 명확성을 보장할 것을 요구합니다. 이 글에서는 접근 가능한 페이지네이션 설계법을 완벽히 정리합니다.

페이지네이션 마크업에서 자주 발견되는 치명적 접근성 결함

웹 접근성 진단에서 페이지네이션 영역은 의외로 수많은 결함이 집중되는 사각지대입니다.

첫째, <nav> 랜드마크의 누락입니다. 페이지 번호 링크들을 단순한 <div> 태그로 감싸두면, 스크린리더 사용자가 랜드마크 이동 단축키(D 키)로 페이지네이션 영역을 신속하게 찾아올 수 없습니다.

둘째, 현재 활성화된 페이지(Current Page)에 aria-current='page'가 누락된 경우입니다. 눈으로는 3번 번호가 굵은 글씨로 하이라이트되어 있어 3페이지임을 알 수 있지만, 스크린리더는 모든 번호를 동일한 톤으로 낭독하여 시각장애인은 자신이 몇 페이지에 있는지 확인할 방법이 없습니다.

셋째, '이전(<)', '다음(>)' 화살표 링크에 텍스트 레이블이 없는 경우입니다. SVG 화살표만 덩그러니 들어있어 스크린리더가 '링크' 또는 알 수 없는 특수문자로 낭독하는 문제입니다.

W3C 표준 페이지네이션 4대 필수 마크업 아키텍처

스크린리더와 키보드 사용자 모두에게 완벽한 사용성을 보장하는 페이지네이션 코드는 다음과 같이 작성되어야 합니다.

• 1. <nav aria-label='페이지 번호 내비게이션'>: 사이트 상단의 메인 메뉴(GNB)와 구별되도록 명확한 한국어 aria-label을 부여합니다.
• 2. <ul>과 <li>를 활용한 목록 구조화: 전체 페이지 개수를 스크린리더가 '목록 7개 항목 포함' 형태로 먼저 알려줄 수 있도록 순서 없는 목록 태그로 감쌉니다.
• 3. aria-current='page' 속성 부여: 현재 열려 있는 활성 페이지 번호 링크에 aria-current='page'를 선언합니다. 스크린리더는 '3, 현재 페이지, 링크'라고 명확하게 낭독합니다.
• 4. 명확한 접근 가능한 이름(Accessible Name): 각 숫자 링크에 aria-label='1페이지로 이동', '2페이지로 이동'을 부여하고, 화살표 버튼에는 aria-label='이전 페이지 목록으로 이동', '다음 페이지 목록으로 이동'을 확실히 명시합니다.

첫 페이지(First) 및 마지막 페이지(Last) 비활성화 처리

사용자가 현재 1페이지에 머물고 있을 때 '이전 페이지(<)' 버튼은 당연히 동작하지 않아야 합니다.

이때 흔히 하는 실수는 비활성화된 이전 버튼에 <a href='#'>를 그대로 남겨두는 것입니다. 키보드 사용자가 Tab 키로 이동하여 엔터를 눌렀을 때 페이지 최상단으로 튕겨 올라가는 불쾌한 오작동이 발생합니다.

비활성화된 화살표 버튼은 <a> 태그 대신 <button disabled aria-disabled='true'>로 마크업하거나, 링크 태그에서 href 속성을 완전히 제거하고 aria-disabled='true'를 부여하여 더 이상 클릭할 수 없는 상태임을 보조공학 엔진에 명확히 알려주어야 합니다.

페이지 전환 시 초점 관리(Focus Management) 실무 전략

Next.js나 React 기반의 SPA 환경에서 비동기(Ajax)로 페이지네이션을 처리할 때 가장 중요한 것은 '페이지 번호를 클릭한 직후 초점을 어디로 보낼 것인가'입니다.

3페이지 번호를 클릭하여 새로운 게시물 10개가 화면에 로드되었을 때, 초점이 화면 맨 하단의 3번 번호 링크에 그대로 머물러 있으면 시각장애인 사용자는 새로운 게시물이 떴는지조차 알지 못합니다.

페이지 번호 클릭 시 새 데이터 로딩이 완료되면, 자바스크립트를 통해 게시판 목록의 최상단 헤딩(예: <h2 id='board-title' tabindex='-1'>게시물 목록</h2>)으로 초점을 프로그래밍적으로 즉시 이동(boardTitle.focus())시켜야 합니다. 그래야만 스크린리더가 3페이지의 첫 번째 게시물부터 차례대로 낭독을 시작할 수 있습니다.