제안도 키보드로 골라서

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

0. 들어가며 — 추천 검색어를 마우스로만 고를 수 있으면

이번 701편은 검색어가 표시되는 콘텐츠 영역에 키보드 및 보조 기술이 접근하여 자동완성이나 추천 검색어를 활용할 수 있게 하라는 규칙입니다.

자동완성·추천 검색어 목록을 — 마우스로만 고를 수 있으면, 키보드·스크린 리더 사용자는 그 편리한 기능을 못 쓰죠. SP-027은 제안 영역을 키보드·보조기술로 활용하게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 제안 영역 키보드·보조기술 활용

SP-027 (서비스 패턴 > 검색 > 검색어 입력) “검색어가 표시되는 콘텐츠 영역에 키보드 및 보조 기술이 접근하여 자동완성이나 추천 검색어를 활용할 수 있게 하고 있다.”

자동완성·추천 검색어 영역을 키보드·보조기술로 활용할 수 있게 하라는 뜻입니다.

정리: 자동완성·추천 검색어를 키보드·보조기술로 활용하게 하라. 이게 SP-027입니다.

2. 왜 제안 영역 활용인가

자동완성·추천 검색어(SP-022·023)는 검색을 돕는 편리한 기능입니다. 입력 중 제안 목록이 뜨고, 사용자가 거기서 고르면 빠르게 검색하죠. 그런데 이 제안을 마우스로만 고를 수 있으면, 키보드·스크린 리더 사용자는 그 편리함을 못 누립니다. SP-027은 제안 영역의 키보드·보조기술 활용을 요구합니다.

제안이 마우스 전용일 때의 문제:

제안 활용 불가 자동완성·추천 목록이, 마우스 클릭으로만 선택되면, 키보드 사용자는 그 제안을 못 고릅니다. 편리한 기능에서 배제되죠. 일일이 다 타이핑해야 합니다.

스크린 리더 접근 불가 제안 목록을 스크린 리더가 접근 못 하면, 시각 장애 사용자는 무슨 제안이 떴는지, 어떻게 고르는지 모릅니다.

그래서 SP-027은 — 키보드·보조기술 활용을 요구합니다:

키보드로 제안 이동·선택 입력 도중 제안 목록이 뜨면, 키보드 화살표(↑↓)로 제안 항목을 이동하고, Enter로 선택하게요. 입력 필드에 포커스를 유지한 채, 화살표로 제안을 오가는 패턴이죠(combobox 패턴).

보조기술 접근 스크린 리더가 제안 목록에 접근해, 각 제안을 읽고 선택하게요. 제안 영역을, 스크린 리더가 탐색 가능한 구조로요(SP-028 탐지와 연계).

ARIA combobox 패턴 자동완성은 WAI-ARIA의 combobox 패턴으로 구현합니다. role="combobox", aria- expanded, aria-controls, aria-activedescendant(현재 강조 제안) 등으로 키보드·스크린 리더가 제안을 활용하게요.

선택 시 입력 반영 제안을 고르면(키보드든 마우스든), 그 검색어가 입력 필드에 채워지거나 바로 검색되게요.

combobox 패턴. 자동완성 검색은 표준 combobox(콤보박스) 디자인 패턴을 따릅니다. 입력 필드 + 동적 제안 목록의 조합이죠. ARIA combobox 속성으로, 키보드·스크린 리더가 제안 영역을 표준 방식으로 활용하게 합니다. 표준 패턴을 따르면 접근성이 확보되죠.

SP-026·027·028의 연결. SP-026(전 과정 키보드)·SP-027(제안 활용)·SP-028(제안 탐지)이 — 함께 자동완성 접근성을 완성합니다. 제안을 — 키보드로 고르고(027), 그 출현을 스크린 리더가 알며(028), 전 과정이 키보드로(026)요.

이 규칙은 검색(SP)의 ’제안 영역 접근성’을 담당합니다 — 자동완성·추천 검색어를 키보드·보조기술로 활용하게 해(027), 모든 사용자가 그 편리한 기능을 누리게 하죠.

정리하면 — 자동완성·추천 제안을 마우스로만 고를 수 있으면 키보드·스크린 리더 사용자가 그 기능을 못 쓰므로, ARIA combobox 패턴으로 키보드 화살표 이동·Enter 선택·보조기술 접근이 가능하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 선택 — 제안 목록을 화살표(↑↓)로 이동하고 Enter로 선택하는가.

보조기술 접근 — 스크린 리더가 제안 목록에 접근·선택하는가.

combobox 패턴 — ARIA combobox 속성(aria-expanded/activedescendant 등)을 쓰는가.

개선 방향

제안 목록 키보드 화살표 이동·Enter 선택(입력 포커스 유지).

ARIA combobox 패턴(role·aria-expanded/controls/activedescendant). SP-028 탐지와 함께.

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

역할	책임
퍼블리셔/개발	combobox 패턴·키보드 구현
QA/접근성	제안 키보드·스크린 리더 검증

기관 유형	SP-027 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (자동완성 제공 시)

자동완성·추천 검색어를 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제안 목록을 화살표(↑↓)로 이동하고 Enter로 선택하나요?

□ 스크린 리더가 제안 목록에 접근·선택하나요?

□ ARIA combobox 속성을 쓰나요(aria-expanded/activedescendant 등)?

❓ FAQ

Q1. 제안을 마우스로만 고를 수 있으면 왜 문제인가요? 키보드·스크린 리더 사용자가 그 편리한 자동완성·추천을 못 씁니다. 일일이 다 타이핑해야 하죠. 키보드 화살표·Enter로 고르게 해야 합니다. Q2. combobox 패턴이 뭔가요? 입력 필드 + 동적 제안 목록의 표준 디자인 패턴입니다. ARIA combobox 속성(role, aria-expanded, aria-activedescendant 등)으로 키보드·스크린 리더가 제안을 활용하게 하죠. Q3. SP-026·028과 어떻게 연결되나요? SP-026(전 과정 키보드)·SP-027(제안 활용)·SP-028(제안 탐지)이 함께 자동완성 접근성을 완성합니다. 고르고(027)·알고(028)·전 과정 키보드(026)로요.

6. 마무리

SP-027의 메시지:

제안도 키보드로 골라서 — 자동완성·추천 검색어를 키보드·보조기술로 활용하게 하라.

제안을 마우스로만 고를 수 있으면 키보드·스크린 리더 사용자가 그 기능을 못 씁니다. ARIA combobox 패턴으로 키보드·보조 기술 활용을 보장하는 게 핵심이죠. 다음 편은 제안창 출현·내용 스크린 리더 탐지입니다.

다음 편 예고 ▶ 「702. (SP-028) 실시간 검색어 입력 도움창의 출현 여부 및 추천 검색어를 스크린 리더가 탐지할 수 있게 되어 있다.」

ViewCheck는 자동완성·추천 검색어가 키보드·보조기술로 활용 가능한지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 검색 가이드 — https://www.krds.go.kr/html/site/service/service_02.html

WAI-ARIA Combobox Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

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

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