알림(alert) 예제

다음 예제는 알림(alert)에 대한 설계 패턴을 보여줍니다. Trigger Alert 버튼을 활성화하면 예제 알림(alert) 엘리먼트에 메세지가 삽입됩니다.

유사한 예는 다음과 같습니다:

예제

이것은 단지 테스트일 뿐입니다. 일반적인 알림(alert)은 오류, 주의(warning) 조건, 사용자의 작업 컨텍스트에서 중요한 정보 도착과 같은 이벤트에 의해 작동 됩니다.

접근성 특성

알림(alert)은 중요한(critical) 정보를 위한 것이기 때문에, 보조 기술은 알림(alert) 텍스트의 변경 사항에 주의를 끌도록 설계된 특수한 동작을 제공할 수 있습니다. 예를 들어, 스크린리더는 모든 다른 낭독을 중단하고 특별한 소리나 구문을 서두로 새로운 알림(alert) 텍스트의 내용을 시작할 수 있습니다.

키보드 지원

키보드 인터랙션이 필요하지 않습니다.

Role, Property, State, Tabindex 어트리뷰트

역할(role) 어트리뷰트 엘리먼트 사용법
alert div 알림(alert) 콘텐츠가 추가되거나 업데이트 될 컨테이터로 엘리먼트를 식별 시킵니다.
aria-live=assertive div에 암묵적
  • alert 역할(role)에 암묵적이므로 코드에 선언할 필요는 없습니다.
  • 다른 프로세스를 잠시 중단하고 관련 알림(alert) 컨텐이너 변경 사항의 즉시 알림을 사용자에게 제공하도록 보조 기술에 지시합니다.
aria-atomic=true div에 암묵적
  • alert 역할(role)에 암묵적이므로 코드에 선언할 필요는 없습니다.
  • 일부만 변경 된 경우에도 알림(alert) 메세지로 알림(alert) 엘리먼트의 전체 콘텐츠를 사용하도록 보조 기술에 지시합니다.

Javascript와 CSS 소스 코드

HTML 소스 코드