무슨 필터인지 이름 붙이기

KRDS BP-092 — 모든 필터링·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하고 있다.

0. 들어가며 — 필터에 이름이 없으면

이번 658편은 모든 필터링·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하라는 규칙입니다.

필터 컨트롤에 — 무슨 필터인지 레이블이 없거나, 필터 묶음에 그룹 헤딩이 없으면, 스크린 리더 사용자는 무슨 필터인지 모르죠. BP-092는 컨트롤 레이블 + 그룹 헤딩을 규정합니다. 폼 명명(BP-079)의 필터 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 레이블 + 그룹 헤딩

BP-092 (기본 패턴 > 필터링·정렬) “모든 필터링·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하고 있다.”

모든 필터·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하라는 뜻입니다.

정리: 필터·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하라. 이게 BP-092입니다.

2. 왜 레이블·그룹 헤딩인가

필터·정렬 컨트롤은 여러 개의 옵션과, 그 옵션들을 묶는 그룹으로 구성됩니다. 예: ‘카테고리’ 그룹(공지·자료·보도), ‘기간’ 그룹(1개월·3개월·1년). 각 컨트롤과 그룹에 이름이 있어야, 사용자(특히 스크린 리더)가 인지하죠. BP-092는 레이블 + 그룹 헤딩을 요구합니다.

레이블·헤딩이 없을 때의 문제:

무슨 필터인지 모름 컨트롤에 레이블이 없으면, 스크린 리더 사용자는 이 체크박스·드롭다운이 무슨 필터인지 모릅니다. ’체크박스, 공지’라고만 들리고 무슨 분류의 ’공지’인지 모르죠.

그룹 구조 모름 그룹 헤딩이 없으면, 어떤 옵션들이 한 묶음(‘카테고리’)인지 모릅니다. 옵션들이 맥락 없이 나열되죠.

시각 사용자도 혼란 — 레이블·헤딩이 없으면 — 시각 사용자도, 무슨 필터인지·어떤 묶음인지 파악이 어렵습니다.

그래서 BP-092는 — 레이블 + 그룹 헤딩을 요구합니다:

컨트롤 레이블 각 필터·정렬 컨트롤에 레이블을요(BP-074). ‘카테고리’ 드롭다운, ‘최신순’ 라디오 등. 레이블을 컨트롤과 연결(<label>)해, 스크린 리더가 ’카테고리, 콤보박스’처럼 읽게요.

그룹 헤딩 관련 옵션 묶음에 그룹 헤딩(제목)을요. ‘카테고리’, ‘기간’, ’상태’처럼요. <fieldset>+<legend> 나 제목으로 그룹을 명명하죠(BP-079). 스크린 리더가 ’카테고리 그룹, 옵션 4개’처럼 인지합니다.

모든 컨트롤 ‘모든’ 컨트롤에요. 일부만 레이블이 있고 일부는 없으면, 없는 건 인지 불가죠. 빠짐없이 레이블·헤딩을 줍니다.

폼 명명(BP-079)의 필터 적용. BP-079(폼 섹션 제목·필드 이름)의 — 필터·정렬 버전입니다. 필터 컨트롤도 — 결국 폼 컨트롤이므로, 레이블·그룹 명명 원칙이 같죠. 필터 그룹 = 섹션, 필터 컨트롤 = 필드입니다.

접근성 핵심. 레이블·헤딩은 스크린 리더 사용자에게 필수입니다(WCAG 1.3.1, 4.1.2). 이름 없는 컨트롤은 ‘버튼’, ’체크박스’로만 읽혀 무슨 필터인지 모르죠. 그룹 헤딩은 필터 구조를 인지하게 하고요.

이 규칙은 필터링·정렬의 ’컨트롤 명명’을 담당합니다 — 모든 컨트롤에 레이블·그룹 헤딩을 제공해(092), 사용자(특히 스크린 리더)가 무슨 필터인지·어떤 묶음인지 인지하게 하죠. 레이블 내용은 BP-093이 다룹니다.

정리하면 — 필터 컨트롤에 레이블이 없으면 무슨 필터인지, 그룹 헤딩이 없으면 어떤 묶음인지 모르므로, 모든 컨트롤에 레이블 과 그룹 헤딩(<fieldset>/<legend>)을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

컨트롤 레이블 — 모든 필터·정렬 컨트롤에 레이블이 연결되는가.

그룹 헤딩 — 옵션 묶음에 그룹 헤딩(<fieldset>/<legend>)이 있는가.

빠짐 없음 — 일부 컨트롤만이 아니라 모든 컨트롤에 제공되는가.

개선 방향

각 컨트롤에 레이블 연결(BP-074), 옵션 묶음에 그룹 헤딩(BP-079).

빠짐없이 모든 컨트롤. 스크린 리더 인지 검증(WCAG 1.3.1/4.1.2).

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

역할	책임
퍼블리셔/개발	레이블·그룹 헤딩 구현
QA/접근성	스크린 리더 인지 검증

기관 유형	BP-092 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 필터·정렬을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 필터·정렬 컨트롤에 레이블이 연결되나요?

□ 옵션 묶음에 그룹 헤딩(<fieldset>/<legend>)이 있나요?

□ 일부가 아니라 모든 컨트롤에 제공되나요?

❓ FAQ

Q1. 그룹 헤딩이 왜 필요한가요? 어떤 옵션들이 한 묶음(‘카테고리’)인지 알리려고요. 헤딩이 없으면 옵션들이 맥락 없이 나열되죠. <fieldset>+<legend>로 그룹을 명명합니다. Q2. 레이블은 BP-074와 같나요? 같은 원리(컨트롤에 이름)를 필터에 적용한 것입니다. 필터 컨트롤도 폼 컨트롤이라 레이블 연결이 필요하죠. Q3. ‘모든’ 컨트롤이 강조된 이유는요? 일부만 레이블이 있으면 없는 건 인지 불가합니다. 빠짐없이 모든 컨트롤에 줘야 스크린 리더 사용자가 전부 인지하죠.

6. 마무리

BP-092의 메시지:

무슨 필터인지 이름 붙이기 — 모든 필터·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하라.

레이블이 없으면 무슨 필터인지, 그룹 헤딩이 없으면 어떤 묶음인지 모릅니다. 모든 컨트롤에 레이블·그룹 헤딩을 제공해 인지하게 하는 게 핵심이죠. 다음 편은 레이블 내용의 간결·정확성입니다.

다음 편 예고 ▶ 「659. (BP-093) 필터링·정렬 컨트롤 레이블은 이해가 쉽도록 간결하고 정확한 내용으로 제공하고 있다.」

ViewCheck는 필터·정렬 컨트롤에 레이블과 그룹 헤딩이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 필터링·정렬 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_10.html

WCAG 2.1 SC 1.3.1 Info and Relationships / 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/

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

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