입력창에 접근가능한 이름을

KRDS CP-398 — 스크린 리더 사용자가 텍스트 영역의 용도를 확인할 수 있도록 , title, aria-label, aria-labelledby 중 1가지 방식을 이용하여 레이블을 제공하고 있다.

0. 들어가며 — 스크린 리더에 ’편집창’이라고만 들리면

이번 518편은 각 텍스트 영역에 <label>, title, aria-label, aria-labelledby 중 1가지로 레이블을 제공하라는 규칙입니다. 이로써 텍스트 영역 6개 규칙이 마무리됩니다.

CP-394에서 ’모든 텍스트 영역에 (보이는) 레이블을 두라’고 했죠. 이번 CP-398은 그 레이블을 스크린 리더가 확인할 수 있게 프로그래밍적으로 연결하라는 규칙입니다. 셀렉트 CP-303·날짜 입력 CP-391과 평행한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 4가지 중 하나로 SR 레이블

CP-398 (컴포넌트 > 텍스트 영역) “스크린 리더 사용자가 텍스트 영역의 용도를 확인할 수 있도록 , title, aria-label, aria-labelledby 중 1가지 방식을 이용하여 레이블을 제공하고 있다.”

각 텍스트 영역에 4가지 방법 중 하나로 접근가능한 이름을 부여해, 스크린 리더가 용도를 알리게 하라는 뜻입니다.

정리: 각 텍스트 영역에 4가지 중 하나로 접근가능한 레이블을 제공하라. 이게 CP-398입니다.

2. 왜 SR 레이블이 필요한가

텍스트 영역(<textarea>)은 스크린 리더에서 ‘편집창’ 또는 ’여러 줄 편집’으로 인식됩니다. 하지만 그 텍스트 영역이 무엇을 입력하는 것인지(문의 내용·의견·사유)는 프로그래밍적으로 연결된 레이블이 있어야 스크린 리더가 알리죠. 화면에 ’문의 내용’이라는 텍스트가 옆에 보여도 그게 텍스트 영역과 프로그래밍적으로 연결돼 있지 않으면, 스크린 리더는 그 둘을 별개로 인식합니다. 그래서 스크린 리더 사용자는 텍스트 영역에 초점이 가면 ’편집창’이라고만 듣고, 무엇을 쓰는지 모릅니다.

이는 접근가능한 이름(accessible name) 의 문제입니다(WCAG 4.1.2 Name, Role, Value). 모든 폼 컨트롤은 — 프로그래밍적으로 결정되는 이름이 있어야, 보조기술이 용도를 사용자에게 전달하죠. CP-394(보이는 레이블 존재)와 CP-398(그 레이블의 프로그래밍적 연결)은 짝입니다.

4가지 레이블 제공 방법. CP-398은 다음 중 하나로 이름을 주라고 합니다:

① <label> (권장) — <label for="inquiry">문의 내용</label> + <textarea id="inquiry">. 가장 표준적 이죠. CP-394의 보이는 레이블을 for/id로 연결하면 — 시각·접근성 둘 다 충족합니다. 레이블 클릭 시 텍스트 영역 포커스도 가고요. 텍스트 영역엔 이 방식이 최선입니다.

② aria-labelledby — 화면의 기존 텍스트 요소 id를 가리켜 이름으로 씀. 화면에 이미 보이는 제목을 재사용할 때.

③ aria-label — 보이는 텍스트 없이 속성으로 직접 이름 부여(aria-label="문의 내용"). 보이는 레이블을 안 둘 때(단, CP-394가 보이는 레이블을 권장하므로 제한적).

④ title — title 속성. 폴백 수단(권장도 낮음).

우선순위는 — 텍스트 영역엔 <label> 연결이 최선입니다(CP-394의 보이는 레이블 + 접근성 동시 충족).

용도가 분명해야. 원문이 ’텍스트 영역의 용도를 확인’이라 한 것처럼 — 레이블은 무엇을 쓰는지(문의 내용·의견) 를 정확히 전해야 하죠. 모호한 이름은 안 됩니다.

