Live Region
라이브 영역
라이브 영역은 중요한 페이지 텍스트가 변경될 때 보조 기술에 알립니다. 포커스를 이동하지 않고도 업데이트를 알릴 수 있습니다.
다른 예시
분석가는 보고서를 새로 고치고, 포커스는 '새로 고침'에 머문다. 정중한 라이브 영역은 '보고서 업데이트 완료, 18행'이라고 말한다. 실패한 새로 고침은 사용자가 즉시 조치를 취해야 할 때만 단호한 경고를 사용한다.
주요 부분
- 01안정된 컨테이너
- 02공손함 설정
- 03변경된 메시지
사용할 때
작업 후 발생하지만 현재 작업에 중요한 업데이트에 사용하세요. 방해가 가장 적은 aria-live 수준을 선택하세요.
다음 경우에는 사용하지 마세요
모든 키 입력, 타이머 틱, 시각적 변화를 발표하지 마십시오. 너무 많은 메시지는 페이지 사용을 어렵게 만듭니다.
코드에서 사용된 이름
aria-live=polite/assertive, role=status, or role=alert 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome:Complete the task with 라이브 영역 (Live Region)。 User context:분석가는 보고서를 새로 고치고, 포커스는 '새로 고침'에 머문다. 정중한 라이브 영역은 '보고서 업데이트 완료, 18행'이라고 말한다. 실패한 새로 고침은 사용자가 즉시 조치를 취해야 할 때만 단호한 경고를 사용한다. Recommended pattern:라이브 영역 (Live Region)。 Why it fits:작업 후 발생하지만 현재 작업에 중요한 업데이트에 사용하세요. 방해가 가장 적은 aria-live 수준을 선택하세요. Do not use it when:모든 키 입력, 타이머 틱, 시각적 변화를 발표하지 마십시오. 너무 많은 메시지는 페이지 사용을 어렵게 만듭니다. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary):이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 라이브 영역 (Live Region) is used now. Definition: 라이브 영역은 중요한 페이지 텍스트가 변경될 때 보조 기술에 알립니다. 포커스를 이동하지 않고도 업데이트를 알릴 수 있습니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.