화살표로 탭을 넘나들게

KRDS CP-235 — 탭을 키보드로 탐색하고 실행할 수 있도록 하고 있다.

0. 들어가며 — 키보드로 탭 다루기

이번 355편은 탭을 키보드로 탐색하고 실행할 수 있게 하라는 규칙입니다.

탭 위젯을 마우스로만 누를 수 있으면 키보드 사용자는 콘텐츠를 전환 못 하죠. 탭 위젯에는 WAI-ARIA가 정의한 표준 키보드 패턴이 있습니다 — 화살표로 탭 사이를 이동하고, Enter/Space(또는 자동)로 실행하는 식이죠. CP-235는 이 키보드 조작을 규정합니다. 구조화 목록 CP-148, 달력 CP-167과 같은 키보드 접근성 원칙이죠. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 키보드 탐색·실행

CP-235 (컴포넌트 > 탭) “탭을 키보드로 탐색하고 실행할 수 있도록 하고 있다.”

탭 위젯의 탭들을 키보드만으로 초점 이동(탐색)하고 선택(실행)할 수 있게, WAI-ARIA 탭 패턴에 맞는 키보드 조작을 구현하라는 뜻입니다.

정리: 탭을 키보드로 탐색·실행 가능하게 하라. 이게 CP-235입니다.

2. 왜 키보드 탐색·실행이 필요한가

키보드 접근성은 웹 접근성의 기본 토대입니다(WCAG SC 2.1.1) — 마우스를 못 쓰는 사용자(운동 장애·스크린 리더· 스위치)는 키보드로 조작하죠. 탭 위젯이 마우스 전용이면 이들은 콘텐츠를 전환 못 합니다. 탭은 콘텐츠 묶음을 오가는 핵심 도구라, 키보드 조작이 필수죠.

탭 위젯의 키보드 조작은 — 단순 버튼들의 나열과 다른 특별한 패턴을 가집니다. WAI-ARIA 탭 패턴이 정의하는 표준 키보드 동작:

① 탭 줄로 진입 — Tab 키. Tab을 눌러 탭 위젯에 진입하면, 초점이 현재 선택된 탭(또는 첫 탭)에 갑니다. 중요한 점 — 탭 줄 안의 모든 탭을 Tab으로 일일이 거치지 않습니다. 탭 줄 전체가 ’roving tabindex’로 관리 되어, Tab 한 번에 선택된 탭 하나에만 초점이 가죠. 그래야 탭이 많아도 Tab을 여러 번 안 눌러도 되고, 탭 줄을 지나 패널로 빠르게 갈 수 있습니다.

② 탭 사이 이동 — 화살표 키. 탭 줄 안에서 탭 사이를 이동할 때는 화살표 키를 씁니다 — 수평 탭은 좌/우 화살표, 수직 탭(CP-228)은 상/하 화살표로 인접 탭으로 초점 이동. Home/End로 첫/마지막 탭으로 점프하기도 하죠. 화살표로 탭들을 넘나들며 원하는 탭을 찾습니다.

③ 탭 실행 — 자동 또는 Enter/Space. 탭을 선택(활성화)하는 방식은 두 가지:

자동 활성화(automatic) — 화살표로 탭에 초점이 가면 즉시 그 탭이 선택되고 패널이 바뀜. 빠르지만, 패널 로딩이 무거우면 화살표 이동마다 로딩돼 부담이 될 수 있죠.

수동 활성화(manual) — 화살표로 초점만 이동하고, Enter/Space를 눌러야 그 탭이 선택됨. 패널이 무겁거나 많을 때 적합하죠.

WAI-ARIA는 둘 다 허용하며, 콘텐츠 성격에 맞게 고릅니다.

④ 패널로 이동. 탭을 선택한 뒤, Tab을 누르면 초점이 선택된 탭의 패널(콘텐츠)로 이동합니다. 탭 줄 → 패널 콘텐츠 순으로 자연스럽게 흐르죠.

