화면 밖으로 밀지 말고 제자리에

KRDS CP-444 — 대화형 요소를 숨길 때 별도의 값을 지정하는 대신 top, left 스타일 속성값이 auto로 유지되도록 하고 있다.

0. 들어가며 — 숨긴 버튼에 포커스가 가면 화면이 튄다

이번 564편은 대화형 요소를 숨길 때 별도의 값 지정 대신 top, left 속성값이 auto로 유지되게 하라는 규칙입니다.

숨긴 콘텐츠가 — 대화형 요소(링크·버튼)를 포함할 때, 화면 밖 멀리(top:-9999px 등)로 밀어 숨기면, 키보드 포커스가 그곳에 갈 때 화면이 갑자기 그쪽으로 스크롤돼 튀죠. CP-444는 top/left를 auto로 유지하라고 규정합니다. sr-only의 세부 함정이죠. 이번 편을 풀어냅니다.

1. 원문 — 대화형 요소 숨김 시 top/left auto 유지

CP-444 (컴포넌트 > 숨긴 콘텐츠) “대화형 요소를 숨길 때 별도의 값을 지정하는 대신 top, left 스타일 속성값이 auto로 유지되도록 하고 있다.”

링크·버튼 등 대화형 요소를 숨길 때, top·left에 특정 좌표값을 주지 말고 auto로 유지하라는 뜻입니다.

정리: 대화형 요소를 숨길 때 top/left를 화면 밖 좌표로 밀지 말고 auto로. 이게 CP-444입니다.

2. 왜 top/left auto인가

숨긴 콘텐츠가 — 대화형 요소(키보드 포커스를 받는 링크·버튼·입력 등)를 포함하면, 숨김 방식에 특별한 주의가 필요합니다. 시각적으로 숨긴 요소도 — 대화형이면 키보드 포커스가 갈 수 있기 때문이죠(예: 메인 콘텐츠 바로가기 스킵 링크는 평소 숨겨져 있다가 Tab 시 나타남).

잘못된 숨김 — 화면 밖 좌표로 밀기:

top: -9999px / left: -9999px — 옛날 sr-only 기법 중에는 — 요소를 화면 밖 멀리(예: 위로 9999px, 왼쪽으로 9999px) 밀어 숨기는 방식이 있었습니다. 시각적으로는 안 보이죠.

포커스 시 화면 튐(스크롤 점프) 문제는 그 안의 대화형 요소에 키보드 포커스가 가면, 브라우저가 포커스된 요소를 화면에 보이려고 그쪽으로 스크롤합니다. 요소가 화면 밖 9999px에 있으니 화면이 갑자기 그 멀리로 튀죠. 사용자는 Tab을 눌렀는데 화면이 엉뚱한 곳으로 점프해 당황합니다. 빈 화면이 보이거나, 맥락을 잃죠. 키보드 사용자에게 혼란스러운 경험입니다.

그래서 CP-444는 — 대화형 요소를 숨길 때 — top·left에 화면 밖 좌표를 주지 말고 auto로 유지하라고 합니다:

top/left auto 표준 sr-only 기법(position:absolute + clip-path + width/height:1px)은 top·left를 특정 좌표로 안 밀고 auto(기본 위치) 로 둡니다. 요소는 원래 자리 근처에 1px 크기로 있되, clip으로 시각만 잘리죠. 화면 밖으로 안 밀어내니 포커스가 가도 화면이 튀지 않습니다.

clip 방식 사용 — 화면 밖 이동(top:-9999px) 대신 — clip/clip-path로 제자리에서 잘라내는 방식을 씁 니다. 이게 CP-442·443에서 본 표준 sr-only고, top/left도 auto로 유지되죠.

표준 sr-only가 다 해결. 다시 강조하면 CP-442(display:none 금지) + CP-443(1px 크기) + CP-444(top/left auto)는 모두 검증된 표준 sr-only 클래스 하나로 충족됩니다. 그 클래스는 clip 방식이라 화면 밖으로 안 밀고 (top/left auto), 1px 크기(무시 안 됨), display:none 안 씀(읽힘). 즉 top:-9999px 같은 옛 방식을 안 쓰고 표준 clip sr-only를 쓰면, 이 함정들을 다 피하죠.

