숫자 ‘1’이 아니라 ’페이지 1’

KRDS CP-128 — aria-label=“페이지 1”, aria-label=“페이지 2” 또는 title=“페이지”와 같은 방식으로 접근 가능한 이름이나 보조적 설명을 제공하고 있다.

0. 들어가며 — ’1’만 들리면 무슨 1인지 모른다

이번 248편은 페이지 링크에 aria-label="페이지 1" 또는 title="페이지" 같은 접근 가능한 이름을 제공 하라는 규칙입니다.

스크린 리더가 페이지네이션의 ‘1’ 링크를 만나면 — 그냥 “1, 링크”라고만 읽습니다. 그런데 이 ’1’이 무슨 1일 까요? 1페이지? 1개? 1번 항목? 맥락 없이 숫자만 들으면 모호하죠. aria-label="페이지 1"을 주면 “페이지 1, 링크”로 읽혀 ’아, 1페이지로 가는 링크구나’가 분명해집니다. CP-128은 이 접근 가능한 이름을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 접근 가능한 이름·보조 설명

CP-128 (컴포넌트 > 페이지네이션) “스크린 리더 사용자를 위해 aria-label="페이지 1", aria-label="페이지 2" 또는 title="페이지" 와 같은 방식으로 접근 가능한 이름이나 보조적 설명을 제공하고 있다.”

페이지네이션의 숫자 링크에 단순 숫자가 아니라 “페이지 N” 같은 접근 가능한 이름(accessible name) 을 부여해, 보조기술이 각 링크의 의미를 명확히 읽게 하라는 뜻입니다.

정리: 숫자 링크에 “페이지 N” 같은 접근 가능한 이름을 줘라. 이게 CP-128입니다.

2. 왜 접근 가능한 이름이 필요한가

스크린 리더 사용자는 종종 링크만 따로 모아 듣는 탐색을 합니다 — 페이지의 모든 링크를 목록으로 훑어 원하는 것을 고르죠. 또 링크에 포커스가 갈 때 그 링크의 ’이름’을 듣고 무엇인지 판단합니다. 이때 페이지네이션의 숫자 링크가 그냥 “1”, “2”, “3”으로만 읽히면 — 맥락이 없어 모호합니다. 다른 페이지 요소의 숫자(가격, 개수, 날짜 등)와 섞이면 더 헷갈리죠. “1, 2, 3, 5, 10, 2024…” 처럼 숫자만 줄줄이 들으면 어느 게 페이지 이동인지 알 수 없습니다.

그래서 각 페이지 링크에 ’페이지’라는 맥락을 붙인 이름을 줍니다 — aria-label="페이지 1", "페이지 2" 식이죠. 그러면 스크린 리더가 “페이지 1, 링크”, “페이지 2, 링크”로 읽어, 사용자는 명확히 ‘페이지 이동 링크’ 임을 알고 원하는 페이지로 갑니다. 링크 목록 탐색에서도 “페이지 N” 항목들이 또렷이 구분되죠.

구현 방식. 규칙은 두 가지를 제시합니다:

aria-label="페이지 N" (권장) — 각 링크에 부여. 보조기술이 이 값을 링크 이름으로 읽습니다. 화면에는 숫자만 보이고(시각 사용자는 맥락으로 이해), 스크린 리더만 “페이지 N”으로 듣죠. 가장 명확합니다.

title="페이지" — 보조 수단. 마우스오버 툴팁이자 일부 보조기술이 읽는 보충 설명입니다. 다만 title은 모바일·키보드에서 약하고 보조기술 지원이 일관되지 않아, 주된 수단은 aria-label 이고 title은 보완 입니다(사이드 메뉴 CP-104의 title 논의와 같은 맥락).

주의 — 화면 텍스트와 충돌. aria-label을 쓰면 화면에 보이는 텍스트(“1”)가 아니라 aria-label 값(“페이지 1”)이 접근 가능한 이름이 됩니다. 둘이 어긋나지 않게(예: 화면엔 “1”인데 label은 전혀 다른 말) 주의해야 하죠 — 화면 텍스트를 포함하는 형태(“페이지 1”처럼 숫자 포함)가 안전합니다(WCAG SC 2.5.3 Label in Name 고려).

이 규칙은 페이지네이션의 각 요소에 ’의미 있는 이름’을 주는 묶음의 일부입니다 — CP-128(숫자 링크 “페이지 N”), CP-129(마지막 페이지 “마지막 페이지, N”), CP-130(아이콘 이전/다음 버튼 “이전/다음 페이지”). 함께 페이지네이션의 모든 클릭 요소가 스크린 리더에 명확한 이름으로 전달되게 하죠. 시각 사용자가 위치·기호로 의미를 알듯, 비시각 사용자는 이 이름들로 같은 의미를 얻습니다.

3. 점검 / 개선

무엇을 점검하나

접근 가능한 이름 — 각 숫자 링크에 “페이지 N” 같은 이름이 있는가.

낭독 확인 — 스크린 리더가 “페이지 N, 링크”로 읽는가(단순 “N”이 아님).

이름 일치 — aria-label이 화면 숫자를 포함해 어긋나지 않는가.

개선 방향

<li><a href="?page=1" aria-label="페이지 1">1</a></li> <li><a href="?page=2" aria-label="페이지 2">2</a></li>

aria-label을 주 수단으로, 필요 시 title 보완.

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

역할	책임
퍼블리셔/개발	각 페이지 링크 aria-label 부여
접근성 담당	링크 이름 낭독 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 숫자 링크에 “페이지 N” 같은 이름이 있나요?

□ 스크린 리더가 “페이지 N, 링크”로 읽나요(단순 “N” 아님)?

□ aria-label이 화면 숫자를 포함해 어긋나지 않나요?

❓ FAQ

Q1. 숫자만 있으면 안 되나요? “1”만 들으면 무슨 1인지 모호합니다. “페이지 1”로 맥락을 줘야 명확합니다. Q2. title만 써도 되나요? title은 보조 수단입니다. 모바일·키보드에서 약해, 주 수단은 aria-label 입니다. Q3. 화면엔 숫자만 보여도 되나요? 네. 시각 사용자는 맥락으로 이해하고, aria-label로 스크린 리더에만 “페이지 N”을 전달합니다. 단 label에 화면 숫자를 포함하세요.

6. 마무리

CP-128의 메시지:

숫자 ‘1’이 아니라 ’페이지 1’ — 각 링크에 접근 가능한 이름을 줘라.

스크린 리더가 “1”만 읽으면 무슨 1인지 모호합니다. aria-label="페이지 N"으로 맥락을 주면 “페이지 N, 링크”로 명확히 읽혀 비시각 사용자가 페이지 이동임을 알죠. title은 보조, aria-label이 주 수단입니다. 다음 편은 마지막 페이지의 특별한 이름입니다.

다음 편 예고 ▶ 「249. (CP-129) 마지막 화면의 경우, aria-label=“마지막 페이지, [숫자]” 또는 title=“마지막 페이지”로 설명을 제공하고 있다.」

ViewCheck는 페이지네이션 링크에 접근 가능한 이름이 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.5.3 Label in Name — https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html

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

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