플레이스홀더는 레이블이 아니다

KRDS CP-394 — 모든 텍스트 영역에는 레이블을 제공하고, 도움말의 대체 수단으로 플레이스홀더를 사용하고 있지 않다.

0. 들어가며 — 회색 안내 글자만 믿으면

이번 514편은 모든 텍스트 영역에 레이블을 제공하고, 도움말의 대체 수단으로 플레이스홀더를 사용하지 않게 하라는 규칙입니다.

플레이스홀더(입력 전 회색 안내 글자)는 — 입력하면 사라지죠. 이걸 레이블이나 도움말 대신 쓰면, 입력 후 무슨 칸 인지·어떻게 쓰는지 알 수 없게 됩니다. CP-394는 레이블 필수 + 플레이스홀더 오남용 금지를 규정합니다. 셀렉트 CP-300의 텍스트 영역 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 레이블 제공 + 플레이스홀더 대체 금지

CP-394 (컴포넌트 > 텍스트 영역) “모든 텍스트 영역에는 레이블을 제공하고, 도움말의 대체 수단으로 플레이스홀더를 사용하고 있지 않다.”

모든 텍스트 영역에 항상 보이는 레이블을 두고, 레이블·도움말을 플레이스홀더로 대체하지 말라는 뜻입니다.

정리: 텍스트 영역에 레이블 필수, 플레이스홀더로 레이블·도움말 대체 금지. 이게 CP-394입니다.

2. 왜 레이블 + 플레이스홀더 한계인가

CP-394는 두 가지를 함께 다룹니다: ①모든 텍스트 영역에 레이블 제공, ②플레이스홀더를 레이블·도움말 대신 쓰지 않기. 둘은 연결돼 있죠.

① 모든 텍스트 영역에 레이블. 텍스트 영역에 — 무엇을 입력하는지 알리는 레이블이 항상 있어야 합니다.

용도 명확 — ‘문의 내용’, ‘신청 사유’, ’의견’처럼 — 그 영역에 무엇을 쓰는지 레이블로 분명히. 레이블이 없으면 무엇을 쓸지 모르죠.

항상 보임 — 레이블은 — 입력 전·후 항상 보입니다. 사용자가 작성 중에도 ’아, 이게 문의 내용 칸이지’를 계속 알 수 있게요.

프로그래밍 연결 — <label for>로 텍스트 영역과 연결해(CP-398), 스크린 리더도 읽게 합니다.

② 플레이스홀더를 레이블·도움말 대신 쓰지 않기. 플레이스홀더(placeholder) — 입력 전 입력창에 흐리게 보이는 안내 글자(‘여기에 문의 내용을 입력하세요’)를 — 레이블이나 도움말의 대체로 쓰면 안 됩니다.

플레이스홀더의 치명적 한계:

입력하면 사라짐 플레이스홀더는 사용자가 글자를 입력하기 시작하면 사라집니다. 만약 플레이스홀더에만 ‘무슨 칸인지’(레이블)나 ‘어떻게 쓰는지’(도움말)를 담으면, 입력 후엔 그 정보가 없어지죠. 작성 중에 ‘이게 무슨 칸이었지? 형식이 뭐였지?’ 다시 봐도 안 보입니다.

기억 부담 — 입력 전에 읽은 안내를 — 작성 내내 기억해야 하죠. 긴 글을 쓰는 텍스트 영역에선 특히 부담입니다.

대비 약함 플레이스홀더는 보통 흐린 회색이라 저시력 사용자가 읽기 어렵고, 명도 대비(CP-397)도 부족 하기 쉽죠.

스크린 리더 불일관 — 플레이스홀더의 스크린 리더 읽기는 — 브라우저·기기마다 일관되지 않습니다. 접근가능한 이름으로 신뢰하기 어렵죠.

그래서 CP-394는 — 레이블·도움말을 항상 보이는 별도 요소로 두고, 플레이스홀더는 보조로만(또는 안 쓰거나) 하라고 합니다:

레이블 — 항상 보이는 <label>로(필수).

도움말 — 형식·작성 안내는 — 항상 보이는 도움말 텍스트로(필요시).

플레이스홀더 — 써야 한다면 — 예시 정도의 보조로만. 레이블·도움말을 대체하지 않게요.

셀렉트 CP-300과의 일관. 셀렉트도 — ‘플레이스홀더는 레이블이 아니다’(CP-300)였죠. 같은 정신을 텍스트 영역에 적용한 게 CP-394입니다. 모든 폼 컨트롤에서 — 플레이스홀더는 레이블의 대체물이 아니라는 원칙이죠.

이 규칙은 텍스트 영역의 ’정체성·안내 지속성’을 담당합니다 — 레이블을 항상 보이게 두고(394), 플레이스홀더 의존을 피해 사용자가 작성 내내 무슨 칸인지·어떻게 쓰는지 알게 하죠.

정리하면 — 플레이스홀더는 입력 시 사라지고 대비·스크린 리더가 불안정하므로, 모든 텍스트 영역에 항상 보이는 레이블· 도움말을 제공하고 플레이스홀더를 그 대체로 쓰지 말아야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 필수 — 모든 텍스트 영역에 항상 보이는 레이블이 있는가.

플레이스홀더 대체 배제 — 레이블·도움말이 플레이스홀더로만 제공되지 않는가.

도움말 지속 — 형식·작성 안내가 항상 보이는 도움말 텍스트인가.

개선 방향

모든 텍스트 영역에 항상 보이는 <label>(CP-398 연결). 형식 안내는 도움말 텍스트.

플레이스홀더는 예시 보조로만. 레이블·도움말 대체 제거.

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

역할	책임
콘텐츠/UX	레이블·도움말 작성
퍼블리셔/개발	레이블 연결·플레이스홀더 정리

기관 유형	CP-394 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (텍스트 영역 사용 시)

텍스트 영역을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 텍스트 영역에 항상 보이는 레이블이 있나요?

□ 레이블·도움말이 플레이스홀더로만 제공되지 않나요?

□ 형식·작성 안내가 항상 보이는 도움말 텍스트인가요?

❓ FAQ

Q1. 플레이스홀더에 안내를 넣으면 안 되나요? 입력하면 사라져 작성 중 정보를 잃습니다. 레이블·도움말은 항상 보이는 별도 요소로 두고, 플레이스홀더는 보조로만 쓰죠. Q2. 왜 플레이스홀더가 접근성에 안 좋나요? 흐린 회색이라 대비가 약하고, 스크린 리더 읽기가 불일관합니다. 접근가능한 이름으로 신뢰하기 어렵죠. Q3. 셀렉트 CP-300과 같나요? 같은 정신입니다. ’플레이스홀더는 레이블이 아니다’를 텍스트 영역에 적용한 거죠.

6. 마무리

CP-394의 메시지:

플레이스홀더는 레이블이 아니다 — 레이블을 항상 보이게, 플레이스홀더로 대체하지 마라.

플레이스홀더는 입력 시 사라지고 대비·스크린 리더가 불안정합니다. 모든 텍스트 영역에 항상 보이는 레이블·도움말을 두고 플레이스홀더 의존을 피하는 게 핵심이죠. 다음 편은 복사·붙여넣기 제한 금지입니다.

다음 편 예고 ▶ 「515. (CP-395) 복사, 붙여쓰기를 제한하고 있지 않다.」

ViewCheck는 텍스트 영역에 레이블이 제공되고 플레이스홀더가 오남용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 영역(Textarea) 가이드 — https://www.krds.go.kr/html/site/component/component_39.html

WCAG 2.1 SC 3.3.2 Labels or Instructions — https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

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

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