WAI-ARIA 속성을 활용한 자바스크립트 툴팁의 접근성 개선 방법과 함께한 사례 연구

19 Oct 2023

javascript

개요

웹 접근성은 모든 사용자가 인터넷을 자유롭게 이용할 수 있는 환경을 제공하기 위해 중요합니다. 특히 시각적인 정보에 의존하는 사용자들을 위해서는 풍부한 경험을 제공하는 동시에, 접근성도 고려해야 합니다. 이 글에서는 WAI-ARIA(웹 접근성 이니셔티브-Accessible Rich Internet Applications) 속성을 활용하여 자바스크립트 툴팁의 접근성 개선 방법을 소개하고, 실제 사례 연구를 통해 적용해보겠습니다.

WAI-ARIA 속성이란?

WAI-ARIA는 웹 애플리케이션의 상호작용 요소를 부분적으로 또는 완전하게 접근성이 있는 요소로 만들기 위한 일련의 표준화된 속성들입니다. 이러한 속성들은 웹 접근성 가이드 라인에 따라 사용자에게 정보를 전달하고 요소의 기능을 설명하는 역할을 합니다. WAI-ARIA 속성을 활용하여 자바스크립트 툴팁의 접근성을 개선할 수 있습니다.

접근성 개선을 위한 WAI-ARIA 속성 활용 방법

툴팁 요소에 role 속성 추가하기:
```
<div role="tooltip"></div>
```
툴팁 요소에는 role 속성을 추가하여 해당 요소가 툴팁 역할을 한다는 것을 알려줍니다.
툴팁과 연결된 버튼에 aria-describedby 속성 추가하기:
```
<button aria-describedby="tooltip"></button>
```
툴팁과 연결된 버튼에는 aria-describedby 속성을 추가하여 툴팁의 내용을 나타내는 요소의 ID를 지정합니다. 이를 통해 스크린 리더 사용자는 해당 버튼을 선택할 때 툴팁의 내용을 알 수 있습니다.
툴팁 내용을 나타내는 요소에 id 속성 추가하기:
```
<div id="tooltip">툴팁 내용</div>
```
툴팁 내용을 나타내는 요소에는 id 속성을 추가하여 툴팁 내용을 식별할 수 있도록 합니다.

사례 연구: 자바스크립트 툴팁에 WAI-ARIA 속성 적용하기

아래는 자바스크립트를 사용하여 구현한 간단한 툴팁 예제입니다. 이 예제에서는 WAI-ARIA 속성을 활용하여 접근성을 개선합니다.

<button aria-describedby="tooltip">Hover me</button>
<div id="tooltip" role="tooltip">This is a tooltip</div>

<script>
  const button = document.querySelector("button");
  const tooltip = document.querySelector("#tooltip");

  button.addEventListener("mouseover", () => {
    tooltip.style.display = "block";
  });

  button.addEventListener("mouseout", () => {
    tooltip.style.display = "none";
  });
</script>

위의 예제에서는 툴팁과 연결된 버튼에 aria-describedby 속성을 추가하고, 툴팁 요소에는 role 속성을 추가하여 접근성을 개선합니다. 이를 통해 스크린 리더를 사용하는 사용자도 툴팁의 내용을 제공받을 수 있습니다.

결론

WAI-ARIA 속성은 자바스크립트 툴팁처럼 상호작용 요소를 개선할 때 접근성을 고려하는 데 도움이 됩니다. 해당 속성을 활용하여 웹 애플리케이션의 접근성을 향상시키고, 모든 사용자가 동등하게 웹 상의 정보를 이용할 수 있도록 노력해야 합니다.

참고 자료

W3C: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14
MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA