마우스 없이도 다 되게

KRDS CP-224 — 캐러셀에서 제공되는 모든 기능을 키보드로 실행할 수 있도록 한다.

0. 들어가며 — 키보드로 캐러셀 다루기

이번 344편은 캐러셀의 모든 기능을 키보드로 실행할 수 있게 하라는 규칙입니다.

캐러셀에는 여러 기능이 있죠 — 이전/다음, 점 클릭 이동, 정지/재생, (스와이프). 이 모든 게 마우스·터치로만 되면 키보드 사용자는 캐러셀을 제대로 못 씁니다. CP-224는 캐러셀의 전 기능을 키보드만으로 실행 가능하게 하라고 규정합니다. 구조화 목록 CP-148, 달력 CP-167과 같은 키보드 접근성 원칙이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모든 기능 키보드 실행

CP-224 (컴포넌트 > 캐러셀) “캐러셀에서 제공되는 모든 기능을 키보드로 실행할 수 있도록 한다.”

캐러셀의 모든 기능(이전/다음, 슬라이드 직접 이동, 정지/재생 등)을 키보드만으로 초점 이동·실행할 수 있게 구현 하라는 뜻입니다.

정리: 캐러셀 전 기능을 키보드로 실행 가능하게 하라. 이게 CP-224입니다.

2. 왜 모든 기능이 키보드로 실행돼야 하나

키보드 접근성은 웹 접근성의 기본 토대입니다(WCAG SC 2.1.1) — 마우스를 못 쓰는 사용자(운동 장애·스크린 리더· 스위치)는 키보드로 조작하죠. 캐러셀의 기능이 마우스·터치 전용이면 이들은 캐러셀을 못 씁니다. 특히 스와이프 (CP-218)는 키보드로 아예 안 되므로, 클릭 가능한 컨트롤들이 키보드로 작동해야 키보드 사용자가 캐러셀을 쓰죠.

캐러셀의 키보드 실행 대상:

이전/다음 버튼 — Tab으로 닿고 Enter/Space로 실행. 또는 캐러셀에 초점이 있을 때 좌/우 화살표 키로 전환.

점 인디케이터(도형형 버튼) — Tab으로 닿고 Enter/Space로 그 슬라이드 이동(CP-220의 버튼). 점들 사이는 Tab 또는 화살표로 이동.

정지/재생 버튼 — Tab으로 닿고(첫 요소, CP-222) Enter/Space로 자동 회전 정지·재생.

슬라이드 내 링크·CTA — 슬라이드에 링크·버튼이 있으면 그것도 키보드로 닿고 실행.

이 모든 컨트롤이 — 표준 인터랙티브 요소(<button>, <a>)로 만들어져야 키보드로 작동합니다(구조화 목록 CP-148, 디스클로저 CP-174 정신). <div onclick> 점·화살표는 키보드 함정이 되죠. 그리고 키보드로 닿을 때 초점이 시각적으로 보여야(focus indicator, CP-149·168 정신) 사용자가 위치를 압니다.

WAI-ARIA 캐러셀 패턴. 캐러셀의 키보드 상호작용은 WAI-ARIA의 캐러셀 패턴이 가이드합니다 — 보통 캐러셀을 role="group"(또는 region)으로 두고 aria-roledescription="carousel"로 캐러셀임을 알리며, 컨트롤들을 표준 버튼으로 두죠. 자동 회전이면 — 키보드 초점이 캐러셀에 들어오면 자동 회전을 멈추는 것이 권장됩니다(초점 중에 콘텐츠가 안 바뀌게, CP-209 보조).

