WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 콘텐츠와 애플리케이션에 접근성을 추가하기 위한 표준입니다. 이 표준을 활용하여 자바스크립트로 만들어진 토글 버튼의 접근성을 개선할 수 있습니다.

접근성 개선을 위한 WAI-ARIA 속성

WAI-ARIA는 다양한 역할(role), 속성(property) 및 상태(state)를 제공하여 웹 요소의 의미와 상호작용을 설명할 수 있습니다. 토글 버튼의 경우에는 아래와 같은 WAI-ARIA 속성을 활용할 수 있습니다:

1. role="button": 토글 버튼에 버튼 역할을 할당하여 스크린 리더 사용자가 버튼이라는 것을 인식할 수 있도록 합니다.
2. aria-pressed: 토글 버튼의 상태를 나타내는 속성으로, true/false 값을 가집니다. 이를 통해 스크린 리더 사용자에게 현재 버튼의 상태를 알려줄 수 있습니다.

예제 코드

아래는 WAI-ARIA 속성을 활용하여 접근성을 개선한 자바스크립트 토글 버튼의 예제 코드입니다.

<button role="button" aria-pressed="false" onclick="toggleButton()">토글 버튼</button>

<script>
function toggleButton() {
  var button = document.querySelector('button');
  var pressed = button.getAttribute('aria-pressed') === 'true';

  if (pressed) {
    button.setAttribute('aria-pressed', 'false');
    // 버튼이 해제된 상태일 때 수행할 로직 작성
  } else {
    button.setAttribute('aria-pressed', 'true');
    // 버튼이 눌린 상태일 때 수행할 로직 작성
  }
}
</script>

위의 코드에서는 button 요소에 role="button"과 aria-pressed 속성을 추가하였습니다. 이 속성을 활용하여 버튼의 상태를 관리하고, 버튼이 클릭되면 toggleButton 함수가 호출되어 상태를 변경하고 해당하는 로직을 수행합니다.

참고 자료

• WAI-ARIA 소개
• WAI-ARIA 사례 연구

#접근성 #WAIARIA