더 보기로 늘어난 항목, 초점도 거기로

KRDS CP-133 — 목록 확장 페이지네이션을 사용할 때, 초점 이동 순서를 준수하고 있다.

0. 들어가며 — 페이지네이션 그룹의 마지막

이번 253편은 페이지네이션 그룹(CP-114~133, 20개)의 마지막 규칙입니다. 목록 확장(더 보기) 방식의 페이지 네이션을 쓸 때 초점 이동 순서를 지키라는 내용이죠.

페이지네이션에는 ‘페이지를 갈아끼우는’ 방식 외에, ‘더 보기’ 버튼으로 기존 목록 아래에 항목을 이어 붙이는 방식(목록 확장, Load more)도 있습니다. 이때 새로 추가된 항목들로 키보드 초점이 자연스럽게 이어지지 않으면, 키보드 사용자는 새 항목을 못 찾고 길을 잃죠. CP-133은 이 확장 상황의 초점 순서를 규정합니다. 이번 편으로 페이지네이션 20개를 마무리합니다.

1. 규칙 원문 — 목록 확장 시 초점 순서 준수

CP-133 (컴포넌트 > 페이지네이션) “목록 확장 페이지네이션을 사용할 때, 초점 이동 순서를 준수하고 있다.”

’더 보기’처럼 기존 목록에 항목을 이어 붙이는 방식의 페이지네이션에서, 새로 추가된 항목들로 키보드 초점이 논리적 순서대로 이어지도록 구현하라는 뜻입니다.

정리: 목록 확장(더 보기) 시 새 항목으로 초점이 자연스럽게 이어지게 하라. 이게 CP-133입니다.

2. 왜 목록 확장의 초점 순서가 중요한가

먼저 ’목록 확장 페이지네이션’을 짚겠습니다. 일반 페이지네이션이 ’page 1 → page 2’로 화면을 갈아끼운다면, 목록 확장(Load more / 더 보기)은 page 1 목록을 그대로 둔 채 그 아래에 page 2 항목을 이어 붙입니다. “더 보기” 버튼을 누를 때마다 목록이 길어지죠. 무한 스크롤과 비슷하지만 사용자가 버튼으로 명시적으로 더 불러온다는 점이 다릅니다.

이 방식에서 키보드 초점 관리가 까다롭습니다. 시각 마우스 사용자는 ’더 보기’를 누르면 새 항목이 아래 나타나는 걸 눈으로 보고 이어 읽죠. 하지만 키보드·스크린 리더 사용자는 다릅니다:

‘더 보기’ 버튼을 Enter로 눌러 새 항목 10개가 추가됐는데, 초점이 여전히 ‘더 보기’ 버튼에 남아 있으면 — 다음 Tab을 눌렀을 때 초점이 새로 추가된 첫 항목으로 가야 하는데, 구현에 따라 엉뚱한 곳으로 튀거나, 새 항목을 건너뛰거나, 초점을 잃을 수 있습니다.

최악의 경우, ‘더 보기’를 눌렀는데 화면엔 항목이 늘었지만 키보드 사용자는 그 새 항목들이 추가됐는지조차 모르고(스크린 리더가 안 알림), 여전히 ’더 보기’ 버튼만 인지하죠.

그래서 CP-133은 목록 확장 시 초점 이동 순서를 준수하라고 합니다. 핵심 처리는:

새 항목으로 초점 이어가기 — ‘더 보기’ 실행 후, 키보드 초점이 새로 추가된 첫 항목(또는 이어지는 적절한 지점)으로 가거나, 적어도 다음 Tab이 자연스럽게 새 항목으로 진행되게 합니다. 초점이 목록 맨 위나 엉뚱한 곳 으로 튀지 않게 하죠(CP-103·112의 초점 관리와 같은 정신).

