status, alert, log 역할
업데이트 유형마다 올바른 실시간 역할을 선택합니다.
status, alert, log 역할은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
역할에 알림 우선순위가 포함되어 있습니다
일부 ARIA 역할은 요소를 라이브 영역으로 바꾸면서 적절한 알림 우선순위를 자동으로 설정하므로 마크업을 덜 작성할 수 있습니다.
role 상태는 정중한 알림입니다
상태 역할은 정중하게 업데이트되는 영역을 나타냅니다. 저장 또는 복사 완료 메시지처럼 조용한 확인에 적합합니다. 📋
<div role="status">Copied to clipboard</div>상태는 aria-live 정중함을 의미합니다
role 상태를 사용하는 것은 aria-live를 정중한 알림으로 설정하는 축약형입니다. 더 명확하고 의미론적인 의도로 같은 동작을 얻을 수 있습니다.
role 경고는 즉시 알림입니다
경고 역할은 콘텐츠가 나타나는 즉시 단호하게 알립니다. 지금 당장 주의가 필요한 상황에 사용하시기 바랍니다. ⚠️
<div role="alert">Payment failed</div>경고는 aria-live 즉시 알림을 의미합니다
경고는 aria-live 즉시 알림과 aria-atomic true처럼 동작합니다. 알림을 중단하고 전체 텍스트를 하나의 메시지로 읽습니다.
role 로그는 연속 콘텐츠에 사용합니다
로그 역할은 채팅 대화나 활동 피드처럼 새 항목이 순서대로 추가되는 콘텐츠에 적합합니다. 정중하게 읽습니다.
<ul role="log" aria-live="polite"></ul>로그는 순서를 유지합니다
로그는 이전 메시지가 중요하고 순서에 의미가 있음을 나타내므로, 보조 기술은 추가된 항목을 들어온 순서대로 읽습니다.
실제 사용에서 상태와 경고 비교
부드러운 확인에는 status를, 문제가 발생했을 때는 alert를 선택합니다. 저장 완료 배지는 status이고, 양식 작성을 막는 오류는 alert입니다.
경고는 꼭 필요할 때만 사용해야 합니다
alert 역할을 지나치게 사용하면 모든 내용이 중단되어 시끄럽게 느껴집니다. 실제 오류와 시간에 민감한 경고에만 사용하도록 제한하십시오.
내용보다 먼저 역할 배치하기
일반 라이브 영역과 마찬가지로 role status가 있는 요소는 텍스트를 삽입하기 전에 존재해야 합니다. 그래야 스크린 리더가 이미 해당 요소를 감시하고 있습니다.
<p role="status" id="out"></p>역할은 의미도 더합니다
이러한 역할은 정중함을 나타내는 것을 넘어 해당 영역이 무엇인지 설명합니다. 이러한 의미의 명확성은 스크린 리더와 다음 개발자 모두에게 도움이 됩니다.
빠른 확인
사용자를 즉시 막는 양식 제출 오류를 알려야 합니다. 어떤 역할이 적합할까요?
복습: 라이브 역할
이제 status는 정중하게, alert는 단호하게 알리고, log는 순서가 있는 스트림을 유지한다는 것을 배웠습니다. 업데이트의 중요도에 맞는 역할을 선택하십시오. ✅
자주 묻는 질문
“status, alert, log 역할” 강의는 무료인가요?
네 — “status, alert, log 역할” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“status, alert, log 역할”에서 뭘 배우나요?
업데이트 유형마다 올바른 실시간 역할을 선택합니다. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“status, alert, log 역할” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- polite와 assertive: 긴급성 선택하기
- status, alert, log 역할
- 토스트, 로더, 카운트 알리기
- 실시간 영역이 실패하는 이유와 해결 방법