어느 신청을 선택하는지 알리게

KRDS SP-158 — 신청 내역 선택에 사용되는 체크박스에 적절한 레이블을 제공하고 있다.

0. 들어가며 — 신청 그룹(58개)의 마지막

이번 832편은 신청 내역 선택에 사용되는 체크박스에 적절한 레이블을 제공하라는 규칙입니다. ‘신청 결과 확인’ 서브섹션 이자 신청 그룹(SP-101~158, 58개)의 마지막이죠.

일괄 선택(SP-156)에 쓰는 체크박스에 — 레이블이 없으면, 스크린 리더 사용자는 어느 신청을 선택하는지 모르죠. SP-158은 체크박스에 적절한 레이블을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 체크박스 적절한 레이블

SP-158 (서비스 패턴 > 신청 > 신청 결과 확인) “신청 내역 선택에 사용되는 체크박스에 적절한 레이블을 제공하고 있다.”

신청 내역 선택 체크박스에 적절한 레이블을 제공하라는 뜻입니다.

정리: 신청 내역 선택 체크박스에 적절한 레이블을 제공하라. 이게 SP-158입니다.

2. 왜 체크박스 레이블인가

일괄 선택(SP-156)에서, 각 신청 내역에 체크박스를 둡니다. 그런데 이 체크박스에 레이블이 없으면, 스크린 리더 사용자는 어느 신청을 선택하는지 모르죠. SP-158은 적절한 레이블을 요구합니다.

체크박스 레이블이 없을 때의 문제:

어느 신청인지 모름 신청 내역 목록의 각 체크박스가, 레이블 없이 있으면, 스크린 리더는 ’체크 박스, 체크박스…’로 똑같이 읽습니다. 시각 사용자는 옆 신청 정보로 알지만, 스크린 리더 사용자는 체크박스만 따로 탐색하면 어느 신청의 체크박스인지 모르죠(SP-110 컨트롤 이름 변별 정신).

잘못 선택 위험 어느 신청인지 모르면, 엉뚱한 신청을 선택해 일괄 작업(삭제 등)할 위험이 있습 니다.

그래서 SP-158은 — 적절한 레이블을 요구합니다:

접근가능한 이름 각 체크박스에, 그 신청을 식별하는 접근가능한 레이블을요. ‘○○ 서비스 신청 (2026.06.01) 선택’처럼요. 스크린 리더가 —’○○ 신청 선택, 체크박스’로 읽어, 어느 신청인지 알게요.

연결 방법 <label> 연결, aria-label, 또는 aria-labelledby(신청 정보와 연결)로요(BP-074·SP-110). 체크박스와 그 신청 정보를 연결하죠.

전체 선택 레이블 ‘전체 선택’ 체크박스에도, ‘전체 신청 선택’ 같은 레이블을요.

상태 인지 체크 상태(선택됨/안 됨)도, 스크린 리더가 인지하게요(체크박스 기본 제공, aria-checked).

SP-110·158의 연계. SP-110(신청 목록 컨트롤 접근가능한 이름 변별)·SP-158(신청 내역 체크박스 레이블)이 같은 정신입니다. 반복되는 컨트롤(체크박스·버튼)에, 각각 변별되는 레이블을요. 신청 목록(110)·신청 내역(158) 양쪽에요. 체크박스 컴포넌트(CP-289~297) 접근성의 신청 적용이죠.

일괄 선택 접근성. 일괄 선택(SP-156)은, 시각 사용자에겐 편리하지만, 스크린 리더 사용자에겐 체크박스 레이블이 없으면 어느 걸 선택하는지 모릅니다. SP-156(일괄 선택) + SP-158(체크박스 레이블)이 함께, 모두가 일괄 선택을 쓰게 하죠.

846 규칙의 마지막 SP 그룹 마무리. 신청 그룹(SP-101~158, 58개)은 신청의 전 과정(대상 탐색·정보 확인·자격· 작성·확인·완료·결과 확인)을 다뤘습니다. SP-158은 그 접근성 마무리죠. 신청 그룹이 끝나면, 846의 마지막 그룹 ‘정책 정보 확인’(14개)만 남습니다.

이 규칙은 신청(SP)의 ’선택 컨트롤 접근성’을 담당합니다 — 체크박스에 적절한 레이블을 제공해(158), 스크린 리더 사용자도 어느 신청을 선택하는지 알게 하죠. 신청 그룹의 마무리입니다.

정리하면 — 일괄 선택 체크박스에 레이블이 없으면 스크린 리더 사용자가 어느 신청을 선택하는지 모르므로, 각 체크박스에 그 신청을 식별하는 적절한 레이블(접근가능한 이름)을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

체크박스 레이블 — 각 신청 내역 체크박스에 식별 레이블이 있는가(‘○○ 신청 선택’).

연결 방법 — <label>·aria-label·aria-labelledby로 신청 정보와 연결되는가.

전체 선택·상태 — 전체 선택 레이블 + 체크 상태(aria-checked)가 인지되는가.

개선 방향

각 체크박스에 식별 레이블(신청명·날짜, SP-110 정신). 신청 정보 연결.

전체 선택 레이블. 체크 상태 인지. 체크박스 컴포넌트 접근성(CP-289~297).

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

역할	책임
퍼블리셔/개발	체크박스 레이블 구현
QA/접근성	체크박스 스크린 리더 검증

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

웹접근성 의무 대상이며 일괄 선택을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 신청 내역 체크박스에 식별 레이블이 있나요(‘○○ 신청 선택’)?

□ <label>·aria-label·aria-labelledby로 신청 정보와 연결되나요?

□ 전체 선택 레이블 + 체크 상태(aria-checked)가 인지되나요?

❓ FAQ

Q1. 체크박스 레이블이 없으면 왜 문제인가요? 스크린 리더가 ‘체크박스, 체크박스…’로 똑같이 읽어, 체크박스만 따로 탐색하면 어느 신청의 체크박스인지 모릅니다. 엉뚱한 신청을 선택해 일괄 삭제할 위험도 있죠. Q2. 어떻게 레이블을 주나요?’○○ 서비스 신청 (2026.06.01) 선택’처럼 그 신청을 식별하는 접근가능한 레이블을요. <label>·aria-label·aria-labelledby(신청 정보 연결)로요(BP-074·SP-110). Q3. SP-110과 같나요? SP-110(신청 목록 컨트롤 이름 변별)과 같은 정신입니다. 반복되는 컨트롤(체크박스·버튼)에 각각 변별되는 레이블을요. 신청 목록(110)·신청 내역(158) 양쪽에 적용하죠.

6. 마무리

SP-158의 메시지:

어느 신청을 선택하는지 알리게 — 신청 내역 선택 체크박스에 적절한 레이블을 제공하라.

체크박스에 레이블이 없으면 스크린 리더 사용자가 어느 신청을 선택하는지 모릅니다. 각 체크박스에 식별 레이블을 줘 모두가 일괄 선택을 쓰게 하는 게 핵심이죠.

🎉 이로써 신청 그룹(SP-101~158, 58개)이 모두 끝났습니다. 방문(9) + 검색(49) + 로그인(42) + 신청(58) = SP 158개 완료. 다음 편부터는 846 규칙의 마지막 그룹, ‘정책 정보 확인’(14개)입니다.

다음 편 예고 ▶ 「833. (SP-159) 정책 정보 확인 그룹 시작 — 846 마지막 그룹」

ViewCheck는 신청 내역 선택 체크박스에 적절한 레이블이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 신청 가이드 — https://www.krds.go.kr/html/site/service/service_04.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컴포넌트,웹표준