웹 접근성은 많은 사용자들에게 웹 사이트나 애플리케이션에 쉽게 접근하고 사용할 수 있는 기능을 제공하는 것입니다. WAI-ARIA(W3C Accessible Rich Internet Applications)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 개선하기 위한 기술 규격입니다. 특히 자바스크립트로 동적으로 생성되는 콘텐츠에 대한 접근성을 제공하기 위해 WAI-ARIA 속성을 활용할 수 있습니다.

WAI-ARIA란?

WAI-ARIA는 HTML과 CSS만으로는 제공하기 어려운 동적이거나 상호작용하는 콘텐츠에 접근성을 제공하기 위한 역할과 상태, 속성 등을 추가할 수 있는 속성들의 집합입니다. WAI-ARIA를 사용하면 스크린 리더 사용자에게 적절한 정보를 제공하고, 키보드나 마우스를 사용하지 못하는 사용자들에게도 애플리케이션을 사용할 수 있는 기능을 제공할 수 있습니다.

WAI-ARIA 속성

WAI-ARIA는 다양한 속성들을 제공합니다. 여기에서는 자바스크립트로 동적으로 생성되는 콘텐츠에 대한 접근성을 제공하기 위해 주로 사용되는 몇 가지 속성을 살펴보겠습니다.

role 속성

role 속성은 엘리먼트의 역할을 정의하는 속성입니다. 예를 들어, 동적으로 생성되는 리스트에서 각 아이템에 role=”listitem” 속성을 추가하면, 스크린 리더 사용자는 각 아이템이 리스트의 아이템임을 인식할 수 있습니다.

const listItem = document.createElement('li');
listItem.setAttribute('role', 'listitem');

aria-labelledby 속성

aria-labelledby 속성은 다른 엘리먼트의 id를 참조하여 해당 엘리먼트의 라벨을 지정하는 속성입니다. 이 속성을 사용하면 스크린 리더 사용자가 해당 콘텐츠의 정확한 의미를 이해할 수 있습니다.

const heading = document.createElement('h1');
heading.textContent = '동적 콘텐츠';
const contentDiv = document.createElement('div');
contentDiv.setAttribute('aria-labelledby', heading.id);

aria-live 속성

aria-live 속성은 동적으로 변경되는 콘텐츠의 업데이트를 실시간으로 스크린 리더에게 알려주는 속성입니다. 예를 들어, 채팅 메시지가 동적으로 추가되는 경우, 해당 메시지를 추가하는 엘리먼트에 aria-live=”polite” 속성을 추가하여 스크린 리더 사용자가 메시지를 바로 확인할 수 있도록 할 수 있습니다.

const chatMessages = document.getElementById('chat-messages');
const newMessage = document.createElement('div');
newMessage.textContent = '새로운 메시지가 도착했습니다.';
newMessage.setAttribute('aria-live', 'polite');
chatMessages.appendChild(newMessage);

결론

WAI-ARIA 속성을 사용하여 자바스크립트로 동적으로 생성되는 콘텐츠에 접근성을 제공할 수 있습니다. role, aria-labelledby, aria-live 등의 속성을 적절히 활용하여 스크린 리더 사용자와 키보드 사용자 등 다양한 사용자들에게 웹 애플리케이션을 더욱 접근 가능하게 만들 수 있습니다.

참고자료: WAI-ARIA 1.1 명세

#접근성 #웹개발