드롭다운에 접근가능한 이름을

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

0. 들어가며 — 스크린 리더에 ’콤보박스’라고만 들리면

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

앞 CP-300이 ‘모든 셀렉트에 (보이는) 레이블을 두라’였다면 — 이번 CP-303은 그 레이블을 스크린 리더가 확인할 수 있게 프로그래밍적으로 연결하라는 규칙입니다. 화면에 ’지역’ 레이블이 보여도 — 셀렉트와 연결 안 돼 있으면, 스크린 리더는 ’콤보박스’라고만 읽죠. CP-303은 4가지 방법 중 하나로 접근가능한 이름을 주라고 규정합니다. 라디오 CP-287· 체크박스 CP-296의 셀렉트 버전이죠. 이번 편을 풀어냅니다.

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

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

각 셀렉트에 4가지 방법(<label>, title, aria-label, aria-labelledby) 중 하나로 접근가능한 이름(accessible name)을 부여해, 스크린 리더가 용도를 알리게 하라는 뜻입니다.

정리: 각 셀렉트에 4가지 중 하나로 접근가능한 레이블을 제공하라. 이게 CP-303입니다.

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

셀렉트(<select>)는 스크린 리더에서 ‘콤보박스’ 또는 ‘목록 상자’로 인식됩니다. 하지만 그 셀렉트가 무엇을 고르는 것인지(지역·연령대·카테고리)는 프로그래밍적으로 연결된 레이블이 있어야 스크린 리더가 알리죠. 화면에 ’지역’이라는 텍스트가 옆에 보여도 그게 셀렉트와 프로그래밍적으로 연결돼 있지 않으면, 스크린 리더는 그 둘을 별개로 인식합니다. 그래서 스크린 리더 사용자는 셀렉트에 초점이 가면 ’콤보박스, 서울’이라고만 듣고, ’무엇에 대한 서울인지’ 모릅니다.

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

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

① <label> (권장) — <label for="region">지역</label> + <select id="region">. 가장 표준적이죠. CP-300의 보이는 레이블을 for/id로 셀렉트에 연결하면 — 시각·접근성 둘 다 충족합니다. 레이블 클릭 시 셀렉트가 포커스되기도 하고요. 셀렉트엔 이 방식이 최선입니다.

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

③ aria-label — 보이는 텍스트 없이 속성으로 직접 이름 부여(aria-label="지역 선택"). 화면에 별도 레이블을 안 둘 때(단, CP-300은 보이는 레이블을 권장하므로 제한적).

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

우선순위는 — 셀렉트엔 <label> 연결이 최선입니다(CP-300의 보이는 레이블 + 접근성 동시 충족). 화면 제목 재사용은 aria-labelledby를 씁니다.

용도가 분명해야. 원문이 ‘셀렉트의 용도를 확인’이라 한 것처럼 — 레이블은 그 셀렉트가 무엇을 고르는지(지역· 연령대)를 정확히 전해야 하죠. ’선택1’ 같은 모호한 이름은 안 됩니다.

플레이스홀더는 레이블이 아님(재강조). ‘선택하세요’ 같은 첫 옵션(플레이스홀더)은 — 접근가능한 이름이 아닙니다. 값을 고르면 사라지고, 용도(지역인지 연령인지)를 안 알리죠. 반드시 <label> 등으로 별도 이름을 줍니다(CP-300 연계).

이 규칙은 셀렉트의 ’식별 가능성’을 담당합니다 — 보이는 레이블(300)을 스크린 리더에 연결해(303), 스크린 리더 사용자가 무엇을 고르는 드롭다운인지 알게 하죠. 표준 <select> + <label for> 조합이면 대부분 자동 충족됩니다. 라디오(CP-287)·체크박스(CP-296)와 동일한 4방식 패턴으로, 폼 컨트롤 접근성의 일관된 원칙입니다.

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

3. 점검 / 개선

무엇을 점검하나

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

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

플레이스홀더 의존 배제 — ‘선택하세요’ 첫 옵션을 레이블로 착각하지 않았는가.

개선 방향

CP-300의 보이는 레이블을 <label for>/id로 셀렉트에 연결(권장).

접근성 검사 도구로 accessible name 누락 확인. 플레이스홀더는 보조로만.

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

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

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 셀렉트에 4가지 중 하나로 접근가능한 이름이 있나요?

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

□ ‘선택하세요’ 첫 옵션을 레이블로 착각하진 않았나요?

❓ FAQ

Q1. CP-300과 뭐가 다른가요? CP-300은 ‘보이는 레이블이 있는가’, CP-303은 ’그 레이블이 스크린 리더에 연결됐 는가’입니다. 보통 <label for> 하나로 둘 다 충족하죠. Q2. 4가지 중 뭐가 제일 좋나요? 셀렉트엔 <label> 연결이 최선입니다. 보이는 레이블 + 접근성 + 클릭 포커스를 한 번에 충족하죠. Q3. ’선택하세요’가 레이블 역할 못 하나요? 못 합니다. 값을 고르면 사라지고 용도(지역·연령)를 안 알립니다. 별도 이름이 필요하죠.

6. 마무리

CP-303의 메시지:

드롭다운에 접근가능한 이름을 — label/aria-label/aria-labelledby/title 중 하나로 레이블을 제공하라.

셀렉트에 연결된 레이블이 없으면 스크린 리더가 ’콤보박스’로만 읽어 용도를 못 알립니다. CP-300의 보이는 레이블을 <label for>로 연결하면 시각·접근성을 한 번에 충족하죠. 이로써 셀렉트 6개 규칙이 마무리됩니다. 다음 편부터는 태그(Tag)입니다.

다음 편 예고 ▶ 「424. (CP-304) 태그 — 콘텐츠의 분류·상태를 간결하게 표시하는 데 사용하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 셀렉트(Select) 가이드 — https://www.krds.go.kr/html/site/component/component_28.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컴포넌트,웹표준