알림(alert) 대화상자 예제

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

이 예제를 사용하려면:

alertdialog 역할(role)을 가진 확인 대화상자를 작동시키려면 "폐기" 버튼을 활성화시키세요.
- 확인 대화상자의 "예" 버튼을 활성화하면 "Notes" 텍스트 영역과 노트의 로컬 스토리지가 모두 삭제됩니다.
- "아니오" 버튼을 활성화 하거나 escape를 누르면 대화상자가 닫힙니다.
- 노트 텍스트 영역에 텍스트가 포함되어 있지 않으면 "폐기" 버튼이 비활성화 됩니다.
"Notes" 텍스트 영역의 내용을 로컬 스토리지에 저장할 때 알림(alert)을 작동시키려면 "확인" 버튼을 활성화시키세요.
- 성공적으로 저장하면 노트가 저장되었다고 사용자에게 알리는 짧은 경고가 작동합니다.
- 사용자의 로컬 스토리지 값이 "Notes" 필드와 동일하면 "저장" 버튼은 비활성화 됩니다.
폐기 및 저장 기능을 활성화하고 비활성화 하려면 "Notes" 텍스트 영역을 수정하세요.

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

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

예제

Notes

알림 대화상자의 접근 가능한 이름은 헤딩("확인")으로 설정됩니다.
대화상자의 프롬프트 ("정말...?")은 사용자가 프롬프트를 즉시 인식하도록 하기 위해 aria-describedby를 통해 참조 됩니다.
초점은 대화상자 내 첫 번째 초점을 얻을 수 있는 (focusable) 엘리먼트인 "No" button에 자동으로 설정됩니다. 이는 적어도 파괴적인 작업이므로, "아니오"에 초점을 맞추면 되돌릴 수 없는 "폐기" 작업을 사용자가 실수로 확인하는 것을 방지할 수 잇습니다.
When the buttons are disabled, aria-disabled is used instead of the HTML disabled attribute so the buttons will remain in the page Tab sequence. This makes it easier for screen reader users to discover the buttons and discern how the interface works.

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

역할(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.

aria-modal 속성(property)은 ARIA 1.1에서 도입되었습니다. 비교적 새로운 속성(property)이기 때문에,스크린리더 사용자는 이에 대한 다양한 범위의 지원을 경험할 수 있습니다.
dialog 엘리먼트에 aria-modal 속성(property)을 적용하는 것은 보조 기술에 대화상자 바깥 콘텐트가 비활성(inert) 상태임을 알리기 위해 백그라운드에 aria-hidden를 사용하는 기법을 대체합니다.
aria-hidden이 보조 기술 사용자에게 대화상자 바깥 콘텐트를 비활성(inert)로 만드는데 사용되는 레거시 대화상자 구현에서는, 다음이 중요합니다:
- aria-hidden은 비활성 레이어를 포함하는 각 엘리먼트에 설정됩니다.
- 대화상자 엘리먼트는 aria-hidden이 true로 설정된 엘리먼트의 후손이 아닙니다.