눈엔 숨겨도 스크린 리더엔 남겨야

KRDS CP-442 — 숨긴 콘텐츠에 스크린 리더가 정보를 탐지하는 것을 방지하는 스타일을 사용하고 있지 않다.

0. 들어가며 — 숨겼더니 스크린 리더도 못 읽으면

이번 562편은 숨긴 콘텐츠에 스크린 리더가 정보를 탐지하는 것을 방지하는 스타일을 사용하지 말라는 규칙입니다.

’시각적으로만 숨긴 콘텐츠(sr-only)’의 목적은 — 화면엔 안 보이되 스크린 리더는 읽게 하는 것이죠. 그런데 — display: none처럼 잘못된 스타일로 숨기면, 스크린 리더도 못 읽어 목적이 무너집니다. CP-442는 올바른 숨김 스타일을 규정 합니다. 파일 업로드 input 숨김(CP-419)과 같은 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 스크린 리더 탐지 방지 스타일 금지

CP-442 (컴포넌트 > 숨긴 콘텐츠) “숨긴 콘텐츠에 스크린 리더가 정보를 탐지하는 것을 방지하는 스타일을 사용하고 있지 않다.”

시각적으로 숨긴 콘텐츠를, 스크린 리더도 못 읽게 만드는 스타일(display:none 등)로 숨기지 말라는 뜻입니다.

정리: 시각적으로만 숨기고 스크린 리더는 읽게 하라(display:none 금지). 이게 CP-442입니다.

2. 왜 탐지 방지 스타일을 피하나

’시각적으로 숨긴 콘텐츠(visually hidden / sr-only)’의 목적은 화면에선 안 보이되, 스크린 리더는 읽게 하는 것입니다. 스크린 리더 사용자에게 추가 맥락·안내(반복 링크 구별, 표 캡션 등)를 줄 때 쓰죠. 그런데 어떻게 숨기느냐가 핵심입니다. 잘못 숨기면 스크린 리더도 못 읽어 목적이 무너지죠.

스크린 리더 탐지를 막는 스타일(잘못된 숨김):

display: none — 요소를 — 접근성 트리에서 완전히 제거합니다. 시각적으로도, 스크린 리더에서도 사라지죠. sr-only로 쓰면 안 됩니다(스크린 리더가 못 읽음).

visibility: hidden — 마찬가지로 — 접근성 트리에서 제거됩니다. 스크린 리더가 못 읽죠.

width:0; height:0만으로 — 크기를 0으로만 하면 — 일부 스크린 리더가 내용을 무시할 수 있습니다(CP-443 연계).

이 스타일들로 숨기면 — 스크린 리더 사용자가 그 정보를 못 얻습니다. sr-only의 목적(스크린 리더는 읽게)과 정반대죠.

그래서 CP-442는 — 스크린 리더가 읽을 수 있는 올바른 숨김 스타일을 쓰라고 합니다. 표준 sr-only 기법:

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

시각적으로만 숨김 clip-path/clip으로 화면엔 안 보이게 잘라내되, 요소는 접근성 트리에 남아 있습니다. 스크린 리더가 그 텍스트를 읽죠.

display:none 안 씀 핵심은 display:none/visibility:hidden을 안 쓰는 것입니다. 그 대신 위치·클립 기법으로 시각만 숨기죠.

왜 이 차이가 중요한가:

sr-only의 본질 sr-only는 ’스크린 리더 전용 콘텐츠’입니다. 스크린 리더가 못 읽으면 존재 이유가 없죠. 올바른 숨김 스타일만이 이 본질을 지킵니다.

흔한 실수 — 개발 중 — ‘안 보이게’ 하려고 display:none을 무심코 쓰면, sr-only가 무용지물이 됩니다. 표준 sr-only 클래스를 써야 하죠.

파일 업로드 CP-419와의 연결. 파일 input 숨김(CP-419)도 display:none이 아니라 sr-only 기법으로 숨기라는 것이었죠. 같은 정신입니다 시각만 숨기고 접근성은 유지. CP-442는 이 원칙을 모든 숨긴 콘텐츠로 일반화합니다.

이 규칙은 숨긴 콘텐츠의 ’스크린 리더 가독성 보장’을 담당합니다 — 시각만 숨기고 스크린 리더는 읽게 하는 올바른 스타일로(442), sr-only가 제 목적(스크린 리더 전용 안내)을 다하게 하죠.

정리하면 — display:none·visibility:hidden은 스크린 리더도 못 읽게 해 sr-only의 목적을 무너뜨리므로, clip-path 등으로 시각적으로만 숨기고 접근성 트리에 남겨 스크린 리더가 읽게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

올바른 숨김 — sr-only가 clip-path 등으로 숨겨지고 display:none/visibility:hidden이 아닌가.

스크린 리더 읽힘 — 숨긴 콘텐츠가 스크린 리더로 실제 읽히는가.

표준 클래스 — 검증된 sr-only 클래스를 쓰는가.

개선 방향

display:none/visibility:hidden로 숨긴 sr-only를 표준 sr-only 기법(clip-path 등)으로 교체.

스크린 리더로 숨긴 콘텐츠가 읽히는지 실제 검증.

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

역할	책임
퍼블리셔/개발	올바른 sr-only 스타일 구현
QA/접근성	숨긴 콘텐츠 스크린 리더 읽힘 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ sr-only가 clip-path 등으로 숨겨지고 display:none/visibility:hidden이 아닌가요?

□ 숨긴 콘텐츠가 스크린 리더로 실제 읽히나요?

□ 검증된 표준 sr-only 클래스를 쓰나요?

❓ FAQ

Q1. display:none으로 숨기면 왜 안 되나요? 접근성 트리에서도 제거돼 스크린 리더가 못 읽습니다. sr-only(스크린 리더 전용)의 목적이 무너지죠. Q2. 어떻게 숨겨야 하나요? clip-path/clip + position:absolute + 1px 크기의 표준 sr-only 기법으로 시각만 숨기고 접근성 트리에 남깁니다. Q3. 파일 input 숨김(CP-419)과 같나요? 네. 같은 원칙입니다. 시각만 숨기고 접근성 유지. CP-442는 이를 모든 숨긴 콘텐츠로 일반화하죠.

6. 마무리

CP-442의 메시지:

눈엔 숨겨도 스크린 리더엔 남겨야 — 스크린 리더 탐지를 막는 스타일을 쓰지 마라.

display:none은 스크린 리더도 못 읽게 해 sr-only의 목적을 무너뜨립니다. clip-path 등으로 시각만 숨기고 접근성 트리에 남겨 스크린 리더가 읽게 하는 게 핵심이죠. 다음 편은 숨긴 콘텐츠 크기 지정입니다.

다음 편 예고 ▶ 「563. (CP-443) 스크린 리더에서 정보가 무시되지 않게 숨긴 콘텐츠의 크기를 지정하고 있다.」

ViewCheck는 숨긴 콘텐츠가 스크린 리더 탐지를 막는 스타일을 쓰지 않는지를 진단합니다.

📚 참고 출처

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

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

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