오류(제안) 메시지 Alert | WAI ARIA - alert 예제

알림(alert)

알림(alert)은 사용자의 작업을 방해하지 않고 사용자의 관심을 끌어내는 방법으로 짤막한 중요한 메세지를 표시하는 엘리먼트입니다. 동적으로 렌더링 된 알림(alert)은 대부부의 스크린리더에 의해 자동으로 낭독되며, 일부 운영체제에서는 알림(alert)음을 발생시킬 수도 있습니다. 이 때, 스크린리더는 페이지가 완전히 로드되기 전에는 페이지에 있는 알림(alert)을 사용자에게 알려주지 않는다는 점을 유념해야 합니다.

알림(alert)은 사용작의 작업을 계속 할 수 있는 것을 방해하지 않으면서 중요하고 시간에 민감할 수 있는 정보를 제공하기 위한 것이기 때문에, 키보드 초점에 영향을 주지 않는 것이 매우 중요합니다.

• 잘못된 값이 양식 필드에 입력되었습니다.
• 사용자의 로그인 세션이 곧 만료됩니다.
• 서버 연결이 끊어져 로컬 변경 사항이 저장되지 않습니다.

💡 방해가 되는 특성때문에 alert 역할은 사용자의 즉각적인 주의가 필요한 상황에서만 드물게 사용해야 한다.

알림 예제

Trigger Alert 버튼을 활성화하면 예제 알림(alert) 엘리먼트에 메세지가 삽입됩니다.

## Role, Property, State, Tabindex 속성

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

Keyboard 상호작용

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