이 키보드 패턴이 — 키보드 사용자가 탭을 마우스처럼 직관적으로 탐색·실행하게 합니다. 핵심은 표준 패턴을 따르는 것입니다. 탭을 그냥 여러 개의 <button>으로 만들어 Tab으로 다 거치게 하면(roving tabindex 없이) — 탭이 많을 때 Tab을 수없이 눌러야 하고 패널 도달이 느리죠. WAI-ARIA 탭 패턴(roving tabindex + 화살표)을 따라야 효율적입니다.

이 규칙은 CP-236(키보드 초점 표시), CP-237(역할·관계 ARIA)과 함께 탭 접근성을 완성합니다 — 키보드로 탐색· 실행(235)하고, 초점이 보이며(236), 역할·관계가 전달되면(237), 키보드·스크린 리더 사용자가 탭 위젯을 온전히 쓰죠. 그리고 CP-234(선택 상태 전달)와도 맞물립니다 — 키보드로 선택하면 그 선택이 시각·ARIA로 표시돼야 하니까요.

정리하면 — 탭 위젯은 WAI-ARIA 탭 패턴(Tab 진입, 화살표 이동, 자동/수동 실행, Tab으로 패널 이동)에 맞춰 키보드 탐색·실행을 구현해, 마우스를 못 쓰는 사용자도 콘텐츠를 전환하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

화살표 이동 — 탭 줄에서 화살표 키로 탭 사이를 이동하는가(수평은 좌우, 수직은 상하).

실행 — 자동 또는 Enter/Space로 탭이 선택되고 패널이 바뀌는가.

roving tabindex — Tab 한 번에 선택 탭 하나에만 초점이 가고 패널로 이어지는가.

개선 방향

WAI-ARIA 탭 패턴 적용: roving tabindex, 화살표 이동, Home/End, 자동/수동 실행.

Tab → 탭 줄(선택 탭) → 패널 순 초점 흐름 구현.

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

역할	책임
퍼블리셔/개발	WAI-ARIA 탭 키보드 패턴 구현
접근성 담당	키보드만으로 탭 탐색·실행 검증

기관 유형	CP-235 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (탭 위젯 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탭 줄에서 화살표 키로 탭 사이를 이동하나요(수평 좌우/수직 상하)?

□ 자동 또는 Enter/Space로 탭이 선택되고 패널이 바뀌나요?

□ Tab 한 번에 선택 탭 하나에만 초점이 가고 패널로 이어지나요(roving tabindex)?

❓ FAQ

Q1. 탭을 Tab으로 다 거치면 안 되나요? 탭이 많으면 Tab을 수없이 눌러야 합니다. roving tabindex로 Tab 한 번에 선택 탭만 닿고, 탭 사이는 화살표로 이동하는 게 표준입니다. Q2. 자동 활성화와 수동 활성화 중 뭐가 맞나요? 패널이 가벼우면 자동(화살표 이동 시 즉시 전환), 무거우면 수동(Enter로 선택)이 적합합니다. Q3. 수직 탭은 화살표가 다른가요? 네. 수평은 좌우, 수직은 상하 화살표로 이동합니다(배열에 맞춰).

6. 마무리

CP-235의 메시지:

화살표로 탭을 넘나들게 — 탭을 키보드로 탐색·실행 가능하게 하라.

탭 위젯은 WAI-ARIA 탭 패턴(roving tabindex, 화살표 이동, 자동/수동 실행)에 맞춰 키보드 조작을 구현해야 키보드 사용자가 콘텐츠를 전환하죠. 표준 패턴을 따라야 효율적입니다. 다음 편은 그 키보드 초점의 표시입니다.

다음 편 예고 ▶ 「356. (CP-236) 탭의 키보드 초점이 명확하게 표시되도록 하고 있다.」

ViewCheck는 탭이 키보드로 탐색·실행 가능한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭(Tab) 가이드 — https://www.krds.go.kr/html/site/component/component_21.html

WAI-ARIA APG — Tabs Pattern (Keyboard) — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

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

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