추가 알림 — 스크린 리더 사용자에게 ’N개 항목이 추가됨’을 알리는 것이 좋습니다(aria-live 영역으로 “10개 항목이 추가되었습니다” 안내). 그래야 비시각 사용자가 확장 결과를 인지하죠.

‘더 보기’ 버튼 위치 — 새 항목이 추가되면 ‘더 보기’ 버튼은 보통 목록 맨 아래로 다시 내려갑니다. 그 위치 변화에도 초점 흐름이 끊기지 않게 관리합니다.

이 규칙의 난이도가 높은(★★★★) 이유는 — 정적 마크업만으론 안 되고, JavaScript로 동적 추가 시 초점을 명시 관리해야 하기 때문입니다. 동적 콘텐츠의 초점 관리는 접근성에서 가장 까다로운 영역 중 하나죠(모달·아코디언 등에서도 반복되는 주제).

이로써 페이지네이션 20개 규칙(CP-114~133)이 완성됩니다 — 이동 수단(114)·전체 수(115)·현재 강조(116)·배치 (117·121·132)·개수(119·122)·성능(120)·일관성(118·123)·접근성(124~131)·동적 초점(133)까지. 정적인 페이지 갈이부터 동적인 목록 확장까지, 모든 사용자가 페이지네이션을 온전히 쓰게 하는 규칙들이죠.

3. 점검 / 개선

무엇을 점검하나

초점 이어짐 — ‘더 보기’ 후 초점이 새 항목으로 자연스럽게 이어지는가(엉뚱한 곳으로 안 튐).

추가 알림 — 스크린 리더에 새 항목 추가가 알려지는가(aria-live 등).

버튼 위치 관리 — ‘더 보기’ 버튼 위치 변화에도 초점 흐름이 끊기지 않는가.

개선 방향

‘더 보기’ 실행 후 새 항목 첫 요소에 focus() 또는 자연스러운 Tab 진행 보장.

aria-live="polite" 영역으로 “N개 항목이 추가되었습니다” 안내.

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

역할	책임
퍼블리셔/개발	동적 추가 시 초점 관리·aria-live 알림 구현
접근성 담당	확장 후 초점·알림 검증

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

‘더 보기’ 방식 페이지네이션을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ ‘더 보기’ 후 초점이 새 항목으로 자연스럽게 이어지나요(엉뚱한 곳 안 튐)?

□ 스크린 리더에 새 항목 추가가 알려지나요(aria-live)?

□ ‘더 보기’ 버튼 위치 변화에도 초점 흐름이 끊기지 않나요?

❓ FAQ

Q1. 목록 확장 페이지네이션이 뭔가요? ‘더 보기’ 버튼으로 기존 목록 아래에 항목을 이어 붙이는 방식입니다. 페이지를 갈아끼우는 일반 방식과 다릅니다. Q2. 마우스 사용자는 괜찮은데 왜 문제죠? 키보드·스크린 리더 사용자는 초점이 새 항목으로 안 가면 추가된 항목을 못 찾습니다. Q3. 어떻게 알리나요? 새 항목 추가를 aria-live 영역으로 “N개 추가됨” 안내하고, 초점을 새 항목으로 이어 줍니다.

6. 마무리

CP-133의 메시지:

더 보기로 늘어난 항목, 초점도 거기로 — 목록 확장 시 초점 순서를 준수하라.

‘더 보기’ 방식은 기존 목록에 항목을 이어 붙이는데, 초점이 새 항목으로 이어지지 않으면 키보드·스크린 리더 사용자가 추가된 항목을 못 찾습니다. 동적 추가 시 초점을 명시 관리하고 aria-live로 알려야 하죠. 동적 콘텐츠 초점 관리의 대표 사례입니다. 이로써 페이지네이션 20개 규칙(CP-114~133)을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 탭 바(Tab bar) 로 넘어갑니다.

다음 편 예고 ▶ 「254. (CP-134) 탭 바 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 목록 확장 페이지네이션의 초점 이동 순서 준수를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.3 Focus Order — https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

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

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