아이콘 버튼에 진짜 이름을

KRDS CP-382 — 스크린 리더 사용자가 활성화 버튼의 용도를 이해할 수 있도록 각각의 버튼에 이름을 고유하고 적절하게 제공하고 있다.

0. 들어가며 — 툴팁은 보이는데 스크린 리더엔

이번 502편은 각각의 (툴팁) 활성화 버튼에 이름을 고유하고 적절하게 제공하라는 규칙입니다.

툴팁의 시각 말풍선은 — 마우스 사용자에게만 보입니다. 스크린 리더 사용자가 아이콘 버튼의 용도를 알려면 — 그 버튼에 접근가능한 이름이 있어야 하죠. CP-382는 각 버튼에 고유 이름을 주라고 규정합니다. 도움 패널 CP-345·맥락적 도움말 CP-362와 평행한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 버튼 고유하고 적절한 이름

CP-382 (컴포넌트 > 툴팁) “스크린 리더 사용자가 활성화 버튼의 용도를 이해할 수 있도록 각각의 버튼에 이름을 고유하고 적절하게 제공하고 있다.”

툴팁을 가진 아이콘 버튼 각각에, 그 용도를 알 수 있는 고유하고 적절한 접근가능한 이름을 제공하라는 뜻입니다.

정리: 각 툴팁 버튼에 고유하고 적절한 이름을 제공하라. 이게 CP-382입니다.

2. 왜 고유하고 적절한 이름인가

툴팁은 아이콘 단독 버튼의 이름을 시각적으로 보여줍니다(CP-376). 하지만 그 시각 말풍선은 호버하는 마우스 사용자에게만 보이죠. 스크린 리더 사용자는 호버 툴팁을 못 보거나 못 듣습니다. 그래서 그 아이콘 버튼이 무슨 용도인지 알려면, 버튼에 접근가능한 이름(accessible name)이 따로 있어야 하죠.

이름이 없거나 모두 같을 때:

이름 없음 — 아이콘 버튼에 접근가능한 이름이 없으면 — 스크린 리더는 ’버튼’이라고만 읽습니다. 아이콘(🔍)은 시각 정보라 안 읽히고, 시각 툴팁도 스크린 리더엔 안 전달되죠(특히 title이 아닌 커스텀 툴팁이면). 무슨 버튼인지 모릅니다.

모두 같은 이름 — 여러 아이콘 버튼이 — 다 ’버튼’이거나 같은 이름이면, 어느 게 검색이고 설정인지 구별 못 하죠.

그래서 CP-382는 — 각 버튼에 고유하고 적절한 이름을 주라고 합니다:

고유성 각 버튼 이름이 버튼별로 달라야 합니다. ‘검색’, ‘설정’, ‘닫기’, ’메뉴’처럼 각 버튼의 용도를 이름에 담아 서로 구별되게요.

적절성 — 이름이 — 그 버튼의 용도를 정확히 전해야 합니다. ‘button1’ 같은 무의미한 게 아니라, 그 아이콘이 하는 일(‘검색’)을 분명히요. 시각 툴팁의 텍스트와 동일하게 하면 일관되죠.

구현 방법:

aria-label — 아이콘 버튼에 aria-label="검색"처럼 이름을 직접 줍니다. 가장 흔한 방법이죠.

aria-labelledby — 툴팁 컨테이너를 참조해 이름을 줄 수도 있습니다(CP-383의 aria-labelledby 연결).

시각적으로 숨긴 텍스트 — sr-only 텍스트로 버튼 이름을 제공할 수도 있죠.

시각 툴팁 + 접근가능한 이름의 짝. CP-376에서 본 것처럼 아이콘 버튼에는 ①시각 툴팁(마우스 사용자용 이름표)과 ②접근가능한 이름(보조기술용)이 둘 다 필요합니다. CP-382는 그중 ②접근가능한 이름을 다루죠. 시각 툴팁의 내용과 접근가능한 이름을 일치시키면 마우스·스크린 리더 사용자가 같은 정보를 얻습니다.

title 중첩 주의(CP-379). 접근가능한 이름을 — title 속성으로 주면 안 됩니다(CP-379의 중첩 금지, title의 접근성 한계). aria-label/aria-labelledby로 제대로 주죠.

이 규칙은 툴팁의 ‘버튼 식별성’을 담당합니다 — 각 아이콘 버튼에 고유 이름을 줘(382), 스크린 리더 사용자가 시각 툴팁 없이도 버튼 용도를 알게 하죠. 도움 패널 CP-345·맥락적 도움말 CP-362와 같은 ’고유 이름’ 정신입니다.

정리하면 — 툴팁 시각 말풍선은 스크린 리더에 안 통하므로, 각 아이콘 버튼에 용도를 전하는 고유하고 적절한 접근 가능한 이름(aria-label 등)을 제공해 스크린 리더 사용자가 버튼을 식별하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

이름 존재 — 각 아이콘 버튼에 접근가능한 이름이 있는가.

고유성 — 버튼 이름이 버튼별로 달라 구별되는가(모두 ‘버튼’ 아님).

적절성·일치 — 이름이 용도를 정확히 전하고 시각 툴팁과 일치하는가.

개선 방향

각 아이콘 버튼에 aria-label="검색/설정/닫기" 등 고유 이름. title 아닌 aria로(CP-379).

시각 툴팁 텍스트와 접근가능한 이름 일치.

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

역할	책임
퍼블리셔/개발	aria-label 고유 이름 구현
콘텐츠/UX	버튼 이름 텍스트 작성
QA/접근성	스크린 리더 버튼 식별 검증

기관 유형	CP-382 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (툴팁 버튼 사용 시)

웹접근성 의무 대상이며 툴팁 아이콘 버튼을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 아이콘 버튼에 접근가능한 이름이 있나요?

□ 버튼 이름이 버튼별로 달라 구별되나요(모두 ‘버튼’ 아님)?

□ 이름이 용도를 정확히 전하고 시각 툴팁과 일치하나요?

❓ FAQ

Q1. 시각 툴팁이 있으면 충분하지 않나요? 시각 툴팁은 마우스 사용자에게만 보입니다. 스크린 리더 사용자에겐 접근가능한 이름(aria-label)이 필요하죠. Q2. title로 이름을 주면 안 되나요? title은 접근성 한계가 있고 중첩 문제(CP-379)가 있습니다. aria-label/ aria-labelledby로 주죠. Q3. 도움 패널 CP-345·맥락적 도움말 CP-362와 같나요? 같은 ‘고유 이름’ 정신입니다. 아이콘 버튼의 용도를 스크린 리더에 전하죠.

6. 마무리

CP-382의 메시지:

아이콘 버튼에 진짜 이름을 — 각 버튼에 고유하고 적절한 접근가능한 이름을.

툴팁 시각 말풍선은 스크린 리더에 안 통합니다. 각 아이콘 버튼에 용도를 전하는 고유 이름(aria-label)을 줘 스크린 리더 사용자가 버튼을 식별하게 하는 게 핵심이죠. 다음 편은 버튼-컨테이너 aria-labelledby 연결입니다.

다음 편 예고 ▶ 「503. (CP-383) 활성화 버튼과 컨테이너 영역을 aria-labelledby 속성으로 연결하고 있다.」

ViewCheck는 각 툴팁 버튼에 고유한 이름이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 툴팁(Tooltip) 가이드 — https://www.krds.go.kr/html/site/component/component_37.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컴포넌트,웹표준