이 버튼이 ’검색’임을 알리게

KRDS SP-016 — 스크린 리더 사용자가 용도를 명확하게 이해할 수 있게 돋보기 아이콘에 적절한 이름을 제공하고 있다.

0. 들어가며 — 검색 기능 찾기 단계의 마지막

이번 690편은 스크린 리더 사용자가 용도를 명확하게 이해할 수 있게 돋보기 아이콘에 적절한 이름을 제공하라는 규칙입니다. 검색 그룹의 첫 단계 ‘검색 기능 찾기’(SP-010~016)의 마지막이죠.

SP-015에서 — 돋보기를 키보드·스크린 리더로 접근하게 했죠. 그런데 — 그 아이콘에 이름이 없으면, 스크린 리더가 ‘버튼’ 으로만 읽어 무슨 버튼인지 모릅니다. SP-016은 적절한 이름을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 돋보기 아이콘 적절한 이름

SP-016 (서비스 패턴 > 검색 > 검색 기능 찾기) “스크린 리더 사용자가 용도를 명확하게 이해할 수 있게 돋보기 아이콘에 적절한 이름을 제공하고 있다.”

돋보기 아이콘에 스크린 리더가 용도를 알 수 있는 적절한 이름을 제공하라는 뜻입니다.

정리: 돋보기 아이콘에 ‘검색’ 등 적절한 이름을 제공하라. 이게 SP-016입니다.

2. 왜 아이콘 이름인가

SP-015는 돋보기를 키보드·스크린 리더로 접근·조작하게 했습니다. SP-016은 그 아이콘의 이름입니다. 접근 가능해도, 이름이 없으면 스크린 리더 사용자는 그게 무슨 버튼인지 모르죠. 둘이 함께 검색 버튼 접근성을 완성합니다.

이름이 없을 때의 문제:

용도 모름 돋보기 아이콘이 이미지·아이콘 폰트인데 이름(텍스트)이 없으면, 스크린 리더는 ’버튼’으로만 읽거나 무시합니다. 스크린 리더 사용자는 이게 검색 버튼인지 모르죠.

아이콘 = 시각 기호 돋보기(🔍)는 시각적으로는 검색을 뜻하지만, 스크린 리더는 그 시각적 의미를 못 읽습니다. 텍스트 이름이 있어야 전달되죠.

그래서 SP-016은 — 적절한 이름을 요구합니다:

접근가능한 이름 제공 — 돋보기 아이콘 버튼에 — ‘검색’ 같은 접근가능한 이름을요. 방법:

aria-label="검색" — 버튼에 직접 이름을요.

sr-only 텍스트 — 시각적으로 숨긴 ‘검색’ 텍스트를 버튼 안에요(visually-hidden, display:none 아님).

<img> 아이콘이면 — alt="검색"을요. 스크린 리더가 — ’검색 버튼’으로 읽게요.

용도 명확 — 이름이 — 그 버튼의 용도를 명확히 전해야 합니다. ‘검색’, ‘통합 검색’처럼요. 모호한 ’button’·‘icon’ 이 아니라요.

시각 기호 보완 시각적 돋보기(🔍)는 그대로 두되, 그 의미를 텍스트 이름으로 보완합니다. 시각 사용자는 아이콘으로, 스크린 리더 사용자는 이름으로 검색임을 알죠.

WCAG 4.1.2(이름·역할·값). 모든 UI 컴포넌트는 이름·역할·값을 가져야 한다(WCAG 4.1.2)는 원칙의 적용입니다. 검색 버튼의 이름(‘검색’)·역할(버튼)이 보조 기술에 전달돼야 하죠. 아이콘 버튼의 이름 누락은 흔한 접근성 실수입니다.

SP-015·016의 짝. SP-015(키보드·스크린 리더 접근·조작) + SP-016(적절한 이름)이 — 함께 돋보기 버튼 접근성을 완성합니다. 접근 가능하고(015) + 무슨 버튼인지 알게(016)요. 둘 중 하나만으론 — 부족하죠.

검색 기능 찾기의 마무리. ‘검색 기능 찾기’ 단계(SP-010~016)는 — 검색을 어디서·어떻게 찾고 실행하나를 다뤘습니다. 모든 화면(010)·헤더 우측(011)·표준 형태(012)·부분 검색(013)·주변 최소화(014)·돋보기 접근(015)·돋보기 이름(016)까지요. SP-016은 — 그 접근성 마무리죠.

이 규칙은 검색(SP)의 ’검색 버튼 이름’을 담당합니다 — 돋보기 아이콘에 적절한 이름을 제공해(016), 스크린 리더 사용자도 이 버튼이 ’검색’임을 알게 하죠. SP-015(접근·조작)와 함께 검색 버튼 접근성을 완성합니다.

정리하면 — 돋보기 아이콘에 이름이 없으면 스크린 리더 사용자가 무슨 버튼인지 모르므로, aria-label·sr-only·alt 등으로 ‘검색’ 같은 적절한 접근가능한 이름을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

이름 제공 — 돋보기 버튼에 ‘검색’ 접근가능한 이름이 있는가(aria-label/sr-only/alt).

용도 명확 — 이름이 용도를 명확히 전하는가(‘검색’, ‘button’ 아님).

SP-015와 함께 — 접근·조작(SP-015) + 이름(SP-016)이 함께 충족되는가.

개선 방향

돋보기 버튼에 aria-label="검색"·sr-only ‘검색’·alt="검색".

용도 명확한 이름. SP-015(접근·조작)와 함께 완성(WCAG 4.1.2).

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

역할	책임
퍼블리셔/개발	아이콘 이름 구현
QA/접근성	스크린 리더 이름 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 돋보기 버튼에 ‘검색’ 접근가능한 이름이 있나요(aria-label/sr-only/alt)?

□ 이름이 용도를 명확히 전하나요(‘검색’, ‘button’ 아님)?

□ 접근·조작(SP-015) + 이름(SP-016)이 함께 충족되나요?

❓ FAQ

Q1. 돋보기 아이콘에 왜 이름이 필요한가요? 돋보기(🔍)는 시각적으로만 검색을 뜻합니다. 스크린 리더는 그 의미를 못 읽어 ‘버튼’으로만 읽죠. ’검색’ 텍스트 이름이 있어야 스크린 리더 사용자가 압니다. Q2. 어떻게 이름을 주나요? aria-label="검색", sr-only ‘검색’ 텍스트, <img>면 alt="검색"으로요. 스크린 리더가 ’검색 버튼’으로 읽게요. Q3. SP-015와 뭐가 다른가요? SP-015는 키보드·스크린 리더로 접근·조작, SP-016은 그 버튼의 이름입니다. 접근 가능 하고(015) + 무슨 버튼인지 알게(016) — 함께 완성하죠.

6. 마무리

SP-016의 메시지:

이 버튼이 ’검색’임을 알리게 — 돋보기 아이콘에 적절한 이름을 제공하라.

돋보기에 이름이 없으면 스크린 리더 사용자가 무슨 버튼인지 모릅니다. ‘검색’ 접근가능한 이름으로 용도를 알게 하는 게 핵심이죠. ‘검색 기능 찾기’ 단계가 끝났습니다. 다음 편부터는 ‘검색어 입력’ 단계입니다.

다음 편 예고 ▶ 「691. (SP-017) 검색어 입력 필드와 실시간 검색어 제안 레이어를 제외한 나머지 영역의 명도나 불투명도를 낮추어 검색에 집중하게 하고 있다.」

ViewCheck는 돋보기 아이콘에 적절한 이름이 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

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

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