초점과 선택을 구별하라

KRDS CP-236 — 탭의 키보드 초점이 명확하게 표시되도록 하고 있다.

0. 들어가며 — 어느 탭에 초점이 있는지

이번 356편은 탭의 키보드 초점이 명확하게 표시되도록 하라는 규칙입니다.

앞 편(CP-235)에서 화살표로 탭 사이를 이동하게 했습니다. 그런데 화살표로 초점을 옮겨도, 지금 어느 탭에 초점이 있는지 시각적으로 안 보이면 키보드 사용자는 위치를 잃죠. 게다가 탭은 ‘초점’과 ’선택’ 두 상태가 있어, 이 둘이 구별돼야 합니다. CP-236은 키보드 초점을 또렷이 표시하라고 규정합니다. 구조화 목록 CP-149, 달력 CP-168 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 키보드 초점 명확 표시

CP-236 (컴포넌트 > 탭) “탭의 키보드 초점이 명확하게 표시되도록 하고 있다.”

탭에 키보드 초점이 갔을 때 그 위치가 시각적으로 또렷이 보이게 표시하고, ‘초점’ 상태와 ‘선택’ 상태가 구별되게 하라는 뜻입니다.

정리: 탭의 키보드 초점을 명확히 표시하고 선택 상태와 구별하라. 이게 CP-236입니다.

2. 왜 초점 표시가 중요한가

초점 표시는 키보드 사용자의 ‘마우스 커서’입니다(구조화 목록 CP-149, 달력 CP-168에서 반복). 키보드로 초점을 옮기며 조작하는데, ’지금 초점이 어디 있는지’ 안 보이면 위치를 잃고 잘못 실행하죠. 탭 위젯에서는 이 초점 표시가 특히 중요하고, 한 가지 특별한 고려가 더 있습니다 — 초점과 선택의 구별.

① 초점 가시성 — 기본. 화살표 키로 탭 사이를 이동할 때(CP-235), 현재 초점이 있는 탭이 또렷이 표시돼야 키보드 사용자가 ’지금 이 탭에 있다’를 압니다. 초점 표시가 없거나 흐릿하면 — 화살표를 눌러도 어느 탭에 있는지 몰라 길을 잃죠. 표준은 포커스 링(외곽선)입니다. outline: none만 하고 대체 스타일을 안 주는 안티패턴을 피 하고, 또렷한 외곽선·테두리로 초점을 표시하죠. 충분한 대비(비텍스트 3:1)·크기로요(WCAG SC 2.4.13 Focus Appearance).

② 초점 vs 선택 구별 — 탭 특유의 고려. 탭 위젯에는 두 가지 상태가 공존합니다:

선택(selected) — 현재 활성화되어 그 콘텐츠(패널)가 보이는 탭. aria-selected="true"(CP-234), 밑줄· 배경 등으로 표시.

초점(focus) — 키보드 초점이 현재 있는 탭. 화살표로 이동 중인 탭.

이 둘은 다를 수 있습니다. 특히 수동 활성화(CP-235) 방식에서 사용자가 화살표로 초점을 옮기면(초점은 이동) 아직 선택은 안 되죠(Enter를 눌러야 선택). 그래서 ‘초점은 B 탭에 있지만 선택은 여전히 A 탭’인 상태가 생깁니다. 이때 초점 표시와 선택 표시가 시각적으로 구별돼야 사용자가 ’지금 B에 초점이 있고(아직 선택 안 됨), 선택은 A다’를 인지하죠. 둘이 똑같이 표시되면 사용자가 ’내가 B를 선택한 건가?’ 헷갈립니다.

그래서 — 초점은 외곽선(focus ring)으로, 선택은 밑줄·배경(CP-234)으로 다른 시각 표시를 줍니다. 초점 받은 탭에는 외곽선이, 선택된 탭에는 밑줄·배경이 있어, 둘이 같은 탭이면 둘 다 보이고 다른 탭이면 각각 보이죠. 사용 자는 ‘외곽선 = 지금 초점’, ’밑줄/배경 = 현재 선택’으로 구별합니다. (자동 활성화 방식에서는 초점=선택이 항상 같이 가지만, 그래도 초점 표시 자체는 명확해야 하죠.)

이 ‘초점과 선택의 구별’은 달력에서 본 ’초점 표시 vs 선택 표시 vs 오늘 표시 구별’(CP-168)과 같은 정신입니다 — 여러 상태가 겹치는 위젯에서 각 상태를 시각적으로 구별해야 하죠.

이 규칙은 CP-235(키보드 탐색·실행)와 짝입니다 — 화살표로 탭을 이동하고(235), 그 초점이 명확히 보이며(236), 선택과 구별되면, 키보드 사용자가 탭을 정확히 조작하죠. 그리고 CP-237(역할·관계 ARIA)이 스크린 리더에 구조를 전달해 탭 접근성을 완성합니다.

정리하면 — 탭의 키보드 초점은 또렷이 표시돼야 키보드 사용자가 위치를 알고, ’초점’과 ’선택’이 다른 상태이므로 시각적으로 구별해 혼동을 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 가시성 — 키보드 초점이 간 탭에 또렷한 표시(외곽선 등)가 보이는가.

초점-선택 구별 — 초점 표시와 선택 표시가 시각적으로 구별되는가(특히 수동 활성화).

대비·크기 — 초점 표시가 충분한 대비·크기로 또렷한가.

개선 방향

초점에 또렷한 포커스 링(외곽선) 제공(outline:none만 두지 않기, :focus-visible).

초점(외곽선) vs 선택(밑줄·배경, CP-234)을 다른 표시로 구별. 대비 확보.

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

역할	책임
디자이너	초점·선택 구별 시각 표시 정의
퍼블리셔/개발	포커스 링·초점-선택 구별 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 키보드 초점이 간 탭에 또렷한 표시(외곽선 등)가 보이나요?

□ 초점 표시와 선택 표시가 시각적으로 구별되나요(특히 수동 활성화)?

□ 초점 표시가 충분한 대비·크기로 또렷한가요?

❓ FAQ

Q1. 초점과 선택이 왜 달라요? 수동 활성화에선 화살표로 초점만 옮기고(초점 이동) Enter로 선택합니다. 그래서 ’초점은 B, 선택은 A’가 될 수 있죠. Q2. 둘을 어떻게 구별하나요? 초점은 외곽선(focus ring), 선택은 밑줄·배경(CP-234)으로 다르게 표시합니다. Q3. 포커스 링이 디자인을 해쳐요. :focus-visible로 키보드 때만 표시하거나 대체 스타일을 줍니다. 그냥 지우면 키보드 사용자가 위치를 잃죠.

6. 마무리

CP-236의 메시지:

초점과 선택을 구별하라 — 탭의 키보드 초점을 명확히 표시하라.

탭의 키보드 초점이 안 보이면 사용자가 위치를 잃습니다. 또렷한 포커스 링으로 표시하되, ‘초점’(이동 중)과 ‘선택’ (활성)은 다른 상태이므로 시각적으로 구별해 혼동을 막죠. 다음 편은 탭 그룹의 마지막 — 역할·관계 ARIA입니다.

다음 편 예고 ▶ 「357. (CP-237) 탭과 패널의 역할 및 관계를 스크린 리더로 확인할 수 있도록 하고 있다.」

ViewCheck는 탭의 키보드 초점이 명확히 표시되고 선택과 구별되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.2 SC 2.4.13 Focus Appearance — https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

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

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