숨기되 죽이지는 마라

KRDS CP-419 — 역할이 스크린 리더로 전달될 수 있도록 에 적절한 숨김 스타일을 사용하고 있다.

0. 들어가며 — 못생긴 기본 버튼을 숨길 때

이번 539편은 <input type="file">에 적절한 숨김 스타일을 사용해 역할이 스크린 리더로 전달되게 하라는 규칙입니다. 이로써 파일 업로드 14개 규칙이 마무리됩니다.

기본 파일 입력은 — 브라우저마다 못생기고 제각각이라 숨기고 커스텀 버튼으로 꾸미죠. 그런데 — 잘못 숨기면 (display:none) 스크린 리더가 그 input을 못 읽어 파일 업로드 기능이 사라집니다. CP-419는 올바른 숨김 방법을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 역할 전달되는 적절한 숨김 스타일

CP-419 (컴포넌트 > 파일 업로드) “역할이 스크린 리더로 전달될 수 있도록 <input type="file">에 적절한 숨김 스타일을 사용하고 있다.”

<input type="file">을 시각적으로 숨기되, 스크린 리더가 그 역할을 인식할 수 있는 올바른 숨김 방법을 사용하라는 뜻입니다.

정리: input type=file을 스크린 리더가 인식하는 방식으로 숨겨라. 이게 CP-419입니다.

2. 왜 적절한 숨김 스타일인가

파일 업로드 구현의 기술적 핵심입니다. <input type="file"> 이 기본 HTML 파일 입력은, 브라우저마다 모양이 제각각이고(‘파일 선택’ 버튼 + ‘선택된 파일 없음’ 텍스트) 디자인을 바꾸기 어려워 못생겼죠. 그래서 거의 모든 사이트가 이 기본 input을 숨기고, 예쁜 커스텀 버튼(<label>)으로 대체합니다.

문제는 — 어떻게 숨기느냐입니다. 잘못 숨기면 접근성이 깨지죠.

잘못된 숨김 — display:none / visibility:hidden:

기능 자체 사라짐 <input type="file">을 display:none이나 visibility:hidden으로 숨기면, 시각적 으로만이 아니라 접근성 트리에서도 제거됩니다. 그러면 스크린 리더가 그 input을 인식하지 못하죠. 스크린 리더 사용자에겐 파일 업로드 기능이 아예 없는 것이 됩니다. 키보드 포커스도 안 가고요.

결과 — 시각 사용자는 커스텀 버튼으로 파일을 올리지만 — 스크린 리더 사용자는 파일 업로드 자체를 못 합니다. 심각한 접근성 장벽이죠.

그래서 CP-419는 — input을 시각적으로만 숨기되 접근성은 유지하는 적절한 숨김 스타일을 쓰라고 합니다:

시각적 숨김(visually hidden) 기법 — display:none 대신 — 화면에서만 안 보이게 하되 접근성 트리엔 남기는 CSS 기법을 씁니다. 흔한 방법:

opacity: 0 + 위치 겹치기, 또는

clip-path/clip + position:absolute + 1px 크기 (전통적 sr-only 기법), 또는

input을 투명하게 해 커스텀 버튼 위에 겹치기.

핵심은 — input이 접근성 트리에 남아 스크린 리더가 ’파일 업로드, 버튼/입력’으로 인식하고, 키보드 포커스도 가게 하는 것이죠.

label 연결 보이는 커스텀 버튼을 <label for>로 input과 연결하거나 <label>로 감쌉니다. 그러면 커스텀 버튼을 클릭/Enter하면 연결된(숨긴) input이 작동해 파일 대화상자가 열리죠. 시각은 커스텀 버튼, 기능· 접근성은 input이 담당합니다.

역할·이름 전달 숨긴 input의 역할(‘파일 업로드’)과 레이블(CP-407)이 스크린 리더에 전달돼야 합니다. 적절 히 숨기면 스크린 리더가 ’○○ 파일 업로드, 버튼’처럼 읽죠.

