이름엔 aria를, 숨김 텍스트 말고

KRDS CP-440 — 요소에 접근 가능한 이름을 전달하고자 하는 경우는 숨김 콘텐츠를 적용하고 있지 않다.

0. 들어가며 — 마지막 CP 그룹, 숨긴 콘텐츠

이번 560편부터 숨긴 콘텐츠(Visually hidden) 그룹입니다(7개). CP 446개의 마지막 그룹이죠. 첫 규칙은 접근 가능한 이름을 전달하려는 경우 숨김 콘텐츠를 쓰지 말라는 규칙입니다.

’숨긴 콘텐츠’는 — 화면엔 안 보이지만 스크린 리더는 읽는 텍스트(sr-only)입니다. 유용하지만 — 요소의 ’이름’을 줄 때는 숨김 텍스트보다 aria 속성이 적합하죠. CP-440은 그 구분을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 접근가능한 이름엔 숨김 콘텐츠 미적용

CP-440 (컴포넌트 > 숨긴 콘텐츠) “요소에 접근 가능한 이름을 전달하고자 하는 경우는 숨김 콘텐츠를 적용하고 있지 않다.”

요소에 접근가능한 이름(accessible name)을 줄 때는 시각적으로 숨긴 텍스트가 아니라 적절한 aria 속성 등을 쓰라는 뜻입니다.

정리: 요소의 이름은 숨김 텍스트가 아니라 aria로 주라. 이게 CP-440입니다.

2. 왜 이름엔 숨김 콘텐츠를 안 쓰나

숨긴 콘텐츠(Visually hidden / sr-only) 는 — 화면에서는 안 보이지만 스크린 리더는 읽는 텍스트입니다. CSS 기법(clip·position 등)으로 — 시각적으로만 숨기죠. 스크린 리더 사용자에게 추가 맥락·안내를 줄 때 유용합니다(예: ‘더보기’ 링크에 sr-only로 ‘○○ 기사 더보기’).

그런데 — 요소의 접근가능한 이름(accessible name) 을 줄 때는, 숨김 텍스트보다 aria 속성이 적합합니다. CP-440은 이 구분을 짚죠.

접근가능한 이름 vs 숨긴 콘텐츠:

접근가능한 이름(accessible name) 버튼·링크·입력 등 컨트롤의 ‘이름’. 스크린 리더가 ’○○, 버튼’처럼 읽는 그 이름이죠. 이건 aria-label, aria-labelledby, <label> 같은 이름 전용 메커니즘으로 줍니다.

숨긴 콘텐츠 — 화면 안 보이는 추가 텍스트. 보조 안내·맥락용이죠.

왜 이름엔 aria가 적합한가:

명확한 의미 aria-label="검색"은 ’이 요소의 이름은 검색’이라는 명확한 의미를 줍니다. 반면 버튼 안에 sr-only 텍스트를 넣는 건, 이름을 주는 것이긴 하나 의도가 덜 명확하고, 다른 텍스트와 합쳐져 이름이 꼬일 수 있죠(접근가능한 이름 계산 규칙이 복잡해짐).

유지보수·견고성 aria 속성은 이름 전용이라 관리가 깔끔합니다. 숨김 텍스트는 레이아웃·다른 텍스트와 얽혀 의도치 않게 이름이 바뀔 수 있죠.

올바른 도구 — ’aria-label은 이름, sr-only는 보조 콘텐츠’라는 — 역할에 맞는 도구를 쓰는 게 원칙입니다. 이름을 줄 거면 이름 메커니즘(aria/label)을, 추가 안내를 줄 거면 sr-only를요.

그럼 숨긴 콘텐츠는 언제? 숨긴 콘텐츠는 — 이름이 아니라 추가 설명·맥락을 줄 때 적합합니다:

반복되는 ‘더보기’ 링크에 — 어느 항목 더보기인지 sr-only로 구별(더보기 <span class="sr-only">○○ 기사</span>).

