WAI-ARIA 속성을 이용한 자바스크립트 툴팁의 접근성 개선 방법
목차
툴팁의 중요성
툴팁은 웹 애플리케이션에서 매우 유용한 기능입니다. 사용자에게 정보를 제공하고, 어떤 요소의 역할을 명확히 설명하며, 추가적인 안내 또는 도움말을 제공하는 역할을 합니다. 그러나, 시각적으로 표시되는 툴팁만으로는 시각 장애인 및 저시력자와 같은 사용자들에게 정보를 전달하기 어렵습니다. 이러한 문제를 해결하기 위해 WAI-ARIA(Accessible Rich Internet Applications) 속성을 사용하여 툴팁의 접근성을 개선할 수 있습니다.
기본 자바스크립트 툴팁 구현
먼저, 기본적인 자바스크립트 툴팁을 구현해 보겠습니다. 예를 들어, 마우스를 요소 위에 위치시키면 툴팁이 나타나고, 마우스를 떼면 툴팁이 사라지는 기능을 가진 툴팁을 만들어 보겠습니다.
HTML:
<div class="tooltip-container">
<button id="tooltip-trigger">Hover me</button>
<div class="tooltip">This is a tooltip</div>
</div>
CSS:
.tooltip-container {
position: relative;
}
.tooltip {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 4px;
background-color: #333;
color: #fff;
}
JavaScript:
const trigger = document.getElementById('tooltip-trigger');
const tooltip = document.querySelector('.tooltip');
trigger.addEventListener('mouseenter', () => {
tooltip.style.display = 'block';
});
trigger.addEventListener('mouseleave', () => {
tooltip.style.display = 'none';
});
위 코드는 간단한 툴팁을 구현한 예시입니다. 그러나, 이 툴팁은 시각적으로만 정보가 전달되기 때문에 접근성에는 문제가 있습니다. 툴팁을 스크린리더로 읽어 주지 않고, 키보드 사용자가 접근해도 툴팁을 확인할 수 없습니다.
WAI-ARIA 속성을 이용한 접근성 개선
WAI-ARIA 속성을 사용하여 툴팁의 접근성을 개선할 수 있습니다. WAI-ARIA는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 기술로, 장애인이 웹 콘텐츠에 더 쉽게 접근할 수 있도록 도와줍니다.
aria-describedby속성을 사용하여 툴팁을 설명하는 역할을 하는 요소의id값을 지정합니다.
HTML:
<div class="tooltip-container">
<button id="tooltip-trigger" aria-describedby="tooltip">Hover me</button>
<div id="tooltip" class="tooltip">This is a tooltip</div>
</div>
- 툴팁이 나타나거나 사라질 때,
aria-hidden속성을 사용하여 해당 요소의 접근성 상태를 변경합니다.
JavaScript:
const trigger = document.getElementById('tooltip-trigger');
const tooltip = document.getElementById('tooltip');
trigger.addEventListener('mouseenter', () => {
tooltip.style.display = 'block';
tooltip.setAttribute('aria-hidden', 'false');
});
trigger.addEventListener('mouseleave', () => {
tooltip.style.display = 'none';
tooltip.setAttribute('aria-hidden', 'true');
});
위와 같이 WAI-ARIA 속성을 사용하면 툴팁이 스크린리더에게 읽혀지고, 키보드 사용자들도 툴팁의 내용을 확인할 수 있습니다. 이렇게 구현된 툴팁은 더 좋은 접근성을 제공하게 됩니다.