제안이 떴다고 알리기

KRDS SP-028 — 실시간 검색어 입력 도움창의 출현 여부 및 추천 검색어를 스크린 리더가 탐지할 수 있게 되어 있다.

0. 들어가며 — 제안창이 떴는데 스크린 리더는 모르면

이번 702편은 실시간 검색어 입력 도움창의 출현 여부 및 추천 검색어를 스크린 리더가 탐지할 수 있게 하라는 규칙 입니다.

입력 중 자동완성 제안창이 떠도, 스크린 리더 사용자가 — 그게 떴는지, 무슨 제안이 있는지 모르면 못 쓰죠. SP-028은 제안창 출현·내용의 스크린 리더 탐지를 규정합니다. SP-027(키보드 활용)의 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 제안창 출현·추천 스크린 리더 탐지

SP-028 (서비스 패턴 > 검색 > 검색어 입력) “실시간 검색어 입력 도움창의 출현 여부 및 추천 검색어를 스크린 리더가 탐지할 수 있게 되어 있다.”

제안창의 출현 여부와 추천 검색어를 스크린 리더가 탐지할 수 있게 하라는 뜻입니다.

정리: 제안창 출현·내용을 스크린 리더가 탐지하게 하라. 이게 SP-028입니다.

2. 왜 제안창 탐지인가

SP-027은 제안을 키보드로 활용하는 것이었죠. SP-028은 그 제안창의 출현·내용을 스크린 리더가 인지하는 것입니다. 입력 중 제안창이 동적으로 떠도, 스크린 리더가 그걸 알려주지 않으면, 사용자는 제안이 있는 줄도 모릅 니다. SP-028은 탐지를 요구합니다.

제안창 탐지가 안 될 때의 문제:

출현 미인지 입력 중 자동완성 제안창이 떠도, 스크린 리더 사용자는 그게 떴는지 모릅니다(동적 변화 미인지, BP-049 정신). 제안을 쓸 기회를 놓치죠.

내용 미인지 무슨 추천 검색어가 떴는지, 몇 개인지를 모르면, 고를 수도 없습니다.

그래서 SP-028은 — 스크린 리더 탐지를 요구합니다:

출현 알림 제안창이 뜨면, 스크린 리더에 알립니다. 보통 aria-expanded="true"(콤보박스가 펼쳐짐)로 상태 변화를요. 그리고 제안 개수를 알리기도 하죠(‘제안 5개’)(BP-049의 aria-live 정신, 또는 combobox 상태).

제안 내용 탐지 추천 검색어 목록을, 스크린 리더가 읽을 수 있는 구조로요. role="listbox" + role= "option"(각 제안)으로, 스크린 리더가 목록과 항목을 인지하게요.

현재 항목 안내 키보드 화살표로 제안을 이동하면(SP-027), 현재 강조된 제안을 스크린 리더가 읽게요(aria- activedescendant). ’서울시 민원, 1/5’처럼요.

ARIA combobox 종합 — 출현(aria-expanded)·목록(listbox/option)·현재(activedescendant)를 — combobox 패턴으로 종합 구현합니다.

combobox ARIA 속성 정리.

role="combobox" + aria-expanded — 입력 필드, 제안창 펼침 상태.

aria-controls — 입력 필드가 제어하는 제안 목록 연결.

role="listbox" / role="option" — 제안 목록·항목.

aria-activedescendant — 현재 강조된 제안.

이들이 — 함께 제안창의 출현·내용·현재 항목을 스크린 리더에 전달하죠.

동적 변화 접근성(BP-049 정신). 제안창은 새로고침 없이 동적으로 뜹니다. 그 변화를 스크린 리더에 알리는 건, aria-live(BP-049)·combobox 상태와 같은 동적 접근성 패턴입니다. 검색 자동완성에 특화된 형태죠.

SP-027·028의 짝. SP-027(키보드로 제안 고르기) + SP-028(제안 출현·내용 탐지)이 — 함께 자동완성 접근성을 완성합 니다. 떴음을 알고(028) + 골라서(027)요. 둘 다 — combobox 패턴으로 구현되죠.

이 규칙은 검색(SP)의 ’제안창 인지 접근성’을 담당합니다 — 제안창 출현·내용을 스크린 리더가 탐지하게 해(028), 시각 장애 사용자도 자동완성·추천을 인지하고 쓰게 하죠.

정리하면 — 제안창이 동적으로 떠도 스크린 리더가 탐지 못 하면 시각 장애 사용자가 제안을 쓸 기회를 놓치므로, ARIA combobox 속성(aria-expanded·listbox/option·activedescendant)으로 출현·내용·현재 항목을 탐지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

출현 알림 — 제안창이 뜨면 스크린 리더에 알리는가(aria-expanded 등).

내용 탐지 — 추천 검색어 목록을 스크린 리더가 읽는가(listbox/option).

현재 항목 — 화살표 이동 시 현재 제안을 읽는가(aria-activedescendant).

개선 방향

ARIA combobox: aria-expanded(출현), listbox/option(목록), activedescendant(현재).

제안 개수 안내. SP-027(키보드 활용)과 함께 완성.

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

역할	책임
퍼블리셔/개발	combobox ARIA 구현
QA/접근성	제안창 스크린 리더 탐지 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제안창이 뜨면 스크린 리더에 알리나요(aria-expanded 등)?

□ 추천 검색어 목록을 스크린 리더가 읽나요(listbox/option)?

□ 화살표 이동 시 현재 제안을 읽나요(aria-activedescendant)?

❓ FAQ

Q1. SP-027과 뭐가 다른가요? SP-027은 제안을 키보드로 활용(고르기), SP-028은 제안창 출현·내용을 스크린 리더가 탐지(인지)입니다. 떴음을 알고(028) + 골라서(027) 함께 완성하죠. Q2. 어떻게 출현을 알리나요? aria-expanded="true"(콤보박스 펼침)로 상태 변화를 전하고, 제안 개수(‘제안 5개’)도 알립니다. 스크린 리더가 제안창이 떴음을 인지하게요. Q3. ARIA 속성이 복잡한데 꼭 써야 하나요? 자동완성은 표준 combobox 패턴을 따라야 접근성이 확보됩니다. role·aria- expanded·listbox/option·activedescendant 조합이 표준이죠. APG 예제를 참고하면 됩니다.

6. 마무리

SP-028의 메시지:

제안이 떴다고 알리기 — 제안창 출현·내용을 스크린 리더가 탐지하게 하라.

제안창이 동적으로 떠도 스크린 리더가 탐지 못 하면 시각 장애 사용자가 제안을 못 씁니다. ARIA combobox로 출현·내용·현재 항목을 탐지하게 하는 게 핵심이죠. 다음 편은 제안창 논리적 위치(초점 순서)입니다.

다음 편 예고 ▶ 「703. (SP-029) 검색어 입력 도움창을 검색어 입력 필드와 검색 버튼 사이에 제공하여 스크린 리더 가상 초점으로 논리적 순서에 따라 이용할 수 있게 하고 있다.」

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컴포넌트,웹표준