어느 조합에서도 똑같이

KRDS CP-446 — 숨김콘텐츠에 대해 다양한 스크린 리더와 브라우저 조합에서 호환성을 보장하고 있다.

0. 들어가며 — CP의 마지막, 호환성

이번 566편은 숨긴 콘텐츠에 대해 다양한 스크린 리더와 브라우저 조합에서 호환성을 보장하라는 규칙입니다. 컴포넌트(CP) 446개의 마지막 규칙이죠.

숨긴 콘텐츠(sr-only)는 — 스크린 리더·브라우저 조합마다 동작이 미묘하게 다를 수 있습니다. 한 조합에선 읽히는데 다른 조합에선 안 읽히면 — 일부 사용자가 배제되죠. CP-446은 여러 조합에서 일관된 호환성을 요구합니다. 이번 편을 풀어냅니다.

1. 원문 — 다양한 SR·브라우저 조합 호환성

CP-446 (컴포넌트 > 숨긴 콘텐츠) “숨김콘텐츠에 대해 다양한 스크린 리더와 브라우저 조합에서 호환성을 보장하고 있다.”

숨긴 콘텐츠가 여러 스크린 리더·브라우저 조합에서 일관되게 작동하도록 호환성을 보장하라는 뜻입니다.

정리: 숨긴 콘텐츠를 여러 SR·브라우저 조합에서 일관되게 작동하게 하라. 이게 CP-446입니다.

2. 왜 호환성 보장인가

스크린 리더는 여러 종류가 있습니다: NVDA, JAWS(Windows), VoiceOver(Mac·iOS), TalkBack(Android), 센스리더 (국내) 등. 브라우저도 Chrome, Edge, Firefox, Safari 등 여럿이죠. 사용자는 이들을 다양한 조합으로 씁니다 (NVDA+Chrome, JAWS+Edge, VoiceOver+Safari 등). 그런데 숨긴 콘텐츠(sr-only)의 동작은, 조합마다 미묘하게 다를 수 있습니다.

조합별 차이의 문제:

읽힘 차이 같은 sr-only 코드가 한 조합(NVDA+Chrome)에선 잘 읽히는데, 다른 조합(JAWS+특정 브라우저)에선 안 읽히거나 다르게 읽힐 수 있습니다. CSS 숨김 방식, ARIA 처리, 접근성 트리 해석이 스크린 리더·브라우저마다 조금씩 달라서죠.

일부 사용자 배제 — 한 조합에서만 작동하게 만들면 — 다른 조합을 쓰는 사용자는 숨긴 안내를 못 받습니다. 특정 스크린 리더 사용자만 정보를 얻고, 다른 사용자는 배제되죠.

검증 부족 — 개발자가 — 자기가 쓰는 한 조합(예: NVDA+Chrome)에서만 테스트하면, 다른 조합의 문제를 놓칩니다.

그래서 CP-446은 — 여러 조합에서 호환성을 보장하라고 합니다:

검증된 표준 패턴 사용 숨김 방식을 자작하지 말고, 검증된 표준 sr-only 클래스(CP-442·443·444 충족, 유명 라이브러리의 .visually-hidden 등)를 씁니다. 이런 패턴은 여러 조합에서 폭넓게 테스트돼 호환성이 검증돼 있죠. 함정(display:none, 크기 0, top:-9999px)을 피한 clip 방식이라 대부분 조합에서 작동합니다.

다중 조합 테스트 — 주요 스크린 리더·브라우저 조합에서 — 숨긴 콘텐츠가 일관되게 읽히는지 실제로 테스트합니다:

Windows: NVDA+Chrome, NVDA+Firefox, JAWS+Edge.

Mac/iOS: VoiceOver+Safari.

Android: TalkBack+Chrome.

국내: 센스리더 등. 한 조합만이 아니라 — 사용자가 실제로 쓰는 여러 조합에서 검증하죠.

표준 준수 ARIA·HTML 표준을 정확히 따르면 표준을 지키는 스크린 리더·브라우저에서 일관되게 작동합니다. 비표준·꼼수 구현은 일부 조합에서만 작동할 위험이 크죠.