기본 항목만 접근. 키보드(와 스크린 리더)는 — 현재 보이는 슬라이드(기본 항목)의 콘텐츠에만 접근하고, 숨겨진 (화면 밖) 슬라이드의 콘텐츠에는 키보드 초점이 가지 않아야 합니다. 이는 다음 편 CP-225에서 다루죠 — 숨긴 슬라이드 까지 Tab이 들어가면 키보드 사용자가 안 보이는 곳에 갇히니까요. CP-224(전 기능 키보드 실행)와 CP-225(기본 항목만 접근)가 함께 캐러셀의 키보드 접근성을 완성합니다.

전 기능 점검. 핵심은 — 캐러셀의 모든 기능을 키보드로 점검·보장하는 것입니다. ’이전/다음은 되는데 점 클릭 이동은 안 됨’도 그 기능을 쓰는 사용자에겐 장벽이죠. 그리고 키보드로 닿는 것만으론 부족하고 — 초점이 보여야(CP-149·168 정신), 기능이 예측 가능하게 작동해야(구조화 목록 CP-150) 합니다.

이 규칙은 캐러셀 입력 수단 3종(스와이프 CP-218, 단일 지점 클릭 CP-223, 키보드 CP-224)을 완성합니다 — 터치 사용자는 스와이프, 마우스·보조기기는 클릭, 키보드 사용자는 키보드로 각자 캐러셀을 쓰죠. 모든 입력 환경을 포용합니다.

정리하면 — 캐러셀의 모든 기능(이전/다음·점 이동·정지/재생)을 표준 컨트롤로 키보드 실행 가능하게 하고 초점을 보이게 해, 마우스를 못 쓰는 사용자도 캐러셀을 온전히 쓰게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

전 기능 키보드 실행 — 이전/다음·점 이동·정지/재생이 모두 키보드로 되는가.

표준 컨트롤 — 컨트롤이 <button>/<a> 등 표준 요소인가(<div onclick> 아님).

초점 표시 — 키보드 초점이 시각적으로 보이는가.

개선 방향

모든 컨트롤을 표준 버튼·링크로. 화살표/Enter/Space 키 조작 구현.

초점 표시 제공. WAI-ARIA 캐러셀 패턴 적용. 초점 시 자동 회전 정지.

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

역할	책임
퍼블리셔/개발	전 기능 키보드 실행·표준 컨트롤·초점 구현
접근성 담당	키보드만으로 캐러셀 전 기능 사용 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이전/다음·점 이동·정지/재생이 모두 키보드로 되나요?

□ 컨트롤이 <button>/<a> 표준 요소인가요(<div onclick> 아님)?

□ 키보드 초점이 시각적으로 보이나요?

❓ FAQ

Q1. 스와이프(CP-218)가 있으면 키보드는 안 해도 되나요? 스와이프는 키보드로 안 됩니다. 클릭 컨트롤들이 키보드로 작동해야 키보드 사용자가 쓰죠. Q2. 어떻게 키보드로 넘기나요? 이전/다음 버튼에 Tab+Enter, 또는 캐러셀 초점 시 좌우 화살표로. 점 버튼은 Tab+Enter로 그 슬라이드 이동. Q3. 숨긴 슬라이드에도 Tab이 가나요? 가면 안 됩니다. 기본(보이는) 항목만 접근하게 해야 하죠(CP-225).

6. 마무리

CP-224의 메시지:

마우스 없이도 다 되게 — 캐러셀 전 기능을 키보드로 실행 가능하게.

스와이프는 키보드로 안 되므로, 캐러셀의 모든 컨트롤(이전/다음·점·정지)이 표준 버튼으로 키보드 실행돼야 키보드 사용자가 쓰죠. 초점도 보여야 합니다. 스와이프·클릭·키보드 3종으로 모든 입력 환경을 포용합니다. 다음 편은 기본 항목만 접근하게 하는 규칙입니다.

다음 편 예고 ▶ 「345. (CP-225) 키보드와 스크린 리더는 기본 항목에만 접근하도록 하고 있다.」

ViewCheck는 캐러셀의 모든 기능이 키보드로 실행 가능한지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.1.1 Keyboard — https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

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

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