한꺼번에 적용, 키보드로도

KRDS BP-101 — ‘적용’, ‘조회’ 버튼에서 Enter 키나 Space 키에 대해 Keyup 이벤트가 발생하거나, Click 이벤트가 발생하였을 때 사용자가 설정한 옵션을 일괄 표시하고 있다.

0. 들어가며 — 여러 옵션을 한 번에 적용하려면

이번 667편은 ‘적용’·‘조회’ 버튼에서 Enter/Space Keyup 또는 Click 이벤트 시 사용자가 설정한 옵션을 일괄 표시 하라는 규칙입니다.

옵션이 많을 때 — 매번 즉각 반영(BP-100)보다, 여러 개를 정하고 ’적용’으로 한 번에 거는 게 나을 때가 있죠. 그 버튼이 — 키보드(Enter/Space)로도 작동해야 하고요. BP-101은 일괄 적용 + 키보드 작동을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 적용 버튼 일괄 표시 (키보드 포함)

BP-101 (기본 패턴 > 필터링·정렬) “‘적용’, ‘조회’ 버튼에서 Enter 키나 Space 키에 대해 Keyup 이벤트가 발생하거나, Click 이벤트가 발생하였을 때 사용자가 설정한 옵션을 일괄 표시하고 있다.”

적용·조회 버튼이 키보드(Enter/Space)와 클릭 모두에서 작동해 설정 옵션을 일괄 표시하라는 뜻입니다.

정리: 적용·조회 버튼을 키보드·클릭으로 작동시켜 옵션을 일괄 표시하라. 이게 BP-101입니다.

2. 왜 일괄 표시 + 키보드인가

BP-100은 옵션 변경 시 즉각 반영이었습니다. BP-101은 여러 옵션을 정한 뒤 ‘적용/조회’ 버튼으로 일괄 반영 하는 방식이죠. 그리고 그 버튼이 키보드로도 작동해야 함을 강조합니다.

일괄 적용 방식이 필요한 경우:

옵션이 많을 때 여러 필터를 정해야 하면, 매 선택마다 즉각 조회(BP-100)는 부하가 큽니다(매번 서버 조회). 여러 개를 다 정하고 한 번에 적용하는 게 효율적이죠.

의도적 적용 사용자가 조건을 다 정한 뒤 ’적용’을 누를 때 반영되니, 중간 상태로 원치 않는 조회가 안 됩니다.

부하 감소 — 한 번의 조회로 — 여러 조건을 반영하니, 서버·네트워크 부하가 적죠.

키보드 작동의 강조(이 규칙의 핵심). BP-101은 — 특히 키보드 작동을 명시합니다:

Enter/Space Keyup ‘적용’·‘조회’ 버튼이 키보드의 Enter 키나 Space 키로 작동해야 합니다. 버튼에 포커스를 두고 Enter·Space를 누르면(Keyup), 클릭과 동일하게 옵션이 일괄 적용되죠.

Click 이벤트 — 마우스 클릭으로도 — 당연히 작동하고요.

키보드·마우스 동등 마우스로 할 수 있는 걸, 키보드로도 똑같이 할 수 있어야 합니다(WCAG 2.1.1 키보드). ‘적용’ 버튼이 클릭으로만 작동하고 키보드로 안 되면, 키보드 사용자는 필터를 적용 못 하죠.

왜 이 규칙이 키보드를 짚나. 종종 버튼을 <div>+클릭 이벤트로만 구현해, 키보드로는 작동 안 하는 경우가 있습 니다. 진짜 <button>을 쓰거나, 커스텀이면 Enter/Space 키 이벤트를 반드시 처리해야, 키보드 사용자가 적용하죠. BP-101은 이 흔한 접근성 실수를 막습니다.

즉각(BP-100) vs 일괄(BP-101) 선택. 데이터·옵션 특성에 맞게:

즉각(BP-100) — 단일·소수 옵션, 빠른 탐색.

일괄(BP-101) — 다수 옵션, 부하 관리, 의도적 적용.

어느 방식이든 — 키보드 작동(2.1.1)·접근성(BP-103·104)은 필수입니다.

접근성 종합. 일괄 적용 후에도 — 결과 변경을 스크린 리더에 알리고(aria-live, BP-103), 초점을 적절히 관리(BP-104) 해야 하죠.

이 규칙은 필터링·정렬의 ’일괄 적용 + 키보드 작동’을 담당합니다 — 적용·조회 버튼이 키보드·클릭으로 작동해 옵션을 일괄 표시하게 해(101), 여러 옵션을 효율적으로, 모든 입력 수단으로 적용하게 하죠.

정리하면 — 옵션이 많으면 일괄 적용이 효율적이고, 그 적용·조회 버튼은 키보드(Enter/Space)와 클릭 모두에서 작동해야 키보드 사용자도 필터를 적용하므로, 일괄 표시 + 키보드 작동을 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

일괄 적용 — ‘적용’·‘조회’ 버튼으로 설정 옵션이 일괄 반영되는가.

키보드 작동 — 버튼이 Enter/Space(Keyup)로도 작동하는가(클릭만 아님).

접근성 — 적용 후 결과 변경 안내(BP-103)·초점 관리(BP-104)가 되는가.

개선 방향

다수 옵션은 ‘적용/조회’ 버튼으로 일괄 반영. 진짜 <button> 사용.

Enter/Space 키 이벤트 처리(WCAG 2.1.1). aria-live(BP-103)·초점(BP-104).

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

역할	책임
개발	버튼 키보드·일괄 적용 구현
QA/접근성	키보드 작동 검증

기관 유형	BP-101 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 적용·조회 버튼을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ ‘적용’·‘조회’ 버튼으로 설정 옵션이 일괄 반영되나요?

□ 버튼이 Enter/Space(Keyup)로도 작동하나요(클릭만 아님)?

□ 적용 후 결과 변경 안내(BP-103)·초점 관리(BP-104)가 되나요?

❓ FAQ

Q1. 일괄 적용이 즉각(BP-100)보다 나은가요? 옵션이 많거나 매 변경마다 조회가 부담일 때 낫습니다. 여러 개를 정하고 한 번에 적용해 부하를 줄이죠. 단일·소수 옵션엔 즉각이 직관적이고요. Q2. 왜 키보드 작동을 강조하나요? 버튼을 <div>+클릭으로만 구현하면 키보드로 작동 안 합니다. 키보드 사용자가 필터를 못 걸죠. 진짜 <button>이나 Enter/Space 처리로 작동시켜야 합니다(WCAG 2.1.1). Q3. 적용 후 접근성은요? 결과 변경을 aria-live로 스크린 리더에 알리고(BP-103), 초점을 적절히 관리(BP-104)합니다. 적용으로 결과만 바뀌고 안내가 없으면 스크린 리더 사용자는 모르죠.

6. 마무리

BP-101의 메시지:

한꺼번에 적용, 키보드로도 — 적용·조회 버튼을 키보드·클릭으로 작동시켜 옵션을 일괄 표시하라.

옵션이 많으면 일괄 적용이 효율적이고, 그 버튼은 키보드(Enter/Space)로도 작동해야 키보드 사용자도 필터를 겁니다. 일괄 표시 + 키보드 작동이 핵심이죠. 다음 편은 모바일 필터 축약 버튼입니다.

다음 편 예고 ▶ 「668. (BP-102) [모바일] 화면 너비가 충분하지 않은 경우, 필터링·정렬 컨트롤 버튼을 축약하여 우측 상단에 제공한다.」

ViewCheck는 적용·조회 버튼의 키보드 작동과 옵션 일괄 표시를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 필터링·정렬 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_10.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컴포넌트,웹표준