CP-417과의 연계. 올바른 숨김(419)을 해야 — 포커스가 살아 있어 포커스링(CP-417)을 보이는 커스텀 버튼에 전달 하죠. display:none이면 포커스 자체가 안 가니 포커스링도 의미 없습니다. CP-419(올바른 숨김) + CP-417(포커스링)이 함께 — 파일 선택 버튼의 키보드·스크린 리더 접근성을 완성합니다.

왜 이게 중요한가. 파일 업로드는 공공 서비스에서 필수 기능(증빙 서류 제출)인데, 잘못 숨기면 스크린 리더 사용자가 아예 못 씁니다. 이는 서비스 이용 자체를 막는 심각한 장벽이죠. 올바른 숨김은 접근성의 기본 중 기본입니다.

이 규칙은 파일 업로드의 ’구현 접근성 기반’을 담당합니다 — input을 올바르게 숨겨(419), 시각적으론 커스텀 버튼이되 스크린 리더·키보드엔 파일 업로드 기능이 살아 있게 하죠. 파일 업로드 14개 규칙이 이로써 마무리됩니다.

정리하면 — <input type="file">을 display:none으로 숨기면 스크린 리더가 파일 업로드를 인식 못 해 기능이 사라지므로, 시각적으로만 숨기고 접근성 트리에 남기는 적절한 숨김 스타일을 써서 역할이 스크린 리더에 전달되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 숨김 — input이 display:none이 아니라 시각적 숨김(sr-only 등)으로 처리됐는가.

역할 전달 — 스크린 리더가 파일 업로드 input을 인식하는가.

키보드·label — 키보드 포커스가 가고, label로 커스텀 버튼과 연결됐는가(CP-417).

개선 방향

display:none/visibility:hidden 제거. sr-only(clip/opacity 등) 또는 투명 겹치기로 숨김.

<label for> 연결. 스크린 리더 역할·이름 전달, 포커스 유지(CP-417).

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

역할	책임
퍼블리셔/개발	input 시각적 숨김·label 연결 구현
QA/접근성	스크린 리더 파일 업로드 인식·키보드 검증

기관 유형	CP-419 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (커스텀 파일 업로드 사용 시)

웹접근성 의무 대상이며 커스텀 파일 업로드를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ input이 display:none이 아니라 시각적 숨김(sr-only 등)으로 처리됐나요?

□ 스크린 리더가 파일 업로드 input을 인식하나요?

□ 키보드 포커스가 가고, label로 커스텀 버튼과 연결됐나요?

❓ FAQ

Q1. display:none으로 숨기면 왜 안 되나요? 접근성 트리에서도 제거돼 스크린 리더가 파일 업로드를 인식 못 합니다. 스크린 리더 사용자에겐 기능이 아예 없는 게 되죠. Q2. 어떻게 숨기나요? sr-only 기법(clip/opacity + absolute)이나 투명 겹치기로 시각적으로만 숨기고 접근성 트리·포커스는 유지합니다. <label>로 커스텀 버튼과 연결하고요. Q3. CP-417과 관계가 있나요? 네. 올바르게 숨겨야 포커스가 살아 포커스링(CP-417)을 보이는 버튼에 전달합니다. 함께 가야 하죠.

6. 마무리

CP-419의 메시지:

숨기되 죽이지는 마라 — input type=file을 스크린 리더가 인식하는 방식으로 숨겨라.

display:none으로 숨기면 스크린 리더가 파일 업로드를 인식 못 해 기능이 사라집니다. 시각적으로만 숨기고 접근성 트리에 남기는 적절한 숨김으로 역할이 전달되게 하는 게 핵심이죠. 이로써 파일 업로드 14개 규칙이 마무리됩니다. 다음 편부터는 언어 변경(Language switcher)입니다.

다음 편 예고 ▶ 「540. (CP-420) 언어 변경 — 사용자가 페이지 언어를 변경하는 데 사용하고 있다.」

ViewCheck는 input type=file이 적절한 숨김 스타일로 처리됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 파일 업로드(File upload) 가이드 — https://www.krds.go.kr/html/site/component/component_41.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컴포넌트,웹표준