보이는 레이블이 없어도 이름은 있게

KRDS SP-025 — 각 요소에 명시적인 텍스트 레이블이 제공되지 않더라도 스크린 리더가 접근할 수 있는 이름을 제공해야 한다.

0. 들어가며 — 디자인상 레이블을 숨겨야 할 때

이번 699편은 각 요소에 명시적인 텍스트 레이블이 제공되지 않더라도 스크린 리더가 접근할 수 있는 이름을 제공하라는 규칙입니다.

검색 영역에는 — 디자인상 텍스트 레이블을 시각적으로 표시하지 않는 요소가 있죠(아이콘 버튼 등). 그래도 — 스크린 리더용 이름은 반드시 있어야 합니다. SP-025는 접근가능한 이름을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 접근가능한 이름 제공

SP-025 (서비스 패턴 > 검색 > 검색어 입력) “각 요소에 명시적인 텍스트 레이블이 제공되지 않더라도 스크린 리더가 접근할 수 있는 이름을 제공해야 한다.”

시각적 텍스트 레이블이 없어도 스크린 리더용 접근가능한 이름을 제공하라는 뜻입니다.

정리: 시각 레이블이 없어도 접근가능한 이름을 제공하라. 이게 SP-025입니다.

2. 왜 접근가능한 이름인가

검색 영역에는 시각적 텍스트 레이블을 표시하지 않는 요소가 많습니다: 돋보기 아이콘 버튼, 검색어 삭제(×) 버튼, 범위 필터 아이콘 등이요. 디자인상 아이콘만 두기도 하죠. 그래도 스크린 리더 사용자는, 그 요소의 이름을 알아야 합니다. SP-025는 접근가능한 이름을 요구합니다.

’명시적 텍스트 레이블’과 ’접근가능한 이름’의 구분.

명시적 텍스트 레이블 — 시각적으로 — 보이는 텍스트 레이블(<label> 텍스트 등).

접근가능한 이름(accessible name) 스크린 리더가 읽는 그 요소의 이름. 보이는 레이블이 그 역할을 할 수도, 안 보이는 aria-label·sr-only가 할 수도 있죠.

SP-025의 핵심 — 보이는 레이블이 없어도, 접근가능한 이름은 반드시 있어야 한다는 것입니다.

이름이 없을 때의 문제:

정체 모름 돋보기·삭제(×)·필터 아이콘 버튼에 접근가능한 이름이 없으면, 스크린 리더는 ’버튼’으로만 읽습 니다. 무슨 버튼인지 모르죠. 검색을 못 씁니다.

무의미한 읽기 이름 없는 아이콘은, 스크린 리더가 파일명·코드를 읽거나 무시해, 혼란을 줍니다.

그래서 SP-025는 — 접근가능한 이름을 요구합니다:

aria-label — 시각 레이블이 — 없는 요소(아이콘 버튼 등)에, aria-label로 이름을요. 돋보기 → ‘aria-label= “검색”’(SP-016), 삭제 버튼 → ’검색어 지우기’처럼요.

sr-only 텍스트 또는 시각적으로 숨긴(visually-hidden) 텍스트로 이름을요. 화면엔 안 보이되 스크린 리더는 읽게요.

aria-labelledby — 다른 요소(보이는 텍스트)를 — 이름으로 참조하기도 하죠.

모든 대화형 요소 — 검색의 — 모든 대화형 요소(입력·버튼·필터·제안 항목)가, 접근가능한 이름을 갖게요. 빠짐없이요.

WCAG 4.1.2(이름·역할·값). 모든 UI 컴포넌트는 이름·역할·값을 가져야 한다(WCAG 4.1.2). 시각 레이블이 디자인 상 없어도, 접근가능한 이름은 반드시 있어야 보조 기술이 인지하죠. 아이콘 버튼 이름 누락은, 검색뿐 아니라 전반의 흔한 접근성 실수입니다.

SP-016의 일반화. SP-016(돋보기 아이콘 이름)을, 검색 영역의 모든 요소로 일반화한 게 SP-025입니다. 돋보기뿐 아니라 삭제·필터·제안 등 모든 요소에 접근가능한 이름을요.

이 규칙은 검색(SP)의 ’요소 이름 접근성’을 담당합니다 — 시각 레이블이 없어도 접근가능한 이름을 제공해(025), 스크린 리더 사용자가 검색의 모든 요소를 인지하게 하죠.

정리하면 — 검색 영역의 아이콘 버튼 등은 시각 레이블이 없어도 접근가능한 이름이 없으면 스크린 리더 사용자가 정체를 모르 므로, aria-label·sr-only·aria-labelledby로 모든 대화형 요소에 접근가능한 이름을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

접근가능한 이름 — 시각 레이블 없는 요소(아이콘 버튼)에 이름이 있는가.

모든 요소 — 입력·버튼·필터·제안 등 모든 대화형 요소에 이름이 있는가.

명확성 — 이름이 용도를 명확히 전하는가(‘검색어 지우기’ 등).

개선 방향

시각 레이블 없는 요소에 aria-label·sr-only·aria-labelledby로 이름.

모든 대화형 요소 빠짐없이. 명확한 이름(WCAG 4.1.2).

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 시각 레이블 없는 요소(아이콘 버튼)에 이름이 있나요?

□ 입력·버튼·필터·제안 등 모든 대화형 요소에 이름이 있나요?

□ 이름이 용도를 명확히 전하나요(‘검색어 지우기’ 등)?

❓ FAQ

Q1. ‘명시적 텍스트 레이블’과 ’접근가능한 이름’의 차이는요?** 명시적 레이블은 시각적으로 보이는 텍스트, 접근가능한 이름은 스크린 리더가 읽는 이름입니다. 보이는 레이블이 없어도 접근가능한 이름은 반드시 있어야 하죠. Q2. 어떻게 이름을 주나요? aria-label(’검색어 지우기’), sr-only 텍스트, aria-labelledby(다른 텍스트 참조)로요. 화면엔 안 보여도 스크린 리더가 읽게요. Q3. SP-016과 같나요?** SP-016(돋보기 이름)을 검색 영역 모든 요소로 일반화한 것입니다. 돋보기뿐 아니라 삭제·필터· 제안 등 모든 요소에 이름을요(WCAG 4.1.2).

6. 마무리

SP-025의 메시지:

보이는 레이블이 없어도 이름은 있게 — 시각 레이블 없는 요소에 접근가능한 이름을 제공하라.

아이콘 버튼 등은 시각 레이블이 없어도 접근가능한 이름이 없으면 스크린 리더 사용자가 정체를 모릅니다. 모든 대화형 요소에 접근가능한 이름을 주는 게 핵심이죠. 다음 편은 검색 대화형 요소 키보드 조작입니다.

다음 편 예고 ▶ 「700. (SP-026) 검색어 입력/실행 관련 대화형 요소는 키보드로 접근과 조작이 가능하도록 구현되어 있다.」

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