멈추려면 먼저 닿게

KRDS CP-222 — 자동 재생 캐러셀에서 정지 버튼이 상호작용 가능한 첫 요소로 제공하고 있다.

0. 들어가며 — 정지 버튼이 맨 먼저 닿아야

이번 342편은 자동 재생 캐러셀에서 정지 버튼이 상호작용 가능한 첫 요소로 제공되게 하라는 규칙입니다.

앞서 CP-209에서 자동 회전 정지 컨트롤을 제공하게 했습니다. CP-222는 한 걸음 더 — 그 정지 버튼이 캐러셀에서 키보드로 가장 먼저 닿는 요소여야 한다고 규정하죠. 자동으로 움직이는 캐러셀에 들어온 키보드 사용자가, 다른 요소를 거치기 전에 즉시 움직임을 멈출 수 있게요. 이번 편을 풀어냅니다.

1. 규칙 원문 — 정지 버튼 첫 상호작용 요소

CP-222 (컴포넌트 > 캐러셀) “자동 재생 캐러셀에서 정지 버튼이 상호작용 가능한 첫 요소로 제공하고 있다.”

자동 재생되는 캐러셀에서, 키보드 등으로 접근할 때 정지(일시정지) 버튼이 가장 먼저 닿는 상호작용 요소가 되게 배치하라는 뜻입니다.

정리: 자동 재생 캐러셀의 정지 버튼을 첫 상호작용 요소로 두라. 이게 CP-222입니다.

2. 왜 정지 버튼이 첫 요소여야 하나

자동 재생 캐러셀은 사용자가 가만히 있어도 슬라이드가 계속 넘어갑니다(CP-208). 이 움직임은 일부 사용자에게 장벽이 되므로 정지 컨트롤이 필수죠(CP-209, WCAG 2.2.2). 그런데 — 정지 컨트롤이 ‘있기만’ 하면 부족합니다. 사용자가 그것에 빠르게 닿아 멈출 수 있어야 하죠. 특히 키보드·스크린 리더 사용자에게 그렇습니다.

키보드 사용자의 상황. 키보드 사용자는 Tab으로 요소를 순서대로 거칩니다. 자동 재생 캐러셀에 진입했는데 — 정지 버튼이 캐러셀의 마지막 요소(여러 슬라이드 링크, 이전/다음 버튼, 점들을 다 거친 뒤)에 있으면 어떻게 될까요? 사용자는 정지 버튼에 닿기까지 여러 요소를 Tab으로 지나야 하죠. 그 사이에도 슬라이드는 계속 자동으로 넘어가, 사용자가 보려던 슬라이드가 바뀌고 초점이 있던 콘텐츠가 사라집니다. 멈추려는데 멈출 수단에 닿기까지 혼란스럽죠.

그래서 CP-222는 — 정지 버튼을 상호작용 가능한 첫 요소로 두라고 합니다. 키보드 사용자가 캐러셀에 진입해 첫 Tab(또는 진입 즉시)에 정지 버튼에 닿게요. 그러면 사용자는 다른 요소를 거치기 전에 즉시 움직임을 멈추고, 그 뒤 멈춘 상태에서 차분히 슬라이드를 탐색하죠. ’먼저 멈추고, 그다음 본다’는 자연스러운 흐름입니다.

이는 WCAG의 ‘정지 수단 제공’(SC 2.2.2)을 실효성 있게 만드는 것입니다 — 정지 버튼이 있어도 닿기 어려우면 의미가 약하죠. 첫 요소로 두면 누구나 즉시 멈출 수 있습니다.

구현 — DOM 순서와 초점. ’첫 상호작용 요소’는 DOM 순서의 문제입니다(모달 닫기 버튼 DOM 순서 CP-183, 구조화 목록 초점 순서 CP-103 정신). 정지 버튼을 캐러셀 DOM의 앞쪽(상호작용 요소 중 첫 번째)에 배치하면, Tab 초점이 그것에 먼저 닿고 스크린 리더도 먼저 안내하죠. 시각적 위치는 CSS로 조정하되(하단 인디케이터 근처 등), DOM·초점 순서상으로는 첫 번째가 되게 합니다.

