Status Message
상태 메시지
상태 메시지는 대화 상자를 열거나 포커스를 가져가지 않고 결과, 진행 상황, 또는 대기를 보고합니다.
실제 예시
구매자가 코드 JULY15를 사용한 후, 포커스는 그대로 유지됩니다. 상태에는 "할인 적용됨; 총액 NT$1,530"라고 표시됩니다. 잘못된 코드는 해당 필드와 연결된 오류를 보여줍니다. 선택이 필요한 결제 실패는 대화 상자를 열고 대신 포커스를 이동시킵니다.
주요 부분
- 01트리거 작업
- 02지속적인 메시지 컨테이너
- 03중단되지 않는 알림
사용할 때
사람들이 작업을 멈추거나 포커스를 이동시키지 않고도 업데이트를 인지해야 할 때 사용하세요.
다음 경우에는 사용하지 마세요
금방 사라지는 토스트에만 의존하지 마세요. 메시지에 즉각적인 행동이 필요하다면 사람들이 행동할 수 있는 장소로 주의를 이동시키세요.
코드에서 사용된 이름
role=status or an appropriate aria-live region without focus transfer 출시하기 전에
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 상태 메시지 (Status Message)。 User context：구매자가 코드 JULY15를 사용한 후, 포커스는 그대로 유지됩니다. 상태에는 "할인 적용됨; 총액 NT$1,530"라고 표시됩니다. 잘못된 코드는 해당 필드와 연결된 오류를 보여줍니다. 선택이 필요한 결제 실패는 대화 상자를 열고 대신 포커스를 이동시킵니다. Recommended pattern：상태 메시지 (Status Message)。 Why it fits：사람들이 작업을 멈추거나 포커스를 이동시키지 않고도 업데이트를 인지해야 할 때 사용하세요. 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 상태 메시지 (Status Message) 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.