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로 정의할 수 있습니다.
Live Region Roles는 웹 페이지에서 콘텐츠가 동적으로 변경될 때, 보조 기술이 이를 즉시 사용자에게 알리도록 도와주는 ARIA 역할입니다. 이러한 역할들은 사용자에게 실시간으로 중요한 업데이트나 변화가 발생했음을 알리는 데 사용되며, 페이지 새로 고침 없이도 정보를 실시간으로 전달할 수 있습니다.
W3C ARIA Live Region Roles
alert 역할은 웹 페이지에서 중요한 메시지를 즉시 사용자에게 전달하는 데 사용됩니다. alert 역할은 경고나 중요한 정보와 같은 긴급한 메시지를 사용자에게 알리며, 보조 기술은 이 역할이 적용된 콘텐츠를 즉시 읽어 사용자에게 전달합니다. alert는 사용자에게 방해가 될 수 있으므로, 매우 신중하게 사용해야 합니다.
W3C ARIA alert
MDN ARIA alert
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 alert 역할 사용 예시 이 예시는 세션이 만료되었음을 사용자에게 알리는 메시지를 나타냅니다. alert 역할이 적용되어, 보조 기술이 이 메시지를 즉시 사용자에게 전달합니다.
<div role="alert">
Your session has expired. Please log in again.
</div>
동적으로 생성된 alert 예시 이 예시는 폼 제출 실패 시 사용자에게 경고를 표시하는 동적 alert 메시지를 나타냅니다. 자바스크립트를 통해 alert 메시지가 표시되면 보조 기술이 이를 즉시 사용자에게 전달합니다.
<div id="alertBox" role="alert" style="display:none;">
Form submission failed. Please try again.
</div>
<script>
// Simulate an error
document.getElementById('alertBox').style.display = 'block';
</script>
폼 필드 유효성 검사 alert 예시 이 예시는 사용자가 잘못된 이메일 주소를 입력했을 때 경고 메시지를 표시하는 alert를 포함합니다. 제출하려는 폼의 이메일 입력이 유효하지 않은 경우, alert 역할을 가진 경고 메시지가 표시되고, 보조 기술이 이를 사용자에게 즉시 전달합니다.
<form>
<label for="email">Email:</label>
<input type="email" id="email" required>
<div role="alert" id="emailAlert" style="color:red; display:none;">
Please enter a valid email address.
</div>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
const emailInput = document.getElementById('email');
const emailAlert = document.getElementById('emailAlert');
if (!emailInput.checkValidity()) {
event.preventDefault();
emailAlert.style.display = 'block';
}
});
</script>
log 역할은 동적으로 추가되는 텍스트 정보를 사용자에게 실시간으로 전달하는 데 사용됩니다. 이 역할은 채팅 로그, 시스템 로그, 활동 피드 등과 같이 지속적으로 업데이트되는 정보를 포함한 콘텐츠 영역에 적용됩니다. 보조 기술은 log 역할이 적용된 영역에서 새로운 정보가 추가될 때마다 이를 사용자에게 알립니다.
W3C ARIA log
MDN ARIA log
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 log 역할 사용 예시 이 예시는 사용자의 로그인 활동을 기록하는 로그를 나타냅니다. 보조 기술은 log 역할이 적용된 이 영역에서 새로운 정보가 추가될 때마다 이를 사용자에게 전달합니다.
<div role="log" aria-live="polite">
<p>User logged in at 12:00 PM.</p>
</div>
동적으로 업데이트되는 log 예시 이 예시는 채팅 애플리케이션의 로그를 나타내며, 새로운 메시지가 추가될 때마다 로그가 업데이트됩니다. log 역할은 사용자가 이전 메시지와 새로운 메시지를 쉽게 구분할 수 있도록 도와줍니다.
<div role="log" aria-live="polite" id="chatLog">
<p>12:01 PM: User1: Hello!</p>
</div>
<script>
function addChatMessage(message) {
const log = document.getElementById('chatLog');
const newMessage = document.createElement('p');
newMessage.textContent = message;
log.appendChild(newMessage);
}
// Simulating a new chat message
addChatMessage('12:02 PM: User2: Hi there!');
</script>
시스템 로그 예시 이 예시는 시스템 로그를 기록하는 영역을 나타냅니다. 시스템 상태가 변경되면 로그가 동적으로 업데이트되며, 보조 기술은 사용자가 이 새로운 정보를 놓치지 않도록 전달합니다.
<div role="log" aria-live="polite" id="systemLog">
<p>System started at 12:00 PM.</p>
</div>
<script>
function addSystemLogEntry(entry) {
const log = document.getElementById('systemLog');
const newEntry = document.createElement('p');
newEntry.textContent = entry;
log.appendChild(newEntry);
}
// Simulating a new system log entry
addSystemLogEntry('12:05 PM: System check completed.');
</script>
marquee 역할은 연속적으로 움직이는 텍스트나 다른 콘텐츠를 나타내는 데 사용됩니다. 이 역할은 텍스트가 자동으로 스크롤되거나 움직이는 상황에서, 보조 기술이 이 동적 콘텐츠를 올바르게 전달하도록 합니다. marquee 역할은 웹 애플리케이션에서 시각적으로 강조되거나 지속적으로 변화하는 정보를 제공하는 경우에 사용됩니다. 그러나 이 역할을 사용할 때는 사용자의 경험을 해치지 않도록 신중하게 고려해야 합니다.
W3C ARIA marquee
MDN ARIA marquee
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 marquee 역할 사용 예시 이 예시는 뉴스 헤드라인을 연속적으로 스크롤하는 marquee를 나타냅니다. 보조 기술은 이 동적인 콘텐츠를 인식하고, 사용자가 이 중요한 정보를 놓치지 않도록 전달합니다.
<div role="marquee">
Breaking News: Market hits record high today.
</div>
수평으로 스크롤되는 텍스트 예시 이 예시는 웹 페이지 상단에 표시되는 스크롤링 환영 메시지를 구현한 것입니다. marquee 역할을 사용해, 사용자가 이 중요한 메시지를 시각적으로 인식하지 못하더라도 보조 기술이 이를 전달하도록 설정합니다.
<div role="marquee" style="white-space: nowrap; overflow: hidden; width: 100%;">
<p style="display: inline-block; animation: marquee 10s linear infinite;">
Welcome to our website! Enjoy our latest updates and features.
</p>
</div>
<style>
@keyframes marquee {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
지속적으로 업데이트되는 주식 정보 예시 이 예시는 주식 시장 정보를 지속적으로 업데이트하여 스크롤하는 marquee를 구현한 것입니다. 보조 기술은 이 콘텐츠를 인식하고, 사용자가 중요한 정보를 놓치지 않도록 돕습니다.
<div role="marquee" style="white-space: nowrap; overflow: hidden; width: 100%;">
<p style="display: inline-block; animation: stockmarquee 15s linear infinite;">
AAPL: 150.25 (+1.25%) | TSLA: 720.50 (-2.10%) | AMZN: 3300.00 (+0.50%)
</p>
</div>
<style>
@keyframes stockmarquee {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
status 역할은 사용자에게 페이지 내의 특정 상태나 프로세스의 결과를 전달하는 데 사용됩니다. 이 역할은 경고처럼 즉각적인 주의를 요구하지 않지만, 사용자에게 중요한 상태 정보를 제공해야 하는 경우에 적합합니다. status 역할은 사용자에게 방해가 되지 않도록 자연스럽게 정보를 전달합니다.
W3C ARIA status
MDN ARIA status
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 status 역할 사용 예시 이 예시는 사용자가 변경한 내용을 성공적으로 저장했음을 알리는 상태 메시지를 나타냅니다. status 역할이 적용되어, 보조 기술이 이 정보를 사용자에게 자연스럽게 전달합니다.
<div role="status">
Your changes have been saved successfully.
</div>
폼 제출 후의 상태 메시지 예시 이 예시는 사용자가 폼을 제출한 후 성공적으로 제출되었음을 알리는 상태 메시지를 나타냅니다. status 역할이 적용된 이 영역에 메시지가 표시되며, 보조 기술이 이를 사용자에게 전달합니다.
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
<div role="status" id="formStatus"></div>
<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
document.getElementById('formStatus').textContent = "Form submitted successfully!";
});
</script>
파일 업로드 상태 예시 이 예시는 파일 업로드가 진행 중임을 알리고, 완료되면 성공 메시지를 표시하는 상태 영역을 나타냅니다. status 역할을 사용하여 보조 기술이 업로드 상태를 사용자에게 자연스럽게 전달합니다.
<div id="uploadStatus" role="status">
Uploading file...
</div>
<script>
// Simulating a file upload process
setTimeout(() => {
document.getElementById('uploadStatus').textContent = "File uploaded successfully!";
}, 3000);
</script>
timer 역할은 웹 애플리케이션에서 특정 작업이나 이벤트의 남은 시간을 사용자에게 알리는 데 사용됩니다. 이 역할은 특히 세션 타임아웃, 시험 시간, 또는 다른 시간 제한이 있는 작업을 수행할 때 사용자에게 남은 시간을 명확하게 전달하는 데 유용합니다. timer 역할을 사용하면 보조 기술이 시간을 지속적으로 업데이트하여 사용자가 시간에 민감한 작업을 수행하는 동안 남은 시간을 명확하게 인지할 수 있도록 돕습니다..
W3C ARIA timer
MDN ARIA timer
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 timer 역할 사용 예시 이 예시는 사용자가 인지해야 하는 남은 시간을 표시하는 기본 timer 역할을 나타냅니다. aria-live=”assertive” 속성을 사용해 보조 기술이 시간을 사용자에게 즉시 알리도록 설정했습니다.
<div role="timer" aria-live="assertive">
Time left: 10 minutes
</div>
동적으로 업데이트되는 타이머 예시 이 예시는 60초 카운트다운 타이머를 구현한 것입니다. 매초 남은 시간이 업데이트되며, 보조 기술이 이 정보를 사용자에게 전달합니다. 시간이 다 되면 “Time’s up!” 메시지가 표시됩니다.
<div role="timer" aria-live="assertive" id="countdownTimer">
Time left: 60 seconds
</div>
<script>
let timeLeft = 60;
const timerElement = document.getElementById('countdownTimer');
const timerInterval = setInterval(() => {
timeLeft--;
timerElement.textContent = `Time left: ${timeLeft} seconds`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
timerElement.textContent = "Time's up!";
}
}, 1000);
</script>
세션 타임아웃 경고 예시 이 예시는 사용자 세션이 만료되기까지 남은 시간을 표시하는 타이머를 구현한 것입니다. 시간이 다가올수록 보조 기술이 이 정보를 실시간으로 사용자에게 전달합니다.
<div role="timer" aria-live="assertive" id="sessionTimer">
Session expires in: 5 minutes
</div>
<script>
let sessionTimeLeft = 300; // 5 minutes in seconds
const sessionTimerElement = document.getElementById('sessionTimer');
const sessionTimerInterval = setInterval(() => {
sessionTimeLeft--;
const minutes = Math.floor(sessionTimeLeft / 60);
const seconds = sessionTimeLeft % 60;
sessionTimerElement.textContent = `Session expires in: ${minutes}:${seconds < 10 ? '0' : ''}${seconds} minutes`;
if (sessionTimeLeft <= 0) {
clearInterval(sessionTimerInterval);
sessionTimerElement.textContent = "Session expired.";
}
}, 1000);
</script>