현재 페이지는 링크가 아니다

KRDS CP-126 — 스크린 리더 사용자를 위해 현재 화면 링크의 href 속성을 삭제하고 aria-current=“true”를 부여하고 있다.

0. 들어가며 — 지금 있는 페이지로 가는 링크는 의미가 없다

이번 246편은 현재 화면 링크의 href를 삭제하고 aria-current="true"를 부여하라는 규칙입니다.

페이지네이션에서 현재 페이지(예: 3페이지를 보는 중의 ‘3’)는 — 클릭해도 같은 페이지라 이동할 곳이 없습니다. 그런데 이게 여전히 링크(<a href>)면, 스크린 리더는 ’클릭 가능한 링크’로 읽고 사용자는 헛클릭하죠. CP-126은 현재 번호의 링크 기능을 빼고(href 삭제), aria-current="true"로 ’현재 페이지’임을 보조기술에 알리라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — href 삭제 + aria-current=“true”

CP-126 (컴포넌트 > 페이지네이션) “스크린 리더 사용자를 위해 현재 화면 링크의 href 속성을 삭제하고 aria-current="true" 를 부여하고 있다.”

현재 페이지에 해당하는 번호는 링크 기능(href)을 제거해 클릭 대상에서 빼고, aria-current="true"를 부여해 보조기술이 ’현재 페이지’로 인지하게 하라는 뜻입니다.

정리: 현재 번호는 href를 빼서 링크에서 제외하고, aria-current=“true”로 현재임을 알려라. 이게 CP-126입니다.

2. 왜 href를 빼고 aria-current를 주나

이 규칙은 두 동작을 함께 합니다 — 현재 번호를 링크에서 빼기와 현재임을 보조기술에 알리기. 둘 다 필요한 이유가 있죠.

① href 삭제 — 현재는 갈 곳이 아니다. 페이지네이션 번호는 ‘그 페이지로 가는 링크’입니다. 그런데 현재 보고 있는 페이지(3페이지의 ’3’)는 이미 그 자리이므로, 클릭해 갈 곳이 없죠. 이 ’3’을 여전히 <a href="?page=3"> 링크로 두면 문제가 생깁니다:

스크린 리더 혼란 — 다른 번호들과 똑같이 ‘링크’로 읽혀, 사용자는 ’현재 페이지인데 왜 링크지? 누르면 어디 가지?’ 하고 헷갈립니다.

헛클릭 — 키보드·마우스 사용자가 현재 번호를 눌러도 같은 페이지라 아무 일이 안 일어나거나 불필요한 새 로딩이 일어나죠.

그래서 현재 번호는 href를 삭제해 링크 기능을 뺍니다. href 없는 <a>는 포커스도 안 받고 클릭 대상도 아니게 되거나, 보통은 <span>으로 바꿔 ’클릭 불가능한 현재 표시 텍스트’로 만들죠. 그러면 스크린 리더는 이를 ’링크’가 아니라 ’텍스트’로 읽어, 사용자가 ’여긴 현재라 누를 게 없다’를 자연스럽게 인지합니다.

② aria-current=“true” — 현재임을 명시. href를 빼는 것만으론 ‘이게 왜 링크가 아닌지’(=현재 페이지라서)가 명확히 전달되지 않을 수 있습니다. 그래서 aria-current="true"를 부여해, 스크린 리더가 “현재” 정보를 함께 낭독하게 하죠. 사용자는 “현재, 3” 처럼 들어 ’아, 지금 3페이지에 있구나’를 확실히 압니다. 이는 사이드 메뉴의 현재 표시(CP-100·101)와 같은 원리입니다 — 시각 강조(CP-116·127)만으론 비시각 사용자에게 전달이 안 되니, aria-current로 보조기술에도 알리는 것이죠.

왜 page가 아니라 true인가? 사이드 메뉴 현재 링크는 aria-current="page"(CP-101)였는데, 페이지네이션은 규칙상 true를 명시합니다. 둘 다 유효하며, ’page’가 더 구체적이긴 하지만 — 페이지네이션 맥락에서는 KRDS가 true를 기준으로 제시합니다(WAI-ARIA APG 페이지네이션 예시도 aria-current="page"를 쓰기도 함). 핵심은 현재 항목에 aria-current를 부여해 ’현재’를 보조기술에 전달하는 것이고, 본 규칙은 그 값으로 true를 지정 하죠. 일관성을 위해 사이트 내에서 한 값으로 통일하는 것이 좋습니다.

이렇게 ’href 삭제 + aria-current’를 함께 하면 — 현재 페이지는 시각적으로 강조되고(CP-116·127), 링크가 아니라 ’현재 위치 표시’로 동작하며, 스크린 리더에도 ’현재’임이 전달됩니다. 모든 사용자에게 일관된 현재 표시가 완성되죠.

3. 점검 / 개선

무엇을 점검하나

href 삭제 — 현재 번호에 링크 기능(href)이 없는가(또는 <span> 처리).

aria-current — 현재 번호에 aria-current="true"(또는 page)가 부여됐는가.

낭독·헛클릭 — 스크린 리더가 현재를 ‘링크’ 아닌 ’현재’로 읽고, 헛클릭이 없는가.

개선 방향

<li><span aria-current="true">3</span></li> <!-- 현재: 링크 아님 + aria-current --> <li><a href="?page=4">4</a></li> <!-- 다른 페이지: 링크 -->

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

역할	책임
퍼블리셔/개발	현재 번호 href 제거·aria-current 부여
접근성 담당	현재 낭독·링크 제외 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 번호에 링크 기능(href)이 없나요(또는 <span>)?

□ 현재 번호에 aria-current="true" 가 부여됐나요?

□ 스크린 리더가 현재를 ‘링크’ 아닌 ’현재’로 읽나요?

❓ FAQ

Q1. 현재 번호도 링크로 두면 안 되나요? 같은 페이지라 갈 곳이 없어 헛클릭·혼란을 부릅니다. href를 빼야 합니다. Q2. aria-current="true"인가 page인가요? 본 규칙은 true를 명시합니다. 둘 다 유효하나 사이트 내 한 값으로 통일하는 게 좋습니다. Q3. 시각 강조(CP-116)만으론 안 되나요? 시각 강조는 스크린 리더에 전달되지 않습니다. aria-current가 별도로 필요합니다.

6. 마무리

CP-126의 메시지:

현재 페이지는 링크가 아니다 — href를 빼고 aria-current=“true”로 현재를 알려라.

현재 번호는 갈 곳이 없으니 링크에서 빼고, aria-current로 보조기술에 현재임을 전달합니다. 그러면 헛클릭이 사라지고 스크린 리더가 ’현재’를 정확히 읽죠. 시각 강조(CP-116·127)와 함께 모든 사용자에게 일관된 현재 표시를 완성합니다. 다음 편은 그 시각 강조의 구체 방식입니다.

다음 편 예고 ▶ 「247. (CP-127) 현재 화면 숫자 링크는 밑줄, 배경 반전, 텍스트 크기 조정 등의 방식을 활용 하여 다른 링크와 명확하게 구분되게 구현하고 있다.」

ViewCheck는 페이지네이션 현재 번호의 href 삭제·aria-current 부여를 진단합니다.

📚 참고 출처

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

MDN — aria-current — https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

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

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