WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 역할(Role)은 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위해 사용되는 속성입니다. 이 속성들은 특히 스크린 리더와 같은 보조 기술이 웹 페이지의 구조와 기능을 더 잘 이해하도록 도와줍니다. WAI-ARIA 역할은 HTML 요소에 추가되어 보조 기술이 사용자 인터페이스의 목적과 행동을 더 명확하게 이해할 수 있게 합니다.
주요 WAI-ARIA 역할은 Abstract Roles, Widget Roles, Document Structure Roles, Landmark Roles, Live Region Roles, Window Roles로 정의할 수 있습니다.
Window Roles는 웹 애플리케이션의 창과 같은 인터페이스 구성 요소를 정의하는 데 사용됩니다. 이 역할들은 사용자와 상호작용하는 다양한 창 요소를 나타내며, 보조 기술을 사용하는 사용자들이 창 요소를 올바르게 이해하고 사용할 수 있도록 도와줍니다.
W3C ARIA Window Roles
alertdialog 역할은 사용자에게 즉각적인 주의를 요구하는 경고 메시지와 상호작용할 수 있는 대화 상자를 나타냅니다. 이 역할은 중요한 경고나 확인 요청을 포함하며, 사용자가 즉시 반응해야 하는 상황에서 사용됩니다. alertdialog는 일반적인 alert와 달리, 사용자로부터 입력을 받을 수 있는 인터랙티브 요소(예: 버튼, 텍스트 필드)를 포함할 수 있습니다.
W3C ARIA alertdialog
MDN ARIA alertdialog
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 alertdialog 역할 사용 예시 이 예시는 파일 삭제를 확인하는 경고 대화 상자를 정의한 것입니다. alertdialog 역할을 사용해, 보조 기술이 이 대화 상자가 즉각적인 응답을 요구한다는 것을 알립니다. aria-labelledby 속성은 대화 상자의 제목을 참조하고, aria-describedby 속성은 대화 상자의 내용을 설명합니다.
<div role="alertdialog" aria-labelledby="alertTitle" aria-describedby="alertDesc">
<h2 id="alertTitle">Delete Confirmation</h2>
<p id="alertDesc">Are you sure you want to delete this file? This action cannot be undone.</p>
<button id="confirmDelete">Yes, delete it</button>
<button id="cancelDelete">Cancel</button>
</div>
모달 alertdialog 예시 이 예시는 세션 타임아웃을 알리고 사용자가 세션을 연장하거나 로그아웃할 수 있는 모달 대화 상자를 구현한 것입니다. aria-modal=”true” 속성은 이 대화 상자가 모달임을 지정하여, 사용자가 대화 상자 외의 페이지와 상호작용할 수 없게 합니다.
<div role="alertdialog" aria-modal="true" aria-labelledby="alertTitle" aria-describedby="alertDesc">
<h2 id="alertTitle">Session Timeout</h2>
<p id="alertDesc">Your session is about to expire. Would you like to extend your session?</p>
<button id="extendSession">Extend Session</button>
<button id="logout">Log Out</button>
</div>
자동 포커스 관리가 포함된 alertdialog 예시 이 예시는 alertdialog가 나타날 때 자동으로 포커스를 관리하여, 대화 상자가 활성화되면 사용자가 즉시 응답할 수 있도록 합니다. tabindex=”-1”은 대화 상자가 초기 포커스를 받을 수 있도록 설정합니다.
<div role="alertdialog" aria-labelledby="alertTitle" aria-describedby="alertDesc" tabindex="-1">
<h2 id="alertTitle">Unsaved Changes</h2>
<p id="alertDesc">You have unsaved changes. Do you want to save them before exiting?</p>
<button id="saveChanges">Save</button>
<button id="discardChanges">Discard</button>
<button id="cancelExit">Cancel</button>
</div>
<script>
document.querySelector('[role="alertdialog"]').focus();
</script>
alertdialog 역할은 사용자에게 즉각적인 주의를 요구하는 경고 메시지와 상호작용할 수 있는 대화 상자를 나타냅니다. 이 역할은 중요한 경고나 확인 요청을 포함하며, 사용자가 즉시 반응해야 하는 상황에서 사용됩니다. alertdialog는 일반적인 alert와 달리, 사용자로부터 입력을 받을 수 있는 인터랙티브 요소(예: 버튼, 텍스트 필드)를 포함할 수 있습니다.
W3C ARIA dialog
MDN ARIA dialog
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 dialog 역할 사용 예시 이 예시는 사용자 설정을 조정할 수 있는 기본 대화 상자를 정의한 것입니다. dialog 역할을 사용하여, 보조 기술이 이 요소를 대화 상자로 인식할 수 있게 했습니다. aria-labelledby 속성은 대화 상자의 제목을 참조하고, aria-describedby 속성은 대화 상자의 내용을 설명합니다.
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
<h2 id="dialogTitle">User Preferences</h2>
<p id="dialogDesc">Adjust your settings below:</p>
<label for="setting1">Enable notifications</label>
<input type="checkbox" id="setting1">
<button type="button">Save</button>
<button type="button">Cancel</button>
</div>
모달 dialog 예시 이 예시는 사용자가 페이지를 벗어나기 전에 변경 사항을 저장할지 묻는 모달 대화 상자입니다. aria-modal=”true” 속성은 이 대화 상자가 모달임을 나타내며, 사용자가 대화 상자가 열린 동안 다른 페이지 요소와 상호작용할 수 없도록 합니다.
<div role="dialog" aria-modal="true" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
<h2 id="dialogTitle">Save Changes</h2>
<p id="dialogDesc">Do you want to save your changes before exiting?</p>
<button type="button">Save</button>
<button type="button">Don't Save</button>
<button type="button">Cancel</button>
</div>
비모달 dialog 예시 이 예시는 사용자에게 도움말 정보를 제공하는 비모달 대화 상자를 나타냅니다. 이 대화 상자는 페이지의 다른 부분과 동시에 상호작용할 수 있도록 설계되어 있으며, 모달 속성이 없습니다.
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
<h2 id="dialogTitle">Help Information</h2>
<p id="dialogDesc">Here is some helpful information about using this feature...</p>
<button type="button">Close</button>
</div>
자동 포커스 관리가 포함된 dialog 예시 이 예시는 사용자가 로그인해야 하는 모달 대화 상자를 나타내며, 자동으로 포커스가 대화 상자로 이동합니다. 이로 인해 사용자는 대화 상자가 나타나자마자 키보드를 사용해 상호작용할 수 있습니다.
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc" tabindex="-1">
<h2 id="dialogTitle">Login Required</h2>
<p id="dialogDesc">Please log in to continue.</p>
<label for="username">Username</label>
<input type="text" id="username" tabindex="0">
<label for="password">Password</label>
<input type="password" id="password">
<button type="button">Log In</button>
<button type="button">Cancel</button>
</div>
<script>
document.querySelector('[role="dialog"]').focus();
</script>