빙글빙글이 안 보이는 사람에게도

KRDS CP-334 — 스피너 상태에 대한 설명을 스크린 리더에서 확인할 수 있도록 하고 있다.

0. 들어가며 — 화면은 도는데 스크린 리더는 침묵하면

이번 454편은 스피너 상태에 대한 설명을 스크린 리더에서 확인할 수 있게 하라는 규칙입니다. 이로써 스피너 7개 규칙이 마무리됩니다.

스피너의 ’빙글빙글 도는 모습’은 — 보는 사용자에게 ’처리 중’을 알립니다. 하지만 — 스크린 리더 사용자는 그 회전을 못 보죠. 스피너 상태가 프로그래밍적으로 전달돼야, ’지금 로딩 중’을 압니다. CP-334는 스피너 상태를 스크린 리더에 전하라고 규정합니다. 단계 표시기 SR 확인(CP-327)의 스피너 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 스피너 상태 SR 설명

CP-334 (컴포넌트 > 스피너) “스피너 상태에 대한 설명을 스크린 리더에서 확인할 수 있도록 하고 있다.”

스피너가 나타내는 상태(로딩 중, 완료 등)에 대한 설명을, 스크린 리더 사용자가 확인할 수 있게 제공하라는 뜻입니다.

정리: 스피너 상태(로딩 중)를 스크린 리더가 확인하게 하라. 이게 CP-334입니다.

2. 왜 스피너 상태 SR 설명인가

스피너의 ‘빙글빙글 도는 모습’은 순전히 시각적 신호입니다. 보는 사용자는 회전을 보고 ’아, 처리 중이구나’를 알죠. 하지만 스크린 리더 사용자는 그 회전을 못 봅니다. 스피너가 화면에 떠도 스크린 리더가 아무 안내를 안 하면, 사용자는 ’내 작업이 처리되고 있는지, 멈췄는지, 끝났는지’ 전혀 모르죠.

상태가 전달 안 될 때의 문제:

처리 중 모름 — 폼을 제출했는데 — 스피너만 시각적으로 돌고 스크린 리더가 침묵하면, 사용자는 ‘제출이 됐나? 안 됐나?’ 모릅니다. 또 누르거나(중복 제출), 페이지를 떠나죠.

완료 모름 — 처리가 끝나 결과가 나와도 — 그 전환이 스크린 리더에 안 알려지면, 사용자는 계속 기다립니다.

그래서 CP-334는 — 스피너 상태를 스크린 리더가 확인할 수 있게 하라고 합니다. 표준 방법:

role="status" + 텍스트 — 스피너 영역에 role="status"(또는 aria-live="polite")를 주고, 그 안에 상태 텍스트(‘로딩 중’, ‘처리 중입니다’)를 둡니다. role="status"는 — 라이브 영역(live region)이라, 내용이 나타나면 스크린 리더가 자동으로 읽죠. 그래서 스피너가 뜰 때 ’로딩 중’이 안내됩니다.

시각적으로 숨긴 텍스트 — 상태 텍스트를 화면에 안 보이게 하려면(스피너만 시각적으로 충분하면) — sr-only (시각 숨김, 스크린 리더만) 텍스트로 ’로딩 중’을 제공하죠. 보는 사용자는 스피너를, 스크린 리더 사용자는 텍스트를 받습니다.

스피너에 aria-label — 스피너 요소 자체에 aria-label="로딩 중"을 줄 수도 있죠. 다만 — 라이브 영역 (role="status")이 ’상태 변화 알림’에 더 적합합니다(나타날 때 자동 안내).

완료 알림 — 처리가 끝나면 — 라이브 영역의 텍스트를 ‘완료’(또는 결과 안내)로 바꿔, 스크린 리더가 완료를 알리게 합니다. 또는 결과 영역으로 초점을 옮기거나요.

불확정/확정 구분. 불확정 스피너는 — ‘로딩 중’ 정도면 충분하죠. 확정(진행률) 스피너는 — 진행률을 role= "progressbar" + aria-valuenow로 전해 ‘50%’ 같은 진행을 알릴 수 있습니다. 스피너 성격에 맞게 상태를 전합니다.

과도한 알림 주의. 라이브 영역이 — 너무 자주 갱신되면(매 % 마다) 스크린 리더가 끊임없이 읽어 방해되죠. aria-live="polite"로 적절히, 핵심 상태 변화(시작·완료)만 알리는 게 좋습니다.

이 규칙은 스피너의 ’상태 접근성’을 담당합니다 — 시각적 회전(보는 사용자)에 더해, 상태 텍스트를 스크린 리더에 전해 (334), 전맹 사용자도 ’로딩 중·완료’를 알게 하죠. 스피너 7개 규칙(용도·크기·배치·애니메이션·개수·대비·SR)이 이로써 마무리됩니다.

정리하면 — 스피너의 회전은 시각적 신호라 스크린 리더 사용자에게 전달되지 않으므로, role="status"/sr-only 텍스트 등으로 ‘로딩 중·완료’ 상태를 스크린 리더가 확인하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

상태 텍스트 — 스피너에 ‘로딩 중’ 등 상태 텍스트가 스크린 리더에 전달되는가.

라이브 영역 — role="status"/aria-live로 스피너 등장 시 자동 안내되는가.

완료 알림 — 처리 완료가 스크린 리더에 전달되는가.

개선 방향

스피너에 role="status" + 상태 텍스트(‘로딩 중’), 시각 숨김 필요시 sr-only.

완료 시 라이브 영역 텍스트 갱신 또는 결과로 초점 이동. 과도 알림 회피.

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

역할	책임
퍼블리셔/개발	role=“status”·상태 텍스트 구현
QA/접근성	스크린 리더 로딩·완료 안내 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스피너에 ‘로딩 중’ 등 상태 텍스트가 스크린 리더에 전달되나요?

□ role="status"/aria-live로 스피너 등장 시 자동 안내되나요?

□ 처리 완료가 스크린 리더에 전달되나요?

❓ FAQ

Q1. 스피너가 도는데 스크린 리더가 침묵하면요? 회전은 시각 신호라 스크린 리더에 안 전달됩니다. role="status" + 상태 텍스트로 ’로딩 중’을 전해야 하죠. Q2. 상태 텍스트를 화면에 보여야 하나요? 아닙니다. 스피너만 시각적으로 충분하면 텍스트는 sr-only(시각 숨김)로 스크린 리더에만 제공할 수 있죠. Q3. 완료도 알려야 하나요? 네. 처리 완료가 안 알려지면 스크린 리더 사용자가 계속 기다립니다. 라이브 영역 갱신 이나 결과 초점 이동으로 알리죠.

6. 마무리

CP-334의 메시지:

빙글빙글이 안 보이는 사람에게도 — 스피너 상태를 스크린 리더가 확인하게 하라.

스피너의 회전은 시각 신호라 스크린 리더 사용자에게 전달되지 않습니다. role="status"/sr-only 텍스트로 ’로딩 중· 완료’를 전하는 게 핵심이죠. 이로써 스피너 7개 규칙이 마무리됩니다. 다음 편부터는 도움 패널(Help panel)입니다.

다음 편 예고 ▶ 「455. (CP-335) 도움 패널 — 사용자가 필요할 때 도움 정보를 제공하는 데 사용하고 있다.」

ViewCheck는 스피너 상태가 스크린 리더로 확인 가능한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 스피너(Spinner) 가이드 — https://www.krds.go.kr/html/site/component/component_32.html

WAI-ARIA — role=“status” / Live Regions — https://www.w3.org/WAI/ARIA/apg/practices/live-regions/

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

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