보조 — 진입 시 자동 일시정지. 더 나아가, 사용자가 캐러셀에 키보드 초점을 두거나 마우스를 올리면 자동으로 일시정지되게 하는 것도 권장됩니다(CP-209 보조). 그러면 정지 버튼을 누르기 전에도 탐색 중 안 넘어가죠. 단 명시적 정지 버튼(첫 요소)이 기본입니다.

이 규칙은 자동 재생 안전장치 3종(CP-208 적절 간격, CP-209 정지 컨트롤, CP-222 정지 우선 접근)을 완성합니다 — 간격을 충분히(208), 멈출 수 있게(209), 멈춤에 먼저 닿게(222). 자동 움직임이라는 강한 개입에 사용자 통제권을 실효성 있게 보장하죠.

정리하면 — 자동 재생 캐러셀에서 정지 버튼을 첫 상호작용 요소로 두어, 키보드·스크린 리더 사용자가 다른 요소를 거치기 전에 즉시 움직임을 멈추게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

첫 요소 — 자동 재생 캐러셀에서 정지 버튼이 첫 상호작용(Tab) 요소인가.

DOM 순서 — 정지 버튼이 캐러셀 DOM 앞쪽에 위치하는가.

즉시 정지 — 키보드 사용자가 진입 즉시 멈출 수 있는가.

개선 방향

정지 버튼을 캐러셀 DOM의 첫 상호작용 요소로 배치(시각 위치는 CSS 조정).

진입 시 자동 일시정지 보조(CP-209). Tab 첫 도달 검증.

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

역할	책임
퍼블리셔/개발	정지 버튼 DOM 첫 요소 배치·초점 순서 구현
접근성 담당	진입 즉시 정지 가능 검증

기관 유형	CP-222 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (자동 재생 캐러셀 사용 시)

자동 재생 캐러셀을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 자동 재생 캐러셀에서 정지 버튼이 첫 상호작용(Tab) 요소인가요?

□ 정지 버튼이 캐러셀 DOM 앞쪽에 위치하나요?

□ 키보드 사용자가 진입 즉시 멈출 수 있나요?

❓ FAQ

Q1. 정지 버튼이 있으면(CP-209) 충분하지 않나요? 있어도 닿기 어려우면 의미가 약합니다. 첫 요소로 둬야 즉시 멈추죠. Q2. 왜 키보드 사용자에게 특히 중요한가요? Tab으로 순서대로 거치는데, 정지 버튼이 뒤에 있으면 닿기까지 슬라이드가 계속 넘어가 혼란스럽습니다. Q3. 시각 위치도 첫 번째여야 하나요? DOM·초점 순서가 첫 번째면 됩니다. 시각 위치는 CSS로 조정할 수 있죠 (모달 닫기 CP-183 정신).

6. 마무리

CP-222의 메시지:

멈추려면 먼저 닿게 — 자동 재생 캐러셀의 정지 버튼을 첫 상호작용 요소로.

자동 재생 캐러셀의 정지 버튼이 뒤에 있으면, 키보드 사용자가 닿기까지 슬라이드가 계속 넘어가 혼란스럽습니다. 정지 버튼을 첫 상호작용 요소(DOM 앞쪽)로 둬 진입 즉시 멈출 수 있게 하죠. 자동 재생 안전장치를 완성합니다. 다음 편은 단일 지점 상호작용 탐색입니다.

다음 편 예고 ▶ 「343. (CP-223) 단일 지점과의 상호작용을 통해 슬라이드를 탐색할 수 있는 수단을 제공하고 있다.」

ViewCheck는 자동 재생 캐러셀의 정지 버튼이 첫 상호작용 요소인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 캐러셀(Carousel) 가이드 — https://www.krds.go.kr/html/site/component/component_20.html

WCAG 2.1 SC 2.2.2 Pause, Stop, Hide — https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

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

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