알림(alert) 대화상자 예제

다음 확인 프롬프트 예제는 알림 대화상자에 대한 설계 패턴을 보여줍니다. 또한 두 패턴에서 제공되는 경험을 쉽게 비교할 수 있도록 경고에 대한 설계 패턴의 예를 포함합니다.

이 예제를 사용하려면:

참고: 이 예제는 alertdialog의 동작을 만들기 위해 모달 대화상자 예제의 코드를 사용하므로 해당 예제를 참고하는 것이 유용할 수 있습니다.

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

예제

접근성 특성

키보드 지원

기능
Tab
  • 대화상자 내 다음 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시키세요.
  • 초점이 대화상자 내 마지막 초점을 얻을 수 있는(focusable) 엘리먼트에 있다면, 대화상자 내 첫 번째 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시키세요.
Shift + Tab
  • 대화상자 내 이전 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시키세요.
  • 초점이 대화상자 내 첫 번째 초점을 얻을 수 있는(focusable) 엘리먼트에 있다면, 대화상자 내 마지막 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시키세요.
Escape 대화상자를 닫으세요.
Command + S (Mac만) 초점을 얻은 경우 노트 textarea의 콘텐츠를 저장하세요
Control + S (Windows만) 초점을 얻은 경우 노트 textarea의 콘텐츠를 저장하세요

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

역할(role) 어트리뷰트 엘리먼트 사용법
alertdialog div 알림 대화상자 컨테이너로 제공되는 엘리먼트를 식별 시킵니다.
aria-labelledby="ID_REFERENCE" div 알림 대화상자 제목을 제공하는 엘리먼트를 참조하여 알림 대화상자에 접근 가능한 이름을 제공 시킵니다.
aria-describedby="ID_REFERENCE" div 주요 메세지나 알림 대화상자의 목적을 설명하는 알림 대화상자 콘텐츠를 참조하여 알림 대화상자에 접근 가능한 설명을 제공 시킵니다.
aria-modal="true" div 현재 알림 대화상자 아래 가려진 창이 상호 작용 가능하지 않음을 (inert) 보조 기술에 지시합니다.
alert div 경고 알림으로 제공하는 엘리먼트를 식별 시킵니다.
aria-disabled="true" button Tells assistive technology users the button cannot be activated.

Notes on aria-modal and aria-hidden

Javascript와 CSS 소스 코드

HTML 소스 코드