필드와 레이블을 코드로 묶어

KRDS CP-391 — 입력 필드에 레이블을 명확하게 지정하고 있다.

0. 들어가며 — 레이블이 보여도 연결이 안 되면

이번 511편은 입력 필드에 레이블을 명확하게 지정하라는 규칙입니다.

CP-385에서 날짜 필드에 ‘무슨 날짜인지’ 레이블·설명을 두라고 했죠. 이번 CP-391은 그 레이블을 입력 필드와 프로그래 밍적으로 명확히 지정(연결) 하라는 규칙입니다. 화면에 레이블이 보여도 코드로 연결 안 되면 스크린 리더가 못 읽죠. 이번 편을 풀어냅니다.

1. 원문 — 레이블 명확 지정

CP-391 (컴포넌트 > 날짜 입력 필드) “입력 필드에 레이블을 명확하게 지정하고 있다.”

날짜 입력 필드에 레이블을 프로그래밍적으로 명확히 지정(연결)해, 스크린 리더 등이 무슨 필드인지 인식하게 하라는 뜻입니다.

정리: 날짜 필드에 레이블을 프로그래밍적으로 명확히 지정하라. 이게 CP-391입니다.

2. 왜 레이블 명확 지정인가

CP-385는 — 날짜 필드에 ‘무슨 날짜인지’ 레이블·설명을 두라는 내용 차원이었습니다. CP-391은 — 그 레이블을 입력 필드와 프로그래밍적으로 연결하라는 구현 차원이죠. 둘이 짝입니다.

시각 레이블만으론 부족. 화면에 ’생년월일’이라는 레이블 텍스트가 날짜 필드 옆에 보여도, 그 텍스트가 필드와 프로그래밍적으로 연결돼 있지 않으면, 스크린 리더는 그 둘을 별개로 인식합니다. 스크린 리더 사용자가 날짜 필드에 초점이 가면 ’편집창’이라고만 듣고, 무슨 필드인지 모르죠. 이는 모든 폼 컨트롤의 접근가능한 이름 문제입니다(라디오 CP-287, 체크박스 CP-296, 셀렉트 CP-303과 같은 정신).

그래서 CP-391은 — 레이블을 입력 필드에 명확히 지정하라고 합니다:

<label for> 연결 (권장) — <label for="birthdate">생년월일</label> + <input id="birthdate" type="date">. 레이블과 필드를 for/id로 연결하죠. 그러면 — 스크린 리더가 필드를 읽을 때 ’생년월일, 편집창’처럼 레이블을 함께 읽습니다. 레이블을 클릭하면 필드에 포커스도 가고요(클릭 영역 확대).

aria-labelledby/aria-label — 화면 텍스트를 참조(aria-labelledby)하거나 직접 이름 부여(aria-label) 하는 방법도 있죠. 단, 날짜 필드엔 보이는 <label> 연결이 최선입니다.

날짜 필드의 특수성 여러 칸. 날짜를 연/월/일 여러 칸으로 나눠 받는 경우(예: 연 [____] 월 [__] 일 [__]), 각 칸에도 명확한 레이블이 필요하죠. ‘생년월일’이라는 그룹 레이블(fieldset/legend 정신)에 더해 각 칸이 ’연’, ‘월’, ’일’임을 스크린 리더가 알게 합니다. 안 그러면 ’편집창, 편집창, 편집창’으로만 들려 어느 칸이 무엇인지 모르죠. 그룹 레이블 + 각 칸 레이블을 함께 지정합니다.

레이블 + 형식 안내 + 설명. 명확한 레이블 지정(391)에 더해 — 형식 안내(CP-386·392)·도움말을 — aria-describedby 로 필드에 연결하면, 스크린 리더가 레이블 + 형식 안내를 함께 읽죠. ’생년월일, YYYY-MM-DD 형식, 편집창’처럼요. 레이블(391)은 이름, 형식 안내(386)는 설명으로 연결합니다.

CP-385와 CP-391의 관계. CP-385는 ‘무슨 날짜인지 명확한 레이블·설명을 제공’(내용+존재), CP-391은 ‘그 레이블을 프로그래밍적으로 명확히 지정’(연결)입니다. 비슷해 보이지만 385는 레이블이 있고 의미가 명확한지, 391은 그게 코드로 필드와 연결됐는지를 강조하죠. 보통 <label for> 하나로 둘 다 충족합니다.

이 규칙은 날짜 입력의 ’레이블 연결 접근성’을 담당합니다 — 레이블을 입력 필드와 프로그래밍적으로 지정해(391), 스크린 리더 사용자가 무슨 날짜 필드인지 알게 하죠. 폼 컨트롤 접근성의 일관된 원칙입니다.

정리하면 — 시각 레이블이 보여도 필드와 코드로 연결 안 되면 스크린 리더가 못 읽으므로, <label for> 등으로 레이블을 입력 필드에 명확히 지정하고 여러 칸이면 각 칸도 레이블해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 연결 — 날짜 필드가 <label for>/id 등으로 레이블과 연결됐는가.

각 칸 레이블 — 연/월/일 여러 칸이면 각 칸에도 레이블이 지정됐는가.

형식·설명 연결 — 형식 안내·도움말이 aria-describedby로 연결됐는가.

개선 방향

날짜 필드에 <label for> 연결. 여러 칸은 그룹 레이블 + 각 칸 레이블.

형식 안내(CP-386)를 aria-describedby로 연결.

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

역할	책임
퍼블리셔/개발	label 연결·각 칸 레이블 구현
QA/접근성	스크린 리더 필드 식별 검증

기관 유형	CP-391 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (날짜 입력 사용 시)

웹접근성 의무 대상이며 날짜 입력을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 날짜 필드가 <label for>/id 등으로 레이블과 연결됐나요?

□ 연/월/일 여러 칸이면 각 칸에도 레이블이 지정됐나요?

□ 형식 안내·도움말이 aria-describedby로 연결됐나요?

❓ FAQ

Q1. 레이블이 보이는데 왜 연결이 필요한가요? 보여도 코드로 연결 안 되면 스크린 리더가 별개로 인식합니다. <label for> 등으로 연결해야 무슨 필드인지 읽죠. Q2. CP-385와 뭐가 다른가요? CP-385는 ‘무슨 날짜인지 명확한 레이블 제공’(내용), CP-391은 ‘그 레이블을 프로그래 밍적으로 지정’(연결)입니다. 보통 <label for>로 둘 다 충족하죠. Q3. 연/월/일 칸을 나누면요? 그룹 레이블(‘생년월일’) + 각 칸(‘연’,‘월’,‘일’) 레이블을 함께 지정합니다. 안 그러면 어느 칸이 뭔지 모르죠.

6. 마무리

CP-391의 메시지:

필드와 레이블을 코드로 묶어 — 입력 필드에 레이블을 명확하게 지정하라.

시각 레이블이 보여도 코드로 연결 안 되면 스크린 리더가 못 읽습니다. <label for> 등으로 레이블을 필드에 명확히 지정하고 여러 칸도 레이블하는 게 핵심이죠. 다음 편은 입력 형식 명확 안내입니다.

다음 편 예고 ▶ 「512. (CP-392) 날짜 입력 형식이 지정되어 있는 경우 사용자에게 입력 방식을 명확하게 안내하고 있다.」

ViewCheck는 날짜 필드에 레이블이 명확히 지정됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 날짜 입력 필드(Date input) 가이드 — https://www.krds.go.kr/html/site/component/component_38.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컴포넌트,웹표준