시각적으로 자명하지만 스크린 리더엔 필요한 안내(표 캡션, 단위 설명 등).

즉 — 이름은 aria(440), 보조 콘텐츠는 sr-only로 역할을 나눕니다.

aria-label vs aria-labelledby. 이름을 줄 때 — 보이는 텍스트가 있으면 aria-labelledby로 그것을 참조하는 게 좋고(시각·접근성 일치), 보이는 텍스트가 없으면 aria-label로 직접 주죠. 숨김 텍스트로 이름을 만드느니 — 이 방법들이 견고합니다.

이 규칙은 숨긴 콘텐츠의 ’올바른 용도 경계’를 담당합니다 — 이름은 aria로, 숨김 콘텐츠는 보조 안내로 구분해(440), 각 도구를 올바로 쓰게 하죠. 이후 숨긴 콘텐츠 규칙들(시맨틱·탐지 방지 스타일 회피·크기·top/left·언어·호환성)이 이 위에 쌓입니다.

정리하면 — 요소의 접근가능한 이름은 의미가 명확하고 견고한 aria 속성(aria-label/labelledby/label)으로 주는 게 적합하므로, 이름을 줄 목적으로 숨긴 콘텐츠를 쓰지 말고 숨긴 콘텐츠는 보조 안내용으로만 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

이름은 aria — 컨트롤 이름을 aria-label/labelledby/label로 주는가(이름용 sr-only 남용 아님).

숨김은 보조 — 숨긴 콘텐츠가 이름이 아닌 추가 안내·맥락용인가.

이름 견고성 — 접근가능한 이름이 의도대로 명확히 계산되는가.

개선 방향

컨트롤 이름은 aria-label(없는 텍스트) / aria-labelledby(보이는 텍스트) / label로.

숨긴 콘텐츠는 보조 안내(더보기 구별 등)에만. 이름용 숨김 텍스트 정리.

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

역할	책임
퍼블리셔/개발	이름(aria)·숨김(sr-only) 역할 구분 구현
QA/접근성	접근가능한 이름 계산 검증

기관 유형	CP-440 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (숨긴 콘텐츠 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 컨트롤 이름을 aria-label/labelledby/label로 주나요(이름용 sr-only 남용 아님)?

□ 숨긴 콘텐츠가 이름이 아닌 추가 안내·맥락용인가요?

□ 접근가능한 이름이 의도대로 명확히 계산되나요?

❓ FAQ

Q1. 숨긴 콘텐츠가 뭔가요? 화면엔 안 보이지만 스크린 리더는 읽는 텍스트(sr-only)입니다. 보조 안내·맥락에 유용하죠. Q2. 버튼 이름을 sr-only로 주면 안 되나요? 이름은 aria-label 등 이름 전용 메커니즘이 명확·견고합니다. sr-only는 다른 텍스트와 얽혀 이름이 꼬일 수 있죠. Q3. 그럼 숨긴 콘텐츠는 언제 쓰나요? 이름이 아닌 추가 설명·맥락에요. 반복 ‘더보기’ 구별, 표 캡션, 단위 안내 등이죠.

6. 마무리

CP-440의 메시지:

이름엔 aria를, 숨김 텍스트 말고 — 접근가능한 이름엔 숨긴 콘텐츠를 쓰지 마라.

요소의 이름은 의미가 명확하고 견고한 aria 속성으로 주는 게 적합합니다. 이름용으로 숨긴 콘텐츠를 쓰지 말고 숨긴 콘텐츠는 보조 안내용으로만 쓰는 게 핵심이죠. 다음 편은 시맨틱 마크업입니다.

다음 편 예고 ▶ 「561. (CP-441) 시맨틱 마크업(정보의 의미/역할에 적합한 태그)을 적용하고 있다.」

ViewCheck는 접근가능한 이름에 숨긴 콘텐츠가 오용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 숨긴 콘텐츠(Visually hidden) 가이드 — https://www.krds.go.kr/html/site/component/component_45.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컴포넌트,웹표준