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

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

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

이번 465편은 각각의 도움 아이콘 버튼에 이름을 고유하고 적절하게 제공하라는 규칙입니다.

도움 패널엔 — 여러 항목 옆에 도움 아이콘이 여럿 있죠(CP-337). 이들이 — 스크린 리더에 모두 ’도움말 버튼’이라고만 들리면, 어느 게 어느 항목 도움인지 구별 못 합니다. CP-345는 각 아이콘 버튼에 항목별 고유 이름을 주라고 규정합니다. 이미지 alt CP-189, 라디오 CP-287의 도움 패널 버전이죠. 이번 편을 풀어냅니다.

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

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

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

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

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

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

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

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

모두 같은 이름 모든 도움 버튼이 ‘도움말’ 또는 ‘도움말 버튼’이라고만 들리면 어느 게 어느 항목 도움인지 구별 못 합니다. 스크린 리더 사용자가 ’도움말 버튼’을 여러 개 듣고 ’이게 어느 항목 거지?’ 헷갈리죠. 폼에 도움 버튼이 10개면 다 ’도움말 버튼’이라 무의미합니다.

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

고유성 각 버튼 이름이 항목별로 달라야 합니다. ‘주민등록번호 도움말’, ‘주소 도움말’처럼 어느 항목의 도움인지 이름에 담아, 서로 구별되게요. ’OO 도움말’ 형식으로 항목명을 넣으면 고유해지죠.

적절성 — 이름이 — 그 버튼의 용도(도움말 열기)와 대상 항목을 정확히 전해야 합니다. ‘버튼1’ 같은 무의미한 이름이 아니라, ’주민등록번호 입력 도움말’처럼 용도+대상이 분명하게요.

구현 방법:

aria-label — 각 아이콘 버튼에 aria-label="주민등록번호 도움말"처럼 고유 이름을 줍니다. 항목명을 포함해 고유하게요.

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

시각적 텍스트 — 아이콘만 있으면 — aria-label로 이름을 줘야 합니다(아이콘은 SR에 안 읽힘). sr-only 텍스트도 방법이죠.

CP-338과의 연계. 도움 버튼 이름(‘주민등록번호 도움말’)은 — 본문 항목 레이블(‘주민등록번호’)·패널 제목(CP-338) 과 일관되면 더 명확하죠. 본문 레이블, 패널 제목, 아이콘 버튼 이름이 같은 항목명으로 통일되면 — 스크린 리더 사용자가 연결을 분명히 인지합니다.

‘활성화 버튼의 용도’. 원문이 ’활성화 버튼의 용도를 이해’라 한 것은 — 사용자가 그 버튼을 누르면 무슨 일이 일어나는지(그 항목 도움말이 열림)를 이름으로 예측하게 하라는 뜻이죠. 태그 CP-310(동작 예측 이름)과 통합니다.

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

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

3. 점검 / 개선

무엇을 점검하나

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

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

적절성 — 이름이 용도+대상 항목을 정확히 전하는가.

개선 방향

각 아이콘 버튼에 aria-label="OO 도움말"처럼 항목명 포함 고유 이름.

본문 레이블·패널 제목(CP-338)과 일관된 항목명 사용.

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

□ 이름이 용도+대상 항목을 정확히 전하나요?

❓ FAQ

Q1. 모든 도움 버튼을 ’도움말’로 하면 안 되나요? 안 됩니다. 스크린 리더에 다 ’도움말 버튼’으로 들려 어느 항목 거지 구별 못 합니다. 항목명을 넣어 고유하게 하죠. Q2. 아이콘만 있으면 이름이 자동으로 되나요? 아닙니다. 아이콘(?)은 시각 정보라 스크린 리더에 안 읽힙니다. aria-label로 이름을 줘야 하죠. Q3. CP-338과 어떻게 연계되나요? 본문 레이블·패널 제목·버튼 이름을 같은 항목명으로 통일하면 스크린 리더 사용자가 연결을 분명히 인지하죠.

6. 마무리

CP-345의 메시지:

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

여러 도움 아이콘이 모두 같은 이름이거나 이름이 없으면 스크린 리더 사용자가 어느 항목 도움인지 구별 못 합니다. 각 버튼에 항목명을 포함한 고유 이름을 주는 게 핵심이죠. 다음 편은 패널 키보드 초점·함정입니다.

다음 편 예고 ▶ 「466. (CP-346) 패널이 실행되면 키보드 초점은 패널 영역 자체로 이동하며, 패널 내부에서 키보드 함정이 발생하지 않게 구현하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.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컴포넌트,웹표준