’도움말’만 잔뜩이면 못 고른다

KRDS CP-362 — 아이콘 버튼에 고유하고 적절한 이름을 제공하고 있다.

0. 들어가며 — 도움 버튼이 다 똑같이 들리면

이번 482편은 맥락적 도움말 아이콘 버튼에 고유하고 적절한 이름을 제공하라는 규칙입니다.

맥락적 도움말엔 — 여러 요소 옆에 ⓘ·? 아이콘이 여럿 있죠(CP-356). 이들이 — 스크린 리더에 모두 ’도움말’이라고만 들리면, 어느 게 어느 요소 도움인지 구별 못 합니다. CP-362는 각 아이콘 버튼에 요소별 고유 이름을 주라고 규정합니다. 도움 패널 CP-345와 평행한 규칙이죠. 이번 편을 풀어냅니다.

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

CP-362 (컴포넌트 > 맥락적 도움말) “아이콘 버튼에 고유하고 적절한 이름을 제공하고 있다.”

여러 맥락적 도움말 아이콘 버튼 각각에, 어느 요소의 도움인지 구별되는 고유하고 적절한 접근가능한 이름을 제공하라는 뜻입니다.

정리: 각 도움 아이콘 버튼에 요소별 고유한 이름을 제공하라. 이게 CP-362입니다.

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

맥락적 도움말은 여러 요소 옆에 ⓘ·? 아이콘이 여럿 있습니다(‘주민등록번호’ 옆, ‘소득’ 옆 등). 이 아이콘들은 시각적으로 같은 모양(?)이지만 각각 다른 요소의 도움을 엽니다. 스크린 리더 사용자가 이를 구별·이해하려면 각 버튼에 고유하고 적절한 이름이 있어야 하죠.

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

이름 없음 — 아이콘 버튼에 접근가능한 이름이 없으면 — 스크린 리더는 ’버튼’이라고만 읽습니다. 아이콘(?)은 시각 정보라 스크린 리더에 전달 안 되죠.

모두 같은 이름 모든 도움 버튼이 ‘도움말’이라고만 들리면 어느 게 어느 요소 도움인지 구별 못 합니다. ’도움말 버튼’을 여러 개 듣고 ’이게 어느 항목 거지?’ 헷갈리죠.

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

고유성 각 버튼 이름이 요소별로 달라야 합니다. ‘주민등록번호 도움말’, ’소득 정보 도움말’처럼 어느 요소의 도움인지 이름에 담아 서로 구별되게요.

적절성 — 이름이 — 그 버튼의 용도(도움말/정보 열기)와 대상 요소를 정확히 전해야 합니다. ‘버튼1’ 같은 무의미한 이름이 아니라 ’OO 도움말’처럼요.

ⓘ/? 구분 반영 — 정보(ⓘ) 버튼은 ‘OO 정보’, 도움(?) 버튼은 ’OO 도움말’처럼 — 아이콘 의미(CP-355)에 맞는 이름이면 더 적절하죠.

구현 방법:

aria-label — 각 아이콘 버튼에 aria-label="주민등록번호 도움말"처럼 고유 이름을 줍니다.

aria-labelledby — 요소 레이블을 참조해 조합할 수도 있죠(레이블 id + ‘도움말’).

아이콘만 있으면 — aria-label로 이름을 줘야 합니다(아이콘은 SR에 안 읽힘).

대상 요소와 일관. 도움 버튼 이름(‘주민등록번호 도움말’)은 — 그 대상 요소 레이블(‘주민등록번호’)과 일관되면 명확하죠. 본문 레이블과 버튼 이름이 같은 항목명을 쓰면 — 스크린 리더 사용자가 연결을 분명히 인지합니다.

동작 예측. 이름은 — 누르면 무슨 일이 일어나는지(그 요소 도움말/정보가 뜸)를 예측하게 합니다(태그 CP-310 정신). ’주민등록번호 도움말’을 들으면 — 누르면 그 항목 도움이 나올 거라 예측하죠.

이 규칙은 맥락적 도움말의 ’버튼 식별성’을 담당합니다 — 각 아이콘에 고유 이름을 줘(362), 스크린 리더 사용자가 어느 요소 도움인지 구별하고 청하게 하죠. 시각적으론 위치로(CP-356) 구별되지만, 스크린 리더엔 이름으로 구별합니다. 도움 패널 CP-345와 같은 정신입니다.

정리하면 — 여러 도움 아이콘이 모두 같은 이름이거나 이름이 없으면 스크린 리더 사용자가 어느 요소 도움인지 구별 못 하므로, 각 버튼에 요소명을 포함한 고유하고 적절한 접근가능한 이름을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

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

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

적절성 — 이름이 용도(정보/도움)+대상 요소를 정확히 전하는가.

개선 방향

각 아이콘 버튼에 aria-label="OO 도움말/정보"처럼 요소명 포함 고유 이름.

대상 요소 레이블과 일관된 항목명 사용. ⓘ/? 구분 반영.

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

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

기관 유형	CP-362 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (맥락적 도움말 사용 시)

웹접근성 의무 대상이며 맥락적 도움말을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

□ 이름이 용도(정보/도움)+대상 요소를 정확히 전하나요?

❓ FAQ

**Q1. 모든 도움 버튼을 ‘도움말’로 하면 안 되나요?** 안 됩니다. 스크린 리더에 다 ’도움말’로 들려 어느 요소 거지 구별 못 합니다. 요소명을 넣어 고유하게 하죠. Q2. 아이콘만 있으면 이름이 자동으로 되나요? 아닙니다. 아이콘(?)은 스크린 리더에 안 읽힙니다. aria-label로 이름을 줘야 하죠. Q3. ⓘ와 ?를 이름에 반영하나요? 정보(ⓘ)는 ’OO 정보’, 도움(?)은 ’OO 도움말’처럼 의미에 맞게 하면 더 적절합 니다(CP-355).

6. 마무리

CP-362의 메시지:

’도움말’만 잔뜩이면 못 고른다 — 각 아이콘 버튼에 요소별 고유 이름을.

여러 도움 아이콘이 모두 같은 이름이거나 이름이 없으면 스크린 리더 사용자가 어느 요소 도움인지 구별 못 합니다. 각 버튼에 요소명을 포함한 고유 이름을 주는 게 핵심이죠. 다음 편은 요청 시에만 실행입니다.

다음 편 예고 ▶ 「483. (CP-363) 맥락적 도움말은 사용자가 요청한 경우에만 실행되게 구현하고 있다.」

ViewCheck는 각 도움 아이콘 버튼에 고유한 이름이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.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컴포넌트,웹표준