왜 마지막 규칙으로 호환성인가. 숨긴 콘텐츠(CP-440~446) 규칙들은 올바른 숨김 방법을 정교하게 다뤘습니다. 그 모든 게 결국 ’다양한 환경의 모든 사용자에게 일관되게 작동하는가’로 귀결되죠. CP-446은 그 종합적 보장 입니다. 한 환경에서 완벽해도 다른 환경에서 깨지면 안 되니까요. 접근성의 궁극 목표인 ’모든 사용자, 모든 환경 포용’을 담은 규칙입니다.

이 규칙은 숨긴 콘텐츠의 ’환경 호환성’을 담당합니다 — 여러 SR·브라우저 조합에서 일관되게 작동하게(446), 어떤 환경의 사용자도 숨긴 안내를 받게 하죠. 검증된 패턴 + 다중 조합 테스트가 핵심입니다.

정리하면 — 숨긴 콘텐츠는 스크린 리더·브라우저 조합마다 동작이 달라 한 조합에서만 작동하면 일부 사용자가 배제되 므로, 검증된 표준 패턴과 다중 조합 테스트로 모든 환경에서 일관된 호환성을 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

검증된 패턴 — 숨김 방식이 검증된 표준 sr-only 패턴인가(자작·꼼수 아님).

다중 조합 테스트 — 주요 SR·브라우저 조합(NVDA/JAWS/VoiceOver/TalkBack/센스리더 등)에서 검증했는가.

일관 작동 — 모든 조합에서 숨긴 콘텐츠가 일관되게 읽히는가.

개선 방향

검증된 표준 sr-only(.visually-hidden 등) 사용. 함정(display:none/0크기/-9999px) 제거.

주요 SR·브라우저 조합에서 실제 테스트. ARIA·HTML 표준 준수.

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

역할	책임
퍼블리셔/개발	검증된 sr-only·표준 준수 구현
QA/접근성	다중 SR·브라우저 조합 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 숨김 방식이 검증된 표준 sr-only 패턴인가요(자작·꼼수 아님)?

□ 주요 SR·브라우저 조합에서 검증했나요?

□ 모든 조합에서 숨긴 콘텐츠가 일관되게 읽히나요?

❓ FAQ

Q1. 한 조합에서 잘 되면 충분하지 않나요? 아닙니다. 조합마다 동작이 달라 다른 조합에선 안 될 수 있습니다. 한 조합만 작동하면 다른 사용자가 배제되죠. Q2. 어떻게 호환성을 보장하나요? 검증된 표준 sr-only 패턴(여러 조합에서 테스트된)을 쓰고, 주요 SR·브라우저 조합에서 실제 검증합니다. Q3. 어떤 조합을 테스트하나요? NVDA/JAWS+Chrome/Edge/Firefox(Windows), VoiceOver+Safari(Mac/iOS), TalkBack +Chrome(Android), 센스리더(국내) 등 사용자가 실제 쓰는 조합이죠.

6. 마무리 — 컴포넌트(CP) 446개 완결

CP-446의 메시지:

어느 조합에서도 똑같이 — 숨긴 콘텐츠를 다양한 SR·브라우저 조합에서 호환되게 하라.

숨긴 콘텐츠는 조합마다 동작이 달라 한 조합에서만 작동하면 일부 사용자가 배제됩니다. 검증된 표준 패턴과 다중 조합 테스트로 모든 환경에서 일관되게 작동하게 하는 게 핵심이죠.

이로써 컴포넌트(CP) 446개 규칙이 모두 마무리됩니다. 공식 배너부터 숨긴 콘텐츠까지 — 45개 컴포넌트의 모든 규칙을 분해했습니다. 디자인 스타일(DS) 120개와 합쳐 — 566개가 완결됐고, 다음은 기본 패턴(BP)·서비스 패턴(SP) 입니다.

다음 편 예고 ▶ 「567. (BP-001) 기본 패턴 — 폼/입력 패턴의 첫 규칙부터 시작합니다.」

ViewCheck는 숨긴 콘텐츠가 다양한 SR·브라우저 조합에서 호환되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 4.1.1 Parsing / 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컴포넌트,웹표준