웹 접근성은 모든 사용자가 웹 사이트나 앱에 접근하고 사용할 수 있는 능력을 의미합니다. 장애인이나 접근성 요구사항을 가진 사용자를 포함하여 모든 사용자가 웹을 쉽게 이용할 수 있도록 하는 것이 목표입니다. WAI-ARIA(Accessible Rich Internet Applications)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 개선하기 위한 표준입니다.
WAI-ARIA 속성을 사용하여 웹 페이지에 수많은 접근성 기능을 추가할 수 있습니다. 자바스크립트를 활용하여 동적으로 페이지 요소를 조작하고 상태 변경을 알리는 데에 WAI-ARIA 속성을 함께 사용할 수 있습니다. 이를 통해 서로 다른 디바이스와 플랫폼에서 일관된 웹 접근성을 제공할 수 있습니다.
아래는 자바스크립트 테크닉을 사용하여 WAI-ARIA 속성을 활용하는 예시입니다.
// 예시 1 - 토글 스위치
const toggleSwitch = document.querySelector('#toggleSwitch');
const content = document.querySelector('#content');
toggleSwitch.addEventListener('click', () => {
if (toggleSwitch.getAttribute('aria-checked') === 'true') {
toggleSwitch.setAttribute('aria-checked', 'false');
content.style.display = 'none';
} else {
toggleSwitch.setAttribute('aria-checked', 'true');
content.style.display = 'block';
}
});
// 예시 2 - 알림 메시지
const alertButton = document.querySelector('#alertButton');
const alertMessage = document.querySelector('#alertMessage');
alertButton.addEventListener('click', () => {
alertMessage.style.display = 'block';
alertMessage.setAttribute('role', 'alert');
alertMessage.setAttribute('aria-live', 'assertive');
alertMessage.setAttribute('aria-atomic', 'true');
setTimeout(() => {
alertMessage.style.display = 'none';
}, 5000);
});
위의 예시 1은 토글 스위치를 통해 내용을 숨기거나 보이게 하는 기능을 구현한 것입니다. aria-checked 속성을 사용하여 토글 상태를 나타내고, 내용 요소의 display 속성을 조작하여 숨기거나 보여지도록 설정합니다.
예시 2는 알림 메시지를 표시하는 기능을 구현한 것입니다. 클릭 이벤트가 발생하면 알림 메시지가 화면에 표시되고, role, aria-live, aria-atomic 속성을 추가하여 접근성을 개선합니다. 일정 시간이 지나면 알림 메시지가 자동으로 사라지도록 설정합니다.
WAI-ARIA 속성을 활용하여 웹 접근성을 높이는 자바스크립트 테크닉은 다양한 상황에 적용할 수 있습니다. 웹 개발자들은 이러한 테크닉을 익혀 웹 사이트나 웹 애플리케이션을 더욱 접근성이 뛰어난 환경으로 만들 수 있습니다.
더 자세한 내용은 WAI-ARIA 표준 문서와 웹 접근성 가이드를 참조하시기 바랍니다.
#웹접근성 #WAI-ARIA