결과가 바뀌어도 초점은 그 자리

KRDS BP-104 — 필터링·정렬 결과를 즉각적으로 표시할 때, 키보드 초점은 값을 변경하거나 선택한 옵션 항목에 유지하고 있다.

0. 들어가며 — 필터링·정렬 그룹의 마지막

이번 670편은 필터링·정렬 결과를 즉각 표시할 때, 키보드 초점을 값을 변경·선택한 옵션 항목에 유지하라는 규칙입니다. 필터링·정렬 그룹(BP-089~104, 16개)의 마지막이죠.

옵션을 골라 결과가 즉각 바뀔 때(BP-100), 초점이 — 엉뚱한 데로 튀거나 사라지면 키보드·스크린 리더 사용자가 길을 잃죠. BP-104는 초점을 변경한 옵션에 유지하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 즉각 표시 시 초점 유지

BP-104 (기본 패턴 > 필터링·정렬) “필터링·정렬 결과를 즉각적으로 표시할 때, 키보드 초점은 값을 변경하거나 선택한 옵션 항목에 유지하고 있다.”

결과를 즉각 표시할 때 키보드 초점을 변경·선택한 옵션 항목에 유지하라는 뜻입니다.

정리: 즉각 표시 시 초점을 변경한 옵션에 유지하라. 이게 BP-104입니다.

2. 왜 초점 유지인가

BP-100에서 옵션을 선택·변경하면 결과를 즉각 갱신한다고 했죠. 이때 결과 목록(DOM)이 다시 그려지는데, 그 과정 에서 키보드 초점이 어떻게 되느냐가 중요합니다. BP-104는 초점을 변경한 옵션에 유지하라고 합니다.

초점이 유실·이동될 때의 문제:

초점 사라짐 결과를 즉각 갱신하며 DOM을 다시 그리면, 키보드 초점이 사라지는(body로 튀는) 경우가 있습니다. 그러면 키보드 사용자는, 다음 동작을 어디서 해야 할지 잃죠. Tab을 처음부터 다시 눌러야 합니다.

엉뚱한 곳으로 이동 초점이 결과 맨 위나 엉뚱한 데로 튀면, 사용자는 방금 바꾼 옵션으로 돌아가기 어렵습니다. 연속으로 필터를 조정하기 힘들죠.

스크린 리더 혼란 초점이 유실되면, 스크린 리더 사용자는 맥락을 잃습니다. 방금 무엇을 했는지, 지금 어디 있는지 모르죠.

그래서 BP-104는 — 초점 유지를 요구합니다:

변경한 옵션에 유지 결과를 즉각 갱신해도, 키보드 초점을 방금 값을 변경·선택한 옵션 항목에 그대로 둡니다. 사용자가 그 옵션에서, 바로 다음 조정(다른 옵션으로 이동, 같은 옵션 재변경)을 이어가게요.

연속 조작 가능 초점이 유지되니 사용자가, 여러 옵션을 연속으로 조정하기 쉽습니다. 매번 처음부터 Tab을 누를 필요가 없죠.

DOM 갱신 시 초점 관리 결과 목록만 갱신하고, 필터 컨트롤(옵션)은 DOM에서 유지하거나, 갱신 후 초점을 같은 옵션에 복원합니다. 프레임워크(React 등)에서 key 관리·focus 복원으로요.

즉각 표시(BP-100)의 접근성 완성. BP-100(즉각 표시)은 시각 사용자에겐 편하지만, 키보드·스크린 리더 사용자에겐 초점 관리가 안 되면 오히려 혼란입니다. BP-103(결과 수 aria-live) + BP-104(초점 유지)가 즉각 표시의 접근성을 완성하죠. 결과 변화를 듣고(103), 초점은 유지되어(104) 연속 조작하게요.

WCAG 연계. 초점 순서·관리(WCAG 2.4.3) + 입력 시 변화(3.2.2)와 연결됩니다. 동적 갱신이 — 초점을 함부로 옮기면 안 되죠. 사용자의 — 현재 위치를 존중합니다.

