결과 수 변화를 소리로

KRDS SP-046 — 전체 검색 결과 수 안내 텍스트에 live-region을 적용하고 값이 변경되자마자 해당 정보가 스크린 리더로 전달될 수 있도록 aria-live=“polite”를 사용해야 한다.

0. 들어가며 — 정렬·필터로 결과 수가 바뀌어도 안 들리면

이번 720편은 전체 검색 결과 수 안내 텍스트에 live-region을 적용하고, 값이 변경되자마자 스크린 리더로 전달되도록 aria-live="polite"를 사용하라는 규칙입니다.

검색 정렬·필터로 — 결과 수가 바뀌어도(152→23건), 스크린 리더 사용자가 그 변화를 못 들으면 모르죠. SP-046은 결과 수에 aria-live를 규정합니다. BP-103(필터링·정렬 결과 수 live-region)의 검색 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 결과 수 aria-live=“polite”

SP-046 (서비스 패턴 > 검색 > 상세 검색) “전체 검색 결과 수 안내 텍스트에 live-region을 적용하고 값이 변경되자마자 해당 정보가 스크린 리더로 전달 될 수 있도록 aria-live="polite"를 사용해야 한다.”

검색 결과 수 텍스트에 aria-live=“polite”를 적용해 변경 시 스크린 리더로 전달하라는 뜻입니다.

정리: 검색 결과 수 텍스트에 aria-live=“polite”를 적용하라. 이게 SP-046입니다.

2. 왜 결과 수 live-region인가

검색 결과에 정렬·필터(SP-044)를 적용하면, 결과 수가 바뀝니다(‘152건’ → ‘23건’). 시각 사용자는 이 변화를 즉시 봅니다. 그런데 스크린 리더 사용자는, 동적으로 바뀐 결과 수를 자동으로 못 듣죠. SP-046은 aria-live로 이를 전달 하라고 합니다. BP-103의 검색 버전입니다.

결과 수 안내가 없을 때(스크린 리더)의 문제:

변화 미인지 필터를 적용해 결과가 23건으로 줄어도, 스크린 리더 사용자는 그 숫자 변화를 자동으로 못 듣습 니다. ‘내 필터가 적용됐나?’, ‘몇 개나 나왔지?’ 모르죠.

빈 결과 미인지 조건이 너무 좁아 0건이어도, 안내가 없으면 결과가 없는 줄 모르고 헤맵니다(SP-040 연계).

그래서 SP-046은 — aria-live="polite"를 요구합니다:

결과 수에 live-region 검색 결과 수 안내 텍스트(“검색 결과: 23건”)를 담는 영역에, aria-live="polite"를 적용합니다. 이 영역의 내용(숫자)이 바뀌면, 스크린 리더가 자동으로 읽어주죠. ’검색 결과 23건’처럼요.

즉시 전달 값이 변경되자마자(정렬·필터 적용 즉시) 스크린 리더에 전달됩니다(SP-044 즉각 적용과 연계). 사용자 가 필터의 효과를 바로 듣죠.

polite 모드 polite는 사용자가 하던 읽기를 끝낸 후 알리는, 끼어들지 않는 모드입니다(BP-049). 결과 수 변경 같은 일반 안내에 적합하죠.

WCAG 4.1.3(상태 메시지). 이는 WCAG 2.1 SC 4.1.3(상태 메시지)의 적용입니다. 포커스 이동 없이 상태(결과 수) 가 바뀌면, 보조 기술에 전달하라는 거죠. aria-live가 표준 방법입니다.

SP-044·045·046의 종합. 검색 정렬·필터 적용 시: 즉각 적용(SP-044) + 적용 단서(SP-045) + 결과 수 live-region (SP-046) + 초점 유지(BP-104)가 함께 동적 검색 접근성을 완성합니다. 시각 사용자는 보고, 스크린 리더 사용자는 들으며 검색을 다루죠.

BP-103의 검색 적용. BP-103(필터링·정렬 결과 수 live-region)을, 검색 — 결과 수에 적용한 게 SP-046입니다. 원리는 같고, 검색 — 결과 화면에 구체화한 거죠.

이 규칙은 검색(SP)의 ’결과 수 변화 접근성’을 담당합니다 — 검색 결과 수에 aria-live=“polite”를 적용해(046), 스크린 리더 사용자도 정렬·필터의 효과(결과 수 변화)를 인지하게 하죠.

정리하면 — 정렬·필터로 검색 결과 수가 바뀌어도 스크린 리더 사용자는 자동으로 못 들으므로, 결과 수 텍스트에 aria- live="polite"를 적용해 변경 즉시 전달해야 합니다.

3. 점검 / 개선

무엇을 점검하나

aria-live 적용 — 검색 결과 수 텍스트에 aria-live="polite"가 있는가.

즉시 전달 — 정렬·필터 적용 시 결과 수 변경이 스크린 리더로 읽히는가.

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

개선 방향

결과 수 안내 영역에 aria-live="polite". 변경 즉시 전달(WCAG 4.1.3).

SP-044(즉각 적용)·BP-104(초점 유지)와 함께 동적 접근성.

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

역할	책임
퍼블리셔/개발	aria-live 구현
QA/접근성	결과 수 전달 검증

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

웹접근성 의무 대상이며 검색 정렬·필터를 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 검색 결과 수 텍스트에 aria-live="polite"가 있나요?

□ 정렬·필터 적용 시 결과 수 변경이 스크린 리더로 읽히나요?

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

❓ FAQ

Q1. aria-live가 왜 필요한가요? 검색 결과 수가 동적으로 바뀌어도(152→23건) 스크린 리더는 자동으로 못 읽습니다. aria-live="polite"로 변경 시 ’검색 결과 23건’을 읽어주죠(WCAG 4.1.3). Q2. BP-103과 같나요? BP-103(필터링·정렬 결과 수 live-region)을 검색 결과 수에 적용한 것입니다. 원리는 같고 검색 결과 화면에 구체화한 거죠. Q3. polite와 assertive 중 뭘 쓰나요? 결과 수 변경은 긴급하지 않으니 끼어들지 않는 polite를 씁니다. assertive는 중요한 오류·경고용이죠.

6. 마무리

SP-046의 메시지:

결과 수 변화를 소리로 — 검색 결과 수 텍스트에 aria-live=“polite”를 적용하라.

결과 수가 바뀌어도 스크린 리더 사용자는 자동으로 못 듣습니다. aria-live=“polite”로 변경 즉시 전달해 필터 효과를 인지 하게 하는 게 핵심이죠. ‘상세 검색’ 서브섹션이 끝났습니다. 다음 편부터는 ‘검색 결과 이용’ 서브섹션입니다.

다음 편 예고 ▶ 「721. (SP-047) 사용자가 필요로 하는 주제별로 검색 결과를 이용할 수 있게 설계되어 있다.」

ViewCheck는 검색 결과 수 텍스트에 aria-live=“polite”가 적용되는지를 진단합니다.

📚 참고 출처

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