마우스 없이도 검색 실행

KRDS SP-015 — 돋보기 아이콘은 키보드 및 스크린 리더로 접근 및 조작할 수 있게 되어 있다.

0. 들어가며 — 검색 버튼을 마우스로만 누를 수 있으면

이번 689편은 돋보기 아이콘은 키보드 및 스크린 리더로 접근 및 조작할 수 있게 하라는 규칙입니다.

검색 실행 돋보기 아이콘이 — 마우스 클릭으로만 작동하면, 키보드·스크린 리더 사용자는 검색을 못 하죠. SP-015는 돋보기 아이콘의 키보드·스크린 리더 접근을 규정합니다. 검색 접근성의 기본이죠. 이번 편을 풀어냅니다.

1. 원문 — 돋보기 아이콘 키보드·스크린 리더 접근

SP-015 (서비스 패턴 > 검색 > 검색 기능 찾기) “돋보기 아이콘은 키보드 및 스크린 리더로 접근 및 조작할 수 있게 되어 있다.”

검색 돋보기 아이콘을 키보드·스크린 리더로 접근·조작할 수 있게 하라는 뜻입니다.

정리: 돋보기 아이콘을 키보드·스크린 리더로 접근·조작하게 하라. 이게 SP-015입니다.

2. 왜 돋보기 접근성인가

검색 실행 돋보기(🔍) 아이콘(또는 버튼)은, 검색을 시작하는 핵심 컨트롤입니다. 이게 마우스로만 작동하면, 마우스 를 못 쓰는 사용자(지체 장애·시각 장애)는 검색을 못 하죠. SP-015는 키보드·스크린 리더 접근을 요구합니다.

돋보기가 마우스 전용일 때의 문제:

키보드 사용자 검색 불가 돋보기 아이콘이 <div>+클릭 이벤트로만 구현되면, 키보드 사용자는 Tab으로 포커스 를 못 받고, Enter로 실행 못 합니다. 검색을 아예 못 하죠.

스크린 리더 사용자 인지·실행 불가 스크린 리더가 그 아이콘을 인지·조작 못 하면, 시각 장애 사용자는 검색 버튼이 있는지도, 어떻게 누르는지도 모릅니다.

그래서 SP-015는 — 키보드·스크린 리더 접근·조작을 요구합니다:

키보드 접근(Tab) 돋보기 아이콘에 Tab으로 포커스가 가야 합니다. 포커스 표시도 명확히요. 키보드 사용자가 그 버튼에 닿게요.

키보드 조작(Enter/Space) 포커스 상태에서 Enter나 Space로 검색을 실행하게요(SP-026, WCAG 2.1.1). 마우스 클릭과 동등하게요.

진짜 버튼 사용 돋보기를 <button>(또는 적절한 role)으로 구현합니다. <div>+클릭만으론 키보드 작동이 안 되죠. 진짜 버튼이면 키보드 작동이 기본 제공됩니다.

스크린 리더 인지 — 스크린 리더가 — 그 버튼을 인지하고, ’검색 버튼’으로 읽으며(SP-016 이름), 조작할 수 있게요.

돋보기만 있을 때 특히 중요. SP-012의 ② 형태(돋보기 버튼만)일 때, 검색 시작이 전적으로 그 아이콘에 달려 있죠. 이 아이콘이 접근 불가능하면, 키보드·스크린 리더 사용자는 검색 자체를 시작 못 합니다. 그래서 돋보기 접근성이 검색 접근성의 입구입니다.

WCAG 2.1.1 키보드. 모든 기능을 키보드로 쓸 수 있어야 한다(WCAG 2.1.1)는 가장 기본적인 접근성 원칙의 적용 입니다. 검색 실행도 예외가 아니죠.

검색 접근성의 시작. 검색 그룹 전반에는 접근성 규칙이 많습니다(SP-015·016·025·026·027·028·029 등). 돋보기 접근 (SP-015)은 그 시작점이죠. 검색을 시작도 못 하면, 이후 단계는 의미가 없으니까요.

이 규칙은 검색(SP)의 ’검색 실행 접근성’을 담당합니다 — 돋보기 아이콘을 키보드·스크린 리더로 접근·조작하게 해(015), 마우스 없는 사용자도 검색을 시작하게 하죠.

정리하면 — 돋보기 아이콘이 마우스 전용이면 키보드·스크린 리더 사용자가 검색을 못 하므로, 진짜 버튼으로 구현해 Tab 접근·Enter/Space 조작·스크린 리더 인지를 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 접근 — 돋보기에 Tab으로 포커스가 가고 표시되는가.

키보드 조작 — Enter/Space로 검색이 실행되는가(WCAG 2.1.1).

진짜 버튼·스크린 리더 — <button>으로 구현되고 스크린 리더가 인지하는가.

개선 방향

돋보기를 <button>(또는 role)으로 → Tab 접근 + Enter/Space 조작.

포커스 표시. 스크린 리더 인지·이름(SP-016). WCAG 2.1.1.

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

역할	책임
퍼블리셔/개발	돋보기 버튼 키보드 구현
QA/접근성	키보드·스크린 리더 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 돋보기에 Tab으로 포커스가 가고 표시되나요?

□ Enter/Space로 검색이 실행되나요(WCAG 2.1.1)?

□ <button>으로 구현되고 스크린 리더가 인지하나요?

❓ FAQ

Q1. 돋보기가 마우스로만 작동하면 왜 문제인가요? 키보드 사용자는 Tab·Enter로 검색을 실행 못 하고, 스크린 리더 사용자는 버튼 존재·조작을 모릅니다. 검색 자체를 시작 못 하죠. Q2. 어떻게 키보드로 작동시키나요? 돋보기를 진짜 <button>(또는 적절한 role)으로 구현하면 Tab 접근·Enter/Space 조작이 기본 제공됩니다. <div>+클릭만으론 안 되죠. Q3. 왜 검색 접근성에서 돋보기가 중요한가요? 돋보기만 있는 형태(SP-012 ②)에선 검색 시작이 전적으로 그 아이콘에 달려 있습니다. 접근 불가면 검색 자체를 못 시작하죠. 검색 접근성의 입구입니다.

6. 마무리

SP-015의 메시지:

마우스 없이도 검색 실행 — 돋보기 아이콘을 키보드·스크린 리더로 접근·조작하게 하라.

돋보기가 마우스 전용이면 키보드·스크린 리더 사용자가 검색을 못 합니다. 진짜 버튼으로 키보드 접근·조작을 보장하는 게 핵심이죠. 다음 편은 돋보기 아이콘 이름 제공입니다.

다음 편 예고 ▶ 「690. (SP-016) 스크린 리더 사용자가 용도를 명확하게 이해할 수 있게 돋보기 아이콘에 적절한 이름을 제공하고 있다.」

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