바뀐 걸 소리로 알리게

KRDS BP-049 — 스크린 리더 사용자는 맞춤 영역의 출현이나 피드백 메시지로의 전환 상태를 인지하지 못할 수 있으므로 aria-live=“polite” 속성을 사용자 피드백 구획에 제공하고 있다.

0. 들어가며 — 사용자 피드백 그룹의 마지막

이번 615편은 맞춤 영역 출현이나 피드백 메시지로의 전환을 스크린 리더가 인지하도록 aria-live="polite"를 피드백 구획에 제공하라는 규칙입니다. 사용자 피드백 그룹(BP-045~049)의 마지막이죠.

피드백 위젯은 첫 답에 따라 맞춤 영역이 동적으로 나타나거나, ‘감사합니다’ 메시지로 바뀝니다. 시각 사용자는 보지만 스크린 리더 사용자는 이 변화를 모를 수 있죠. aria-live가 바뀐 내용을 읽어줍니다. 이번 편을 풀어냅니다.

1. 원문 — 피드백 구획 aria-live=“polite”

BP-049 (기본 패턴 > 사용자 피드백) “스크린 리더 사용자는 맞춤 영역의 출현이나 피드백 메시지로의 전환 상태를 인지하지 못할 수 있으므로 aria-live="polite" 속성을 사용자 피드백 구획에 제공하고 있다.”

피드백 구획에 aria-live="polite"를 줘, 맞춤 영역 출현·메시지 전환을 스크린 리더가 인지하게 하라는 뜻입니다.

정리: 피드백 구획에 aria-live=“polite”를 제공하라. 이게 BP-049입니다.

2. 왜 aria-live인가

사용자 피드백 위젯은 — 동적으로 변합니다:

첫 단일 선택(BP-047)을 하면 → 맞춤 영역(추가 질문, BP-048)이 나타나죠.

피드백을 제출하면 → ‘소중한 의견 감사합니다’ 같은 완료 메시지로 전환됩니다.

이 변화는 페이지 새로고침 없이(동적으로) 화면 일부만 바뀝니다. 시각 사용자는 바뀐 걸 즉시 봅니다. 그런데 스크린 리더 사용자는 다르죠.

aria-live가 없을 때의 문제:

변화 미인지 화면 일부가 동적으로 바뀌어도, 스크린 리더는 기본적으로 그 변화를 자동으로 읽지 않습니다. 포커스가 다른 곳에 있으면, 맞춤 영역이 나타난 것도, 완료 메시지로 바뀐 것도 모르죠. 사용자는 ‘내 피드백이 접수됐나?’, ‘왜 아무 반응이 없지?’ 하고 혼란스럽습니다.

흐름 단절 추가 질문이 나타났는데 그걸 모르면, 사용자는 피드백을 완료하지 못하고 떠납니다.

그래서 BP-049는 — 피드백 구획에 aria-live="polite"를 주라고 합니다:

aria-live=“polite” 이 속성을 가진 영역의 내용이 바뀌면, 스크린 리더가 바뀐 내용을 자동으로 읽어 줍니다. polite는 사용자가 하던 읽기를 끝낸 후 알리는, 정중한(끼어들지 않는) 모드죠. 맞춤 영역 출현·완료 메시지 같은 긴급하지 않은 안내에 적합합니다.

피드백 구획에 적용 aria-live를 동적으로 바뀌는 피드백 구획(맞춤 영역·메시지가 들어가는 컨테이너)에 줍니다. 그 안의 내용이 바뀌면(추가 질문 등장, ‘감사합니다’ 전환) 자동으로 읽히죠.

스크린 리더가 변화 안내 — ‘추가 질문: 어떤 점이 부족했나요?’, ’소중한 의견 감사합니다’처럼 — 바뀐 내용을 스크린 리더가 읽어, 사용자가 변화를 인지하고 다음 행동을 하게요.

