이번 포스팅에서는 웹 접근성의 기본 중 하나인 WAI-ARIA에 대해 알아보겠습니다. 이론부터 실습까지, 모든 사용자가 웹 페이지를 이용할 수 있도록 만드는 방법을 자세히 학습해 봅시다.
자동목차
이론: WAI-ARIA란?
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 접근성을 향상시키기 위한 기술입니다. 이를 통해 시각적으로 볼 수 없거나 키보드만을 이용하는 등 특정한 방식으로 웹 페이지를 이용하는 사용자도 웹 페이지의 기능을 완전히 이용할 수 있게 됩니다.
실습: WAI-ARIA 사용하기
아래의 코드는 WAI-ARIA를 이용하여 스크린 리더기가 이해할 수 있는 툴팁을 만드는 예시입니다.
<!DOCTYPE html>
<html>
<body>
<button aria-describedby="tip">Hover over me</button>
<span id="tip" role="tooltip" hidden>Tooltip text</span>
<script>
var button = document.querySelector('button');
var tooltip = document.querySelector('#tip');
button.addEventListener('mouseover', function() {
tooltip.hidden = false;
});
button.addEventListener('mouseout', function() {
tooltip.hidden = true;
});
</script>
</body>
</html>
코드 설명
aria-describedby: 이 속성은 HTML 요소가 다른 요소에 의해 설명되는 것을 나타냅니다. 이 예시에서는 버튼이 'tip'이라는 id를 가진 요소에 의해 설명됩니다.
role="tooltip": 이 속성은 HTML 요소의 역할을 나타냅니다. 이 예시에서는 'tip'이라는 id를 가진 요소의 역할이 툴팁임을 나타냅니다.
hidden: 이 속성은 HTML 요소를 숨기는 데 사용됩니다. 이 예시에서는 툴팁이 기본적으로 숨겨져 있고, 버튼에 마우스를 올리면 나타나게 됩니다.
마무리
WAI-ARIA는 웹 접근성을 향상시키는 데 매우 중요한 기술입니다. 이번 포스팅을 통해 WAI-ARIA의 기본적인 사용 방법을 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다. 이것으로 html 기초 강좌를 마칩니다. 다음 강좌도 기대해 주세요.