검색 전 과정을 키보드로

KRDS SP-026 — 검색어 입력/실행 관련 대화형 요소는 키보드로 접근과 조작이 가능하도록 구현되어 있다.

0. 들어가며 — 700편, 검색을 키보드만으로 끝까지

이번 700편은 검색어 입력/실행 관련 대화형 요소는 키보드로 접근과 조작이 가능하도록 구현하라는 규칙입니다.

SP-015(돋보기 키보드)에 이어, 검색의 모든 대화형 요소 — 입력 필드, 실행 버튼, 범위 필터, 삭제 버튼, 제안 항목 까지 — 키보드로 써야 합니다. SP-026은 검색 전 과정의 키보드 조작을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 검색 대화형 요소 키보드 조작

SP-026 (서비스 패턴 > 검색 > 검색어 입력) “검색어 입력/실행 관련 대화형 요소는 키보드로 접근과 조작이 가능하도록 구현되어 있다.”

검색 입력·실행 관련 대화형 요소를 키보드로 접근·조작 가능하게 구현하라는 뜻입니다.

정리: 검색의 모든 대화형 요소를 키보드로 접근·조작하게 하라. 이게 SP-026입니다.

2. 왜 검색 전 과정 키보드인가

검색은 여러 대화형 요소로 이뤄집니다: 검색어 입력 필드, 실행(돋보기) 버튼, 범위 필터, 검색어 삭제(×) 버튼, 자동 완성·추천 제안 항목 등이요. 이 모든 요소가 키보드로 조작돼야, 키보드 사용자가 검색을 끝까지 합니다. SP-026 은 전 과정 키보드 조작을 요구합니다.

SP-015와의 관계. SP-015는 돋보기 아이콘 하나의 키보드 접근이었죠. SP-026은 검색의 모든 대화형 요소로 확장합니다. 돋보기뿐 아니라 입력·필터·삭제·제안까지 전부요.

일부 요소만 키보드 안 될 때의 문제:

중간에 막힘 검색어 입력은 되는데, 범위 필터나 제안 선택이 키보드로 안 되면, 키보드 사용자는 거기서 막힙니다. 검색을 완성 못 하죠.

마우스 강제 일부 요소가 마우스 전용이면, 키보드 사용자는 그 기능을 못 씁니다(범위 좁히기, 제안 고르기 등).

그래서 SP-026은 — 전 과정 키보드 조작을 요구합니다:

입력 필드 — 검색어 — 입력 필드에 Tab으로 포커스, 타이핑·수정이 키보드로요(기본 제공되나 커스텀 시 확인).

실행 버튼 돋보기·검색 버튼을 Enter/Space로 실행(SP-015). 입력 필드에서 Enter로도 검색 실행되게요.

범위 필터 — 범위 — 필터(라디오·드롭다운)를 키보드로 선택(화살표·Enter)하게요.

삭제 버튼 — 검색어 — 삭제(×) 버튼을 Tab·Enter로요.

제안 항목 선택 자동완성·추천 제안 목록을, 키보드 화살표(↑↓)로 이동하고 Enter로 선택하게요(SP-027). 이게 특히 자주 누락되죠.

포커스 표시 — 모든 — 포커스 가능 요소에 명확한 포커스 표시(WCAG 2.4.7).

WCAG 2.1.1 키보드. 모든 기능을 키보드로(WCAG 2.1.1). 검색은 핵심 기능이므로, 전 과정이 키보드로 가능해야 하죠. 진짜 시맨틱 요소(<input>, <button>)를 쓰면 키보드 작동이 기본 제공됩니다. 커스텀 위젯이면 키 이벤트 ·role·tabindex를 직접 처리해야 하고요.

검색 접근성의 종합. SP-015(돋보기)·SP-025(이름)·SP-026(키보드 조작)·SP-027(제안 활용)·SP-028(제안 탐지)·SP-029 (논리 순서)가 — 함께 검색 접근성을 완성합니다. SP-026은 — 그중 ’전 과정 키보드 조작’의 핵심이죠.

이 규칙은 검색(SP)의 ’검색 전 과정 키보드’를 담당합니다 — 검색의 모든 대화형 요소를 키보드로 접근·조작하게 해(026), 키보드 사용자가 검색을 끝까지 완성하게 하죠.

정리하면 — 검색 일부 요소만 키보드로 안 되면 키보드 사용자가 중간에 막히므로, 입력·실행·필터·삭제·제안 선택 등 검색의 모든 대화형 요소를 키보드로 접근·조작(포커스 표시 포함) 가능하게 구현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

전 요소 키보드 — 입력·실행·필터·삭제·제안이 모두 키보드로 조작되는가.

제안 선택 — 제안 목록을 화살표·Enter로 선택할 수 있는가(SP-027).

포커스 표시 — 모든 포커스 요소에 명확한 표시가 있는가(WCAG 2.4.7).

개선 방향

검색 전 과정 키보드 조작(입력·실행·필터·삭제·제안). 진짜 시맨틱 요소.

제안 화살표·Enter 선택. 포커스 표시(WCAG 2.1.1/2.4.7).

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

역할	책임
퍼블리셔/개발	검색 키보드 조작 구현
QA/접근성	전 과정 키보드 검증

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

웹접근성 의무 대상이며 검색을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력·실행·필터·삭제·제안이 모두 키보드로 조작되나요?

□ 제안 목록을 화살표·Enter로 선택할 수 있나요(SP-027)?

□ 모든 포커스 요소에 명확한 표시가 있나요(WCAG 2.4.7)?

❓ FAQ

Q1. SP-015와 뭐가 다른가요? SP-015는 돋보기 아이콘 하나, SP-026은 검색의 모든 대화형 요소(입력·필터·삭제·제안) 입니다. 전 과정을 키보드로 쓰게 확장한 거죠. Q2. 자주 누락되는 게 뭔가요? 자동완성·추천 제안 목록의 키보드 선택입니다. 화살표(↑↓)로 이동하고 Enter로 선택 되게 해야 하는데, 마우스 전용으로 두는 실수가 흔하죠(SP-027). Q3. 어떻게 키보드 조작을 보장하나요? 진짜 시맨틱 요소(<input>·<button>)를 쓰면 기본 제공됩니다. 커스텀 위젯 이면 키 이벤트·role·tabindex를 직접 처리하죠(WCAG 2.1.1).

6. 마무리

SP-026의 메시지:

검색 전 과정을 키보드로 — 검색의 모든 대화형 요소를 키보드로 접근·조작하게 하라.

일부 요소만 키보드로 안 되면 키보드 사용자가 중간에 막힙니다. 입력·실행·필터·삭제·제안까지 전 과정을 키보드로 조작 하게 하는 게 핵심이죠. 다음 편은 제안 영역 키보드·보조기술 활용입니다.

다음 편 예고 ▶ 「701. (SP-027) 검색어가 표시되는 콘텐츠 영역에 키보드 및 보조 기술이 접근하여 자동완성이나 추천 검색어를 활용할 수 있게 하고 있다.」

ViewCheck는 검색의 모든 대화형 요소가 키보드로 조작되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 검색 가이드 — https://www.krds.go.kr/html/site/service/service_02.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컴포넌트,웹표준