스킵 링크 예외 처리. ‘메인 콘텐츠 바로가기’ 같은 스킵 링크는 — 평소엔 sr-only로 숨기되, 포커스되면 보이게 (:focus에서 sr-only 해제) 합니다. 포커스 시 화면 제자리에 나타나, 사용자가 보고 누르죠. 이때도 — 화면 밖 좌표가 아니라 제자리 근처에서 나타나야 자연스럽습니다(top/left auto 정신).

이 규칙은 숨긴 콘텐츠의 ’대화형 요소 안전 숨김’을 담당합니다 — top/left를 화면 밖으로 밀지 않고 auto로 유지해 (444), 숨긴 대화형 요소에 포커스가 가도 화면이 튀지 않게 하죠. 키보드 사용자의 혼란을 막는 sr-only의 세부 요건 입니다.

정리하면 — 대화형 요소를 화면 밖 좌표(top:-9999px)로 밀어 숨기면 포커스 시 화면이 튀므로, top/left를 auto로 유지하는 clip 방식 표준 sr-only로 제자리에서 시각만 숨겨야 합니다.

3. 점검 / 개선

무엇을 점검하나

top/left auto — 대화형 요소 숨김에 top:-9999px 등 화면 밖 좌표를 안 쓰는가.

화면 안 튐 — 숨긴 대화형 요소에 포커스가 가도 화면이 점프하지 않는가.

clip 방식 — 화면 밖 이동 대신 clip 방식 표준 sr-only를 쓰는가.

개선 방향

top:-9999px/left:-9999px 숨김을 clip 방식 표준 sr-only로 교체(top/left auto).

스킵 링크는 :focus 시 제자리에서 나타나게. 키보드 Tab 시 화면 튐 검증.

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

역할	책임
퍼블리셔/개발	clip 방식 sr-only·스킵 링크 구현
QA/접근성	키보드 포커스 시 화면 튐 검증

기관 유형	CP-444 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (숨긴 대화형 요소 사용 시)

웹접근성 의무 대상이며 숨긴 대화형 요소를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 대화형 요소 숨김에 top:-9999px 등 화면 밖 좌표를 안 쓰나요?

□ 숨긴 대화형 요소에 포커스가 가도 화면이 점프하지 않나요?

□ 화면 밖 이동 대신 clip 방식 표준 sr-only를 쓰나요?

❓ FAQ

Q1. top:-9999px로 숨기면 왜 안 되나요? 그 안의 대화형 요소에 포커스가 가면 브라우저가 그쪽으로 스크롤해 화면이 9999px 밖으로 튑니다. 키보드 사용자가 당황하죠. Q2. 어떻게 숨기나요? clip/clip-path로 제자리에서 잘라내고 top/left는 auto로 둡니다. 표준 sr-only 클래스가 이 방식이죠. Q3. 스킵 링크는요? 평소 sr-only로 숨기되 :focus 시 제자리에서 나타나게 합니다. 포커스하면 보고 누를 수 있게요.

6. 마무리

CP-444의 메시지:

화면 밖으로 밀지 말고 제자리에 — 대화형 요소 숨김 시 top/left를 auto로 유지하라.

화면 밖 좌표로 밀면 포커스 시 화면이 튑니다. clip 방식 표준 sr-only로 top/left를 auto로 유지해 제자리에서 시각만 숨기는 게 핵심이죠. 다음 편은 숨긴 콘텐츠 언어 변경입니다.

다음 편 예고 ▶ 「565. (CP-445) 서비스 제공 언어를 변경할 때 숨긴 콘텐츠에 포함된 텍스트의 언어도 변경되도록 하고 있다.」

ViewCheck는 대화형 요소 숨김 시 top/left가 auto로 유지되는지를 진단합니다.

📚 참고 출처

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

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

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