도움말·글자 수도 연결. 레이블(이름)에 더해 — 작성 안내·형식·글자 수 제한(CP-396)을 aria-describedby로 연결하면, 스크린 리더가 레이블 + 부가 안내를 함께 읽죠. ’문의 내용, 500자 이내, 편집창’처럼요. 레이블(398)은 이름, 도움말은 설명(describedby)으로 연결합니다.

플레이스홀더는 레이블이 아님(CP-394 재강조). 플레이스홀더는 — 접근가능한 이름이 아닙니다. 입력 시 사라지고 스크린 리더 읽기가 불일관하죠. 반드시 <label> 등으로 별도 이름을 줍니다.

CP-303·CP-391과의 일관. 셀렉트(CP-303)·날짜 입력(CP-391)과 동일한 4방식 패턴입니다. 모든 폼 컨트롤이 — 같은 원칙(접근가능한 이름 제공)을 따르죠. 라디오·체크박스의 ’레이블 제공’과도 통하고요.

이 규칙은 텍스트 영역의 ’식별 가능성’을 담당합니다 — 보이는 레이블(394)을 스크린 리더에 연결해(398), 스크린 리더 사용자가 무엇을 쓰는 입력창인지 알게 하죠. 텍스트 영역 6개 규칙이 이로써 마무리됩니다.

정리하면 — 텍스트 영역에 연결된 레이블이 없으면 스크린 리더가 ’편집창’으로만 읽어 용도를 못 알리므로, <label> (권장)·aria-labelledby·aria-label·title 중 하나로 각 텍스트 영역에 접근가능한 이름을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 존재 — 각 텍스트 영역에 4가지 중 하나로 접근가능한 이름이 있는가.

연결 정확 — <label for>/id 매칭, aria-labelledby가 올바른 id를 가리키는가.

플레이스홀더 의존 배제 — 플레이스홀더만으로 레이블을 대체하지 않았는가(CP-394).

개선 방향

CP-394의 보이는 레이블을 <label for>/id로 텍스트 영역에 연결(권장).

도움말·글자 수를 aria-describedby로 연결. 플레이스홀더는 보조로만.

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

역할	책임
퍼블리셔/개발	label/aria 연결 구현
콘텐츠/UX	텍스트 영역 레이블 텍스트 작성

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

웹접근성 의무 대상이며 텍스트 영역을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 텍스트 영역에 4가지 중 하나로 접근가능한 이름이 있나요?

□ <label for>/id 매칭, aria-labelledby가 올바른 id를 가리키나요?

□ 플레이스홀더만으로 레이블을 대체하지 않았나요?

❓ FAQ

Q1. CP-394와 뭐가 다른가요? CP-394는 ‘보이는 레이블이 있는가’(+플레이스홀더 금지), CP-398은 ’그 레이블이 스크린 리더에 연결됐는가’입니다. 보통 <label for>로 둘 다 충족하죠. Q2. 4가지 중 뭐가 제일 좋나요? 텍스트 영역엔 <label> 연결이 최선입니다. 보이는 레이블 + 접근성 + 클릭 포커스를 한 번에 충족하죠. Q3. 도움말·글자 수도 연결하나요? 네. aria-describedby로 연결하면 ’문의 내용, 500자 이내’처럼 함께 읽힙니다. 레이블은 이름, 도움말은 설명이죠.

6. 마무리

CP-398의 메시지:

입력창에 접근가능한 이름을 — label/aria-label/aria-labelledby/title 중 하나로 레이블을 제공하라.

텍스트 영역에 연결된 레이블이 없으면 스크린 리더가 ’편집창’으로만 읽어 용도를 못 알립니다. <label for> 연결로 시각·접근성을 한 번에 충족하는 게 핵심이죠. 이로써 텍스트 영역 6개 규칙이 마무리됩니다. 다음 편부터는 텍스트 입력(Text input)입니다.

다음 편 예고 ▶ 「519. (CP-399) 텍스트 입력 — 한 줄의 짧은 텍스트를 입력받는 데 사용하고 있다.」

ViewCheck는 각 텍스트 영역에 접근가능한 레이블이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 영역(Textarea) 가이드 — https://www.krds.go.kr/html/site/component/component_39.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컴포넌트,웹표준