이 영역은 긴급 공지다

KRDS CP-158 — 긴급 공지 섹션에 배너 역할을 부여함으로써 스크린 리더 사용자가 용도를 직관적이고 빠르게 탐색할 수 있도록 하고 있다.

0. 들어가며 — 시각적 강조를 귀로도

이번 278편은 긴급 공지 섹션에 배너 역할(role)을 부여해 스크린 리더 사용자가 용도를 빠르게 탐색하게 하라는 규칙입니다.

시각 사용자는 화면 최상단의 전체 너비 강조 띠(CP-154)를 보고 ‘아, 긴급 공지구나’ 합니다. 그런데 스크린 리더 사용자에게는 그 시각·위치 단서가 없죠. 긴급 공지 영역이 적절한 역할로 표시돼 있지 않으면, 스크린 리더는 이를 그냥 ‘텍스트 묶음’으로 읽어 — 긴급 공지임을 모릅니다. CP-158은 이 영역에 ’배너’ 역할을 부여합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 배너 역할 부여

CP-158 (컴포넌트 > 긴급 공지) “긴급 공지 섹션에 배너 역할을 부여함으로써 스크린 리더 사용자가 용도를 직관적이고 빠르게 탐색할 수 있도록 하고 있다.”

긴급 공지 영역에 시맨틱 역할(role="banner" 또는 적절한 ARIA 역할)을 부여해, 보조기술이 이 영역의 용도(긴급 공지)를 인지하고 빠르게 찾게 하라는 뜻입니다.

정리: 긴급 공지 섹션에 배너 역할을 줘 스크린 리더가 용도를 인지·탐색하게 하라. 이게 CP-158입니다.

2. 왜 배너 역할을 부여하나

스크린 리더 사용자는 페이지를 구획(landmark) 단위로 탐색합니다(브레드크럼 CP-085, 사이드 메뉴 CP-098 등에서 반복). 각 영역이 시맨틱 역할로 표시돼야 이 탐색 목록에 잡혀, 사용자가 빠르게 도달하죠. 긴급 공지처럼 가장 중요한 정보일수록, 스크린 리더 사용자가 그것을 빠르게 찾고 용도를 인지하는 것이 중요합니다.

긴급 공지 영역을 그냥 <div>로만 만들면 — 스크린 리더는 이를 일반 텍스트 영역으로 읽습니다. 사용자는 그게 ’긴급 공지’인지, 일반 안내인지, 본문 일부인지 구별할 수 없죠. 가장 중요한 정보가 다른 콘텐츠에 묻혀 버립니다.

그래서 긴급 공지 섹션에 시맨틱 역할을 부여합니다. 규칙이 말하는 ’배너 역할’의 구현은 맥락에 따라 몇 가지를 고려합니다:

① 랜드마크 역할. 긴급 공지 영역을 보조기술이 ’특별한 구획’으로 인식하게 합니다. 다만 ARIA의 role= "banner"는 본래 ’페이지 전역 헤더(로고·주요 검색 등)’를 뜻하는 특정 랜드마크라, 페이지당 보통 하나만 쓰입 니다. 그래서 긴급 공지에는 — 상황에 따라 <section>에 aria-label="긴급 공지"를 주거나, 적절한 영역 역할(region 등)로 ’이 영역은 긴급 공지’임을 이름과 함께 노출하는 방식이 흔하죠. 핵심은 영역의 용도가 이름과 함께 보조기술에 전달되는 것입니다 — 스크린 리더가 “긴급 공지, 영역”처럼 읽어 사용자가 빠르게 인지·점프하게요.

② 실시간 알림 고려. 긴급 공지가 페이지 로드 후 동적으로 나타나는 경우(예: 실시간 장애 발생 시 즉시 표시), 단순 랜드마크만으론 사용자가 그 등장을 못 알아챌 수 있습니다. 이때는 ARIA 라이브 리전(role="alert" 또는 aria-live="assertive")을 함께 고려하죠 — role="alert"는 그 내용이 나타나거나 바뀌면 스크린 리더가 즉시 낭독합니다. 정말 시급한 경보라면 이 즉시 알림이 적절하죠. 다만 alert는 사용자의 현재 작업을 끊고 끼어드는 강한 방식이라, 페이지 로드 시 이미 있는 정적 긴급 공지에는 랜드마크+이름이, 동적 발생 경보에는 라이브 리전이 더 맞는 식으로 상황에 맞게 씁니다.

