여기가 끝이라고 알려라

KRDS CP-129 — 마지막 화면의 경우, aria-label=“마지막 페이지, [숫자]” 또는 title=“마지막 페이지”로 설명을 제공하고 있다.

0. 들어가며 — ’50’이 끝인지 그냥 한 페이지인지

이번 249편은 마지막 페이지 링크에 aria-label="마지막 페이지, [숫자]" 또는 title="마지막 페이지" 로 설명을 제공하라는 규칙입니다.

페이지네이션 끝에 있는 ‘50’ 링크 — 이게 마지막 페이지라는 걸 시각 사용자는 위치(맨 오른쪽)로 알지만, 스크린 리더 사용자는 그냥 “페이지 50”으로만 들어 ‘이게 끝인지’ 모를 수 있죠. CP-129는 마지막 페이지에 “마지막 페이지”라는 맥락을 더해, 비시각 사용자도 목록의 끝을 인지하게 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 마지막 페이지 설명

CP-129 (컴포넌트 > 페이지네이션) “마지막 화면의 경우, aria-label="마지막 페이지, [숫자]" 또는 title="마지막 페이지" 로 설명을 제공하고 있다.”

페이지네이션에서 마지막 페이지로 가는 링크에는 “마지막 페이지, [번호]” 같은 접근 가능한 이름을 부여해, 보조 기술 사용자가 그것이 목록의 끝임을 인지하게 하라는 뜻입니다.

정리: 마지막 페이지 링크엔 “마지막 페이지, N” 설명을 줘라. 이게 CP-129입니다.

2. 왜 마지막 페이지를 특별히 설명하나

CP-128에서 모든 숫자 링크에 “페이지 N” 이름을 줬습니다. CP-129는 그중 마지막 페이지에 추가 맥락을 더하는 규칙이죠. 마지막 페이지가 특별 취급을 받는 이유는, ’끝’이라는 정보가 사용자에게 중요하기 때문입니다.

시각 vs 비시각의 정보 격차. 시각 사용자는 페이지네이션을 보면 마지막 페이지를 위치로 압니다 — 숫자 링크 맨 오른쪽 끝, 또는 “1 … 50”에서 50이 끝임을요. 그런데 스크린 리더 사용자는 이 시각적 위치 단서가 없죠. 링크들을 차례로 듣다가 “페이지 50”을 만나도, 그게 ’끝’인지 ’중간의 한 페이지’인지 구별이 안 됩니다. 특히 말줄임표로 중간이 접혀 있으면(CP-119), “1 … 50” 구조에서 50이 끝임을 위치만으로 추론하기 어렵죠.

그래서 마지막 페이지에 “마지막 페이지, [숫자]” 라는 명시적 설명을 줍니다. 스크린 리더가 “마지막 페이지, 50, 링크”로 읽으면 — 사용자는 ’아, 이게 끝이고 전체가 50페이지구나’를 즉시 압니다. 이는 두 가지를 동시에 전달하죠: (1) 끝이라는 위치 정보, (2) 전체 페이지 수(CP-115의 전체 화면 수가 마지막 번호로도 전달됨). 사용자는 이 정보로 ’맨 끝으로 점프’를 의식적으로 선택하거나, 목록의 규모를 파악합니다.

구현 방식. CP-128과 같은 패턴입니다:

aria-label="마지막 페이지, 50" (권장) — 마지막 링크에 부여. 숫자(50)를 포함해 끝 위치와 번호를 함께 전달.

title="마지막 페이지" — 보조 수단(마우스오버 툴팁 + 일부 보조기술). 주 수단은 aria-label.

이 규칙은 페이지네이션 ‘이름 묶음’의 일부입니다 — CP-128(일반 페이지 “페이지 N”), CP-129(마지막 “마지막 페이지, N”), CP-130(아이콘 이전/다음 버튼 “이전/다음 페이지”). 각 요소의 특성에 맞는 이름을 주어, 스크린 리더 사용자가 페이지네이션의 모든 요소를 정확히 이해하게 하죠. 특히 ’끝’과 ’처음’, ‘이전’과 ’다음’ 같은 방향·경계 정보는 시각적으로는 위치로 자명하지만 비시각 사용자에겐 명시적 설명이 필요합니다.

참고로 첫 페이지에도 같은 논리로 “첫 페이지” 설명을 줄 수 있고(CP-129는 마지막을 명시하지만 첫 페이지도 동일 정신), 첫/마지막으로 한 번에 가는 버튼(CP-114)이 아이콘이라면 CP-130에 따라 “첫 페이지로”·“마지막 페이지로” 이름을 줍니다. 경계 위치는 자주 찾는 곳이라 명확한 이름이 특히 유용하죠.

3. 점검 / 개선

무엇을 점검하나

마지막 설명 — 마지막 페이지 링크에 “마지막 페이지, N” 같은 이름이 있는가.

끝 인지 — 스크린 리더 사용자가 그것이 목록의 끝임을 아는가.

번호 포함 — 설명에 마지막 페이지 번호가 포함돼 전체 수도 전달되는가.

개선 방향

<li><a href="?page=50" aria-label="마지막 페이지, 50">50</a></li>

첫 페이지에도 동일하게 “첫 페이지” 설명 고려. 첫/마지막 점프 버튼은 CP-130 이름 부여.

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

역할	책임
퍼블리셔/개발	마지막(·첫) 페이지 링크 aria-label 부여
접근성 담당	끝 인지·번호 전달 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 마지막 페이지 링크에 “마지막 페이지, N” 같은 이름이 있나요?

□ 스크린 리더 사용자가 그것이 끝임을 아나요?

□ 설명에 마지막 번호가 포함돼 전체 수도 전달되나요?

❓ FAQ

Q1. 마지막도 그냥 “페이지 50”이면 안 되나요? 그러면 끝인지 중간인지 모호합니다. “마지막 페이지”를 더해 끝임을 명시합니다. Q2. 첫 페이지도 설명하나요? 같은 논리로 “첫 페이지” 설명을 주는 것이 좋습니다. 경계 위치는 명확한 이름이 유용합니다. Q3. 번호를 꼭 넣나요? “마지막 페이지, 50”처럼 번호를 넣으면 끝 위치와 전체 수(CP-115)를 함께 전달해 더 유용합니다.

6. 마무리

CP-129의 메시지:

여기가 끝이라고 알려라 — 마지막 페이지엔 “마지막 페이지, N” 설명을.

시각 사용자는 마지막 페이지를 위치로 알지만, 스크린 리더 사용자는 모릅니다. “마지막 페이지, N” 설명을 주면 끝 위치와 전체 수를 함께 전달하죠. CP-128(일반)·CP-130(아이콘 버튼)과 함께 페이지네이션 요소 이름을 완성 합니다. 다음 편은 아이콘 이전/다음 버튼의 이름입니다.

다음 편 예고 ▶ 「250. (CP-130) 이전/다음 화면 이동 버튼을 아이콘으로만 제공하는 경우, aria-label=“이전 페이지”, aria-label=“다음 페이지”와 같은 방식으로 버튼에 접근 가능한 이름을 제공하고 있다.」

ViewCheck는 페이지네이션 마지막 페이지에 끝을 알리는 설명이 제공되는지를 진단합니다.

📚 참고 출처

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

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

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