0이 아니라 1px로

KRDS CP-443 — 스크린 리더에서 정보가 무시되지 않게 숨긴 콘텐츠의 크기를 지정하고 있다.

0. 들어가며 — 크기를 0으로 하면 무시될 수 있다

이번 563편은 스크린 리더에서 정보가 무시되지 않게 숨긴 콘텐츠의 크기를 지정하라는 규칙입니다.

숨긴 콘텐츠를 — 크기 0(width:0; height:0)으로 만들면, 일부 스크린 리더·브라우저가 그 내용을 무시할 수 있죠. 그래서 — 0이 아니라 1px 같은 최소 크기를 줍니다. CP-443은 숨긴 콘텐츠의 크기 지정을 규정합니다. CP-442(올바른 숨김)의 세부 사항이죠. 이번 편을 풀어냅니다.

1. 원문 — 무시 방지 크기 지정

CP-443 (컴포넌트 > 숨긴 콘텐츠) “스크린 리더에서 정보가 무시되지 않게 숨긴 콘텐츠의 크기를 지정하고 있다.”

숨긴 콘텐츠가 스크린 리더에서 무시되지 않도록, 크기를 0이 아닌 최소 크기로 지정하라는 뜻입니다.

정리: 숨긴 콘텐츠 크기를 0이 아닌 1px 등으로 지정하라. 이게 CP-443입니다.

2. 왜 크기 지정인가

숨긴 콘텐츠를 — 시각적으로 숨기는 방법 중, 크기를 0으로 만드는 방식이 있습니다(width:0; height:0). 그런데 — 크기가 완전히 0이면, 일부 스크린 리더·브라우저 조합에서 그 콘텐츠를 무시할 수 있죠. ’크기 0 = 렌더링되지 않음 = 무의미한 콘텐츠’로 판단해 건너뛰는 거죠. CP-443은 이를 막기 위한 크기 지정을 요구합니다.

크기 0의 문제:

무시 가능성 일부 스크린 리더는 width:0; height:0인 요소를, 화면에 아무 공간도 차지하지 않으니 ’존재하지만 의미 없는 것’으로 보고 무시할 수 있습니다. 그러면 그 안의 텍스트(sr-only로 주려던 안내)가 안 읽히죠. 의도와 달라집니다.

브라우저·스크린 리더 조합 차이 — 어떤 조합은 크기 0도 읽고, 어떤 조합은 무시합니다. 일관되지 않죠(CP-446 호환성과 연계).

그래서 CP-443은 — 숨긴 콘텐츠에 0이 아닌 최소 크기를 주라고 합니다:

1px 크기 표준 sr-only 기법은 width: 1px; height: 1px로 크기를 줍니다. 완전히 0이 아니라 1px 이라는 최소 크기를 가져, 스크린 리더가 ’존재하는 콘텐츠’로 인식하고 읽죠. 1px은 화면에서 거의 안 보이고 (게다가 clip으로 잘라내니 시각적으로 안 보임), 스크린 리더에는 읽히게 합니다.

clip으로 시각 숨김 1px 크기 + clip/clip-path로 그 1px마저 잘라내면 시각적으로 완전히 안 보이되, 요소는 1px 크기로 접근성 트리에 남아 읽히죠. CP-442의 표준 sr-only 클래스가 이 1px 크기 + clip 조합입니다.

표준 sr-only가 답. 결국 — CP-442(display:none 안 씀) + CP-443(크기 1px) + CP-444(top/left auto) 모두 — 표준 sr-only 클래스 하나에 담깁니다:

.sr-only { position: absolute; width: 1px; height: 1px; /* ← CP-443: 0이 아닌 1px */ padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); /* ← 시각 숨김 */ white-space: nowrap; border: 0; }

이 검증된 클래스를 쓰면 — CP-442·443·444가 한꺼번에 충족되죠. 즉 — 직접 0 크기로 숨기는 등 자작하지 말고, 검증된 sr-only 패턴을 쓰는 게 핵심입니다.

왜 검증된 패턴인가. sr-only 구현은 미묘합니다. 크기 0이면 무시되고(443), display:none이면 안 읽히고(442), 잘못된 위치값이면 대화형 요소 문제가 생기죠(444). 이 함정들을 검증된 표준 클래스가 다 피해갑니다. 그래서 유명 라이브러리(Bootstrap의 .visually-hidden 등)의 검증된 sr-only를 쓰는 게 안전하죠.

이 규칙은 숨긴 콘텐츠의 ’인식 보장(크기)’을 담당합니다 — 크기를 0이 아닌 1px로 지정해(443), 스크린 리더가 숨긴 콘텐츠를 무시하지 않고 읽게 하죠. CP-442(올바른 숨김)와 함께 sr-only를 견고하게 만듭니다.

정리하면 — 숨긴 콘텐츠 크기를 0으로 하면 일부 스크린 리더가 무시할 수 있으므로, 1px 같은 최소 크기를 주고 clip 으로 시각만 숨기는 검증된 sr-only 패턴을 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

1px 크기 — 숨긴 콘텐츠가 width/height 0이 아니라 1px 등 최소 크기인가.

무시 방지 — 스크린 리더가 숨긴 콘텐츠를 무시하지 않고 읽는가.

검증된 패턴 — 표준 sr-only 클래스(1px+clip)를 쓰는가.

개선 방향

크기 0 숨김을 1px + clip의 표준 sr-only로 교체.

검증된 라이브러리 sr-only(.visually-hidden 등) 사용. 스크린 리더 읽힘 검증.

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

역할	책임
퍼블리셔/개발	sr-only 크기·clip 구현
QA/접근성	숨긴 콘텐츠 무시 여부 검증

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

웹접근성 의무 대상이며 숨긴 콘텐츠를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 숨긴 콘텐츠가 width/height 0이 아니라 1px 등 최소 크기인가요?

□ 스크린 리더가 숨긴 콘텐츠를 무시하지 않고 읽나요?

□ 표준 sr-only 클래스(1px+clip)를 쓰나요?

❓ FAQ

Q1. 크기를 0으로 하면 왜 안 되나요? 일부 스크린 리더가 ’공간 없는 무의미한 콘텐츠’로 보고 무시할 수 있습니다. 1px 최소 크기를 줘야 인식하죠. Q2. 1px이면 화면에 보이지 않나요? clip/clip-path로 그 1px마저 잘라내 시각적으로 안 보입니다. 스크린 리더엔 1px 요소가 남아 읽히죠. Q3. 직접 만들어야 하나요? 검증된 표준 sr-only 클래스(라이브러리 .visually-hidden 등)를 쓰는 게 안전합니다. CP-442·443·444를 한 번에 충족하죠.

6. 마무리

CP-443의 메시지:

0이 아니라 1px로 — 숨긴 콘텐츠 크기를 지정해 스크린 리더가 무시하지 않게 하라.

크기 0이면 일부 스크린 리더가 무시할 수 있습니다. 1px 최소 크기 + clip의 검증된 sr-only 패턴으로 스크린 리더가 읽게 하는 게 핵심이죠. 다음 편은 대화형 요소 숨김 시 top/left 값입니다.

다음 편 예고 ▶ 「564. (CP-444) 대화형 요소를 숨길 때 별도의 값을 지정하는 대신 top, left 스타일 속성값이 auto로 유지되도록 하고 있다.」

ViewCheck는 숨긴 콘텐츠가 무시되지 않게 크기 지정됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 숨긴 콘텐츠(Visually hidden) 가이드 — https://www.krds.go.kr/html/site/component/component_45.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준