③ 빠른 탐색. 어느 방식이든 목표는 — 스크린 리더 사용자가 긴급 공지를 직관적이고 빠르게 인지·탐색하는 것입니다. 영역에 명확한 역할·이름이 있으면, 사용자는 구획 점프로 긴급 공지에 바로 가거나(랜드마크), 등장 즉시 들을 수(라이브 리전) 있죠. 시각 사용자가 강조 띠를 보고 즉시 아는 것을, 비시각 사용자도 동등하게 얻습니다.

이 규칙은 긴급 공지 접근성 묶음의 핵심입니다 — CP-154(DOM상 본문 앞쪽 배치)로 먼저 닿게 하고, CP-158(역할 부여)로 용도를 인지시키며, CP-159(아이콘 대체 텍스트 처리)·CP-160(링크 이름)으로 세부를 다루죠. 가장 중요한 정보인 만큼, 모든 사용자에게 ‘가장 먼저·명확하게’ 전달되게 하는 것입니다.

3. 점검 / 개선

무엇을 점검하나

역할·이름 부여 — 긴급 공지 영역에 시맨틱 역할과 이름(aria-label="긴급 공지" 등)이 있는가.

용도 인지 — 스크린 리더가 이 영역을 ’긴급 공지’로 인지·탐색할 수 있는가.

동적 알림 — 동적 발생 시 라이브 리전(role="alert" 등)으로 즉시 전달되는가.

개선 방향

<section aria-label="긴급 공지" role="region"> … </section> <!-- 정적 --> <div role="alert"> … </div> <!-- 동적 발생 시 즉시 낭독 -->

상황(정적/동적)에 맞게 랜드마크+이름 또는 라이브 리전 적용.

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

역할	책임
퍼블리셔/개발	역할·aria-label·라이브 리전 마크업
접근성 담당	긴급 공지 인지·낭독 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 긴급 공지 영역에 시맨틱 역할·이름(aria-label="긴급 공지")이 있나요?

□ 스크린 리더가 이 영역을 ’긴급 공지’로 인지·탐색하나요?

□ 동적 발생 시 라이브 리전으로 즉시 전달되나요?

❓ FAQ

Q1. role="banner"를 그냥 쓰면 되나요? role="banner"는 본래 페이지 전역 헤더용이라 페이지당 하나입니다. 긴급 공지엔 aria-label="긴급 공지"를 단 영역이나 상황에 맞는 역할을 씁니다. Q2. role="alert"와 뭐가 다른가요? alert는 동적으로 나타나면 즉시 낭독하는 라이브 리전입니다. 페이지 로드 시 이미 있는 정적 공지엔 랜드마크+이름이, 동적 발생엔 alert이 맞습니다. Q3. 왜 중요한가요? 가장 중요한 정보를 비시각 사용자도 빠르게 인지·탐색하게 해야 하니까요.

6. 마무리

CP-158의 메시지:

이 영역은 긴급 공지다 — 배너 역할·이름으로 스크린 리더가 용도를 빠르게 인지하게.

시각 사용자가 강조 띠로 긴급 공지를 즉시 알듯, 비시각 사용자에게는 시맨틱 역할·이름이 같은 의미를 전합니다. 정적이면 랜드마크+이름, 동적 발생이면 라이브 리전으로 빠르게 인지·탐색하게 하죠. 가장 중요한 정보를 모두에게 보장합니다. 다음 편은 긴급 공지 아이콘의 대체 텍스트 처리입니다.

다음 편 예고 ▶ 「279. (CP-159) 아이콘에 대체 텍스트를 제공하고 있지 않다.」

ViewCheck는 긴급 공지 영역에 배너 역할이 부여돼 보조기술에 노출되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 긴급 공지(Critical alerts) 가이드 — https://www.krds.go.kr/html/site/component/component_13.html

WAI-ARIA — alert role / landmarks — https://www.w3.org/WAI/ARIA/apg/patterns/alert/

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

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