라이브 영역 aria-live aria-atomic aria-relevant
비동기 업데이트를 보조 기술에 알리기
라이브 영역 aria-live aria-atomic aria-relevant은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
라이브 영역이란 무엇인가요
라이브 영역은 콘텐츠가 동적으로 업데이트되는 페이지의 한 부분입니다. 화면 낭독기는 라이브 영역을 모니터링하고 사용자가 focus를 이동하지 않아도 변경 사항을 자동으로 안내합니다.
라이브 영역 만들기
container 요소에 aria-live를 추가하십시오:
<!-- Polite: announce when user is idle -->
<div aria-live="polite" id="notifications"></div>
<!-- Inject text to announce: -->
<script>
document.getElementById('notifications').textContent = '5 new messages';
// Screen reader announces: '5 new messages' when user pauses
</script>aria-live 값 복습
aria-live의 세 가지 수준:
off— 안내하지 않음(라이브 영역이 아닌 영역의 기본값)polite— 사용자가 말하다가 잠시 멈추면 안내함assertive— 즉시 안내하며 현재 음성을 중단함
aria-atomic 자세히 알아보기
aria-atomic은 콘텐츠가 변경될 때 무엇을 안내할지 제어합니다:
<div aria-live="polite" aria-atomic="false"> <!-- default -->
Items in cart: <span id="count">3</span>
</div>
<!-- Only the changed span is announced: '4' -->
<div aria-live="polite" aria-atomic="true">
Items in cart: <span id="count">3</span>
</div>
<!-- The entire div is announced: 'Items in cart: 4' -->
<!-- aria-atomic="true" gives more context but is more verbose -->aria-relevant 값
aria-relevant는 어떤 DOM 변경이 안내를 트리거할지 지정합니다:
<!-- Default: additions text -->
<div aria-live="polite" aria-relevant="additions text">
<!-- Announce removals too: -->
<div aria-live="polite" aria-relevant="removals">
<!-- Announce everything: -->
<div aria-live="polite" aria-relevant="all">
<!-- Values: additions, removals, text, all
'additions' = added nodes announced
'removals' = removed nodes announced
'text' = text content changes announced -->미리 정의된 라이브 영역 역할
일부 역할은 aria-live를 암묵적으로 설정합니다:
role="alert"— aria-live="assertive" + aria-atomic="true"role="status"— aria-live="polite" + aria-atomic="true"role="log"— aria-live="polite"role="timer"— aria-live="off"role="marquee"— aria-live="off"
라이브 영역을 사용한 로딩 상태
로딩 및 완료 상태를 안내합니다:
<div role="status" aria-live="polite" aria-atomic="true" id="load-status">
<!-- empty initially -->
</div>
<script>
async function loadData() {
document.getElementById('load-status').textContent = 'Loading...';
const data = await fetchData();
renderResults(data);
document.getElementById('load-status').textContent =
`${data.length} results loaded.`;
}
</script>양식 제출 피드백
양식 제출 상태를 위한 라이브 영역:
<form id="contact-form" novalidate>
<input type="email" name="email">
<button type="submit">Subscribe</button>
</form>
<div role="status" aria-live="polite" id="form-status"></div>
<script>
form.addEventListener('submit', async (e) => {
e.preventDefault();
const status = document.getElementById('form-status');
status.textContent = 'Submitting...';
await submitForm(new FormData(form));
status.textContent = 'Thank you! You are now subscribed.';
});
</script>검색 results 수
검색 results를 동적으로 안내합니다:
<label for="search">Search</label>
<input type="search" id="search">
<div role="status" aria-live="polite" aria-atomic="true" id="results-count"></div>
<div id="results"></div>
<script>
let debounceTimer;
search.addEventListener('input', () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
const results = filterResults(search.value);
renderResults(results);
document.getElementById('results-count').textContent =
`${results.length} results for "${search.value}"`;
}, 300);
});
</script>라이브 영역 안티 패턴
다음과 같은 라이브 영역 사용 실수를 피하십시오:
- 라이브 영역을 만들었다가 제거하지 마십시오 — 처음 콘텐츠를 비워 둔 채 지속되도록 만드십시오
- aria-hidden 영역 안에 라이브 영역을 넣지 마십시오
- 일상적인 업데이트에 assertive를 사용하지 마십시오 — 사용자 경험을 크게 방해합니다
- 업데이트를 너무 자주 안내하지 마십시오(검색 results 수 업데이트 빈도를 제한하십시오)
라이브 영역 테스트
라이브 영역 안내를 테스트하는 방법:
- VoiceOver(Mac: Cmd+F5) 또는 NVDA(Windows: Ctrl+Alt+N)를 켭니다
- 업데이트를 트리거하고 안내를 들어 봅니다
- 타이밍을 확인합니다: polite는 기다리고 assertive는 중단합니다
- axe DevTools가 라이브 영역 문제를 보고하지 않는지 확인합니다
빠른 확인
어떤 역할이 aria-live assertive와 aria-atomic true를 암묵적으로 설정할까요?
복습: 라이브 영역
라이브 영역의 핵심:
aria-live="polite"— 사용자가 멈출 때까지 기다립니다aria-live="assertive"— 즉시 중단합니다aria-atomic="true"— 전체 영역을 안내합니다role="alert"= assertive + atomic; role="status" = polite + atomic- 라이브 영역을 지속되도록 유지하고, 콘텐츠를 비운 다음 설정하십시오
자주 묻는 질문
“라이브 영역 aria-live aria-atomic aria-relevant” 강의는 무료인가요?
네 — “라이브 영역 aria-live aria-atomic aria-relevant” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“라이브 영역 aria-live aria-atomic aria-relevant”에서 뭘 배우나요?
비동기 업데이트를 보조 기술에 알리기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“라이브 영역 aria-live aria-atomic aria-relevant” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 토글을 위한 aria-expanded 및 aria-controls
- aria-selected 및 탭 패턴
- 라이브 영역 aria-live aria-atomic aria-relevant
- 스크린 리더로 테스트하기