필터링·정렬 그룹의 마무리. 필터링·정렬 그룹(BP-089~104)은 노출(089)·선택 구분(090)·적용 단서(091)·명명(092· 093)·배치(094·095·096)·필터 선정(097·098)·해제(099)·적용 방식(100·101)·모바일(102)·접근성(103·104)까지 필터· 정렬 전반을 다뤘죠. BP-104는 동적 접근성의 마지막입니다.

이 규칙은 필터링·정렬의 ’동적 갱신 초점 관리’를 담당합니다 — 즉각 표시 시 초점을 변경한 옵션에 유지해(104), 키보드· 스크린 리더 사용자가 길을 잃지 않고 연속 조작하게 하죠. 필터링·정렬 그룹의 마무리입니다.

정리하면 — 결과를 즉각 갱신할 때 초점이 유실·이동되면 키보드·스크린 리더 사용자가 길을 잃으므로, 키보드 초점을 값을 변경·선택한 옵션 항목에 유지해 연속 조작하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 유지 — 결과 즉각 갱신 시 초점이 변경한 옵션에 유지되는가.

초점 유실 없음 — 초점이 사라지거나(body로 튐) 엉뚱한 데로 이동하지 않는가.

연속 조작 — 키보드로 여러 옵션을 연속 조정할 수 있는가.

개선 방향

결과 갱신 후 초점을 변경한 옵션에 유지·복원(프레임워크 key·focus 관리).

초점 유실 방지(WCAG 2.4.3). BP-103(aria-live)과 함께 즉각 표시 접근성.

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

역할	책임
개발	동적 갱신 초점 관리 구현
QA/접근성	키보드 초점 유지 검증

기관 유형	BP-104 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (즉각 표시 필터·정렬)

웹접근성 의무 대상이며 즉각 표시 필터·정렬을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 결과 즉각 갱신 시 초점이 변경한 옵션에 유지되나요?

□ 초점이 사라지거나 엉뚱한 데로 이동하지 않나요?

□ 키보드로 여러 옵션을 연속 조정할 수 있나요?

❓ FAQ

Q1. 초점이 왜 유실되나요? 결과를 즉각 갱신하며 DOM을 다시 그리면, 초점이 사라져(body로 튐) 키보드 사용자가 위치를 잃죠. 갱신 후 초점을 같은 옵션에 복원해야 합니다. Q2. BP-103(aria-live)과 어떻게 함께 가나요? BP-103은 결과 변화를 듣게(aria-live), BP-104는 초점을 유지하게 합 니다. 둘이 함께 즉각 표시(BP-100)의 접근성을 완성하죠. 듣고 + 위치 유지로요. Q3. 프레임워크에서 어떻게 구현하나요? React 등에서 결과 목록만 갱신하고 필터 컨트롤은 유지하거나, 갱신 후 key 관리 ·focus 복원으로 같은 옵션에 초점을 되돌립니다(WCAG 2.4.3).

6. 마무리

BP-104의 메시지:

결과가 바뀌어도 초점은 그 자리 — 즉각 표시 시 초점을 변경한 옵션에 유지하라.

결과를 즉각 갱신할 때 초점이 유실되면 키보드·스크린 리더 사용자가 길을 잃습니다. 초점을 변경한 옵션에 유지해 연속 조작하게 하는 게 핵심이죠. 필터링·정렬 그룹(BP-089~104)이 끝났습니다. 다음 편부터는 BP의 마지막 그룹 ’확인’입니다.

다음 편 예고 ▶ 「671. (BP-105) 확인 그룹 시작 — BP 마지막 그룹」

ViewCheck는 즉각 표시 시 키보드 초점이 변경한 옵션에 유지되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 필터링·정렬 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_10.html

WCAG 2.1 SC 2.4.3 Focus Order / 3.2.2 On Input — https://www.w3.org/WAI/WCAG21/Understanding/

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

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