웹 접근성은 모든 사용자가 웹 사이트나 애플리케이션에 동등하게 접근할 수 있는 환경을 제공하는 것을 의미합니다. 이는 장애를 가진 사용자뿐만 아니라 모든 사용자를 포용하는 것을 목표로 합니다.

대화식 UI는 사용자와 상호작용하는 웹 요소를 가리킵니다. 예를 들어, 모달 다이얼로그, 드롭다운 메뉴, 탭 등이 있습니다. 이러한 대화식 UI를 접근성을 고려하여 개발하기 위해서는 WAI-ARIA 속성을 활용할 수 있습니다.

WAI-ARIA란 “웹 접근성을 강화하기 위한 웹 콘텐츠 접근성 지침”을 의미하는 W3C의 표준입니다. 이는 개발자가 접근성을 지원하지 않는 요소에 접근성 정보를 제공할 수 있도록 돕는 역할을 합니다.

아래의 예시 코드에서는 자바스크립트 기반의 대화식 UI를 만들기 위해 WAI-ARIA 속성을 활용하는 방법을 보여줍니다.

// HTML 코드
<button id="dropdownButton" aria-haspopup="true" aria-expanded="false">드롭다운 메뉴</button>
<ul id="dropdownMenu" role="menu" aria-labelledby="dropdownButton" aria-hidden="true">
  <li><a href="#" role="menuitem">항목 1</a></li>
  <li><a href="#" role="menuitem">항목 2</a></li>
  <li><a href="#" role="menuitem">항목 3</a></li>
</ul>

// JavaScript 코드
const dropdownButton = document.getElementById("dropdownButton");
const dropdownMenu = document.getElementById("dropdownMenu");

dropdownButton.addEventListener("click", () => {
  const expanded = dropdownButton.getAttribute("aria-expanded") === "true";
  dropdownButton.setAttribute("aria-expanded", !expanded);
  dropdownMenu.setAttribute("aria-hidden", expanded);
});

위 코드에서는 드롭다운 메뉴를 생성하고, 클릭 이벤트를 추가하여 메뉴가 펼쳐지거나 접힐 때 WAI-ARIA 속성을 변경합니다. aria-haspopup 속성은 해당 요소가 하위 메뉴를 가지고 있는지 나타내며, aria-expanded 속성은 메뉴가 펼쳐졌는지 여부를 나타냅니다. 또한, role 속성은 해당 요소의 역할을 명시적으로 지정합니다.

이렇게 WAI-ARIA 속성을 활용하여 접근 가능한 대화식 UI를 구현하면 스크린 리더 사용자와 키보드 사용자 등 여러 사용자들이 동등하게 사용할 수 있습니다.

더 많은 WAI-ARIA 속성과 사용 방법을 자세히 알고 싶은 경우, WAI-ARIA 사양 문서를 참고하시기 바랍니다.

#웹접근성 #WAI-ARIA