왜 polite인가(assertive 아님). aria-live는 polite(정중, 끝나면 알림)와 assertive(긴급, 즉시 끼어듦)가 있습니다. 피드백 맞춤 영역·완료 메시지는 긴급한 오류가 아니라 일반 안내이므로, 사용자를 방해하지 않는 polite가 적절하죠. assertive는 중요한 오류·경고에 씁니다.

동적 콘텐츠 접근성의 핵심 패턴. 화면이 — 새로고침 없이 부분 변경될 때, 그 변화를 스크린 리더에 알리는 표준 방법이 aria-live입니다(WCAG 4.1.3 상태 메시지). 피드백 위젯처럼 — 동적으로 변하는 모든 곳에 적용되는 일반 원리죠. 오류 메시지(BP 오류 그룹), 로딩 상태 등에도 같은 패턴이 쓰입니다.

이 규칙은 사용자 피드백의 ’동적 변화 접근성’을 담당합니다 — 피드백 구획에 aria-live="polite"를 줘(049), 스크린 리더 사용자도 맞춤 영역 출현·메시지 전환을 인지하게 하죠. 사용자 피드백 그룹의 접근성 마무리입니다.

정리하면 — 피드백 위젯은 새로고침 없이 맞춤 영역이 나타나고 메시지로 전환되는데 스크린 리더는 이 변화를 자동 인지 하지 못하므로, 피드백 구획에 aria-live="polite"를 제공해 바뀐 내용을 읽어주게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

aria-live 제공 — 동적으로 바뀌는 피드백 구획에 aria-live="polite"가 있는가.

변화 안내 — 맞춤 영역 출현·완료 메시지 전환이 스크린 리더로 읽히는가.

polite 적절 — 긴급 오류가 아니므로 assertive가 아닌 polite인가.

개선 방향

동적 피드백 구획(맞춤 영역·메시지 컨테이너)에 aria-live="polite".

변화 시 바뀐 내용이 자동으로 읽히는지 스크린 리더로 검증(WCAG 4.1.3).

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

역할	책임
퍼블리셔/개발	aria-live 속성 구현
QA/접근성	동적 변화 스크린 리더 검증

기관 유형	BP-049 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (동적 피드백 위젯 사용 시)

웹접근성 의무 대상이며 동적 피드백 위젯을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 동적으로 바뀌는 피드백 구획에 aria-live="polite"가 있나요?

□ 맞춤 영역 출현·완료 메시지 전환이 스크린 리더로 읽히나요?

□ 긴급 오류가 아니므로 assertive가 아닌 polite인가요?

❓ FAQ

Q1. aria-live가 무슨 역할을 하나요? 그 영역의 내용이 동적으로 바뀌면 스크린 리더가 바뀐 내용을 자동으로 읽어 줍니다. 새로고침 없이 일부만 바뀌는 변화를 알리는 표준 방법이죠(WCAG 4.1.3). Q2. polite와 assertive 중 뭘 쓰나요? 피드백 맞춤 영역·완료 메시지는 긴급하지 않으니 끼어들지 않는 polite를 씁니다. assertive는 중요한 오류·경고용이죠. Q3. 왜 스크린 리더는 변화를 자동으로 못 읽나요? 기본적으로 화면 일부의 동적 변경은 자동 안내되지 않습니다. 포커스가 다른 곳에 있으면 변화를 모르죠. aria-live가 이를 해결합니다.

6. 마무리

BP-049의 메시지:

바뀐 걸 소리로 알리게 — 피드백 구획에 aria-live=“polite”를 제공하라.

피드백 위젯은 새로고침 없이 맞춤 영역이 나타나고 메시지로 전환되는데, 스크린 리더는 이 변화를 자동 인지하지 못합니 다. aria-live="polite"로 바뀐 내용을 읽어주는 게 핵심이죠. 사용자 피드백 그룹(BP-045~049)이 끝났습니다. 다음 편부터는 상세 정보 확인 그룹입니다.

다음 편 예고 ▶ 「616. (BP-050) 상세 정보 확인 그룹 시작」

ViewCheck는 동적 피드백 구획에 aria-live=“polite”가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 사용자 피드백 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_05.html

WCAG 2.1 SC 4.1.3 Status Messages — https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html

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

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