aria-disabled 속성은 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 명세에서 제공하는 속성 중 하나로, 사용자 인터페이스 요소가 현재 비활성화되었음을 나타냅니다. 이는 주로 HTML 요소가 현재 사용 불가능한 상태일 때 시각적 효과뿐만 아니라 스크린 리더를 통해서도 이를 사용자에게 전달하기 위해 사용됩니다.
aria-disabled 속성의 사용
aria-disabled 속성은 true 또는 false 값을 가질 수 있습니다.
- aria-disabled="true": 요소가 비활성화되어 있고, 상호작용이 불가능함을 나타냅니다.
- aria-disabled="false": 요소가 활성화되어 있고, 상호작용이 가능함을 나타냅니다.
사용 예시
버튼 비활성화 예시
HTML의 disabled 속성은 특정 요소에 제한적으로만 사용할 수 있습니다. 예를 들어, <button>, <input>, <select>, <textarea> 요소에만 사용할 수 있습니다. 하지만 aria-disabled 속성은 거의 모든 요소에 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARIA Disabled Example</title>
<style>
.disabled-button {
background-color: grey;
color: white;
cursor: not-allowed;
}
</style>
</head>
<body>
<button id="myButton" aria-disabled="true" class="disabled-button">클릭할 수 없음</button>
<script>
document.getElementById('myButton').addEventListener('click', function(event) {
if (this.getAttribute('aria-disabled') === 'true') {
event.preventDefault();
alert('이 버튼은 현재 비활성화 상태입니다.');
}
});
</script>
</body>
</html>
주요 사항
- 시각적 피드백: aria-disabled 속성만으로는 시각적 스타일이 변경되지 않으므로, 비활성화된 상태를 명확히 하기 위해 CSS로 시각적 피드백을 추가하는 것이 중요합니다.
- 스크린 리더 지원: aria-disabled 속성은 스크린 리더가 요소의 비활성화 상태를 인식하고 사용자에게 알리도록 합니다.
- 상호작용 방지: aria-disabled 속성은 요소의 본래 동작을 막지 않으므로, 자바스크립트를 사용하여 클릭 이벤트를 막는 등의 추가 처리가 필요할 수 있습니다.
비교: aria-disabled vs. disabled
- disabled 속성:
- HTML 폼 요소(<button>, <input>, <select>, <textarea>)에서만 사용할 수 있습니다.
- 요소를 완전히 비활성화하고 상호작용을 막습니다.
- CSS 및 스크린 리더에서 기본적으로 비활성화된 스타일을 제공합니다.
- aria-disabled 속성:
- 모든 HTML 요소에서 사용할 수 있습니다.
- 시각적 스타일을 변경하지 않으므로 CSS로 시각적 피드백을 추가해야 합니다.
- 자바스크립트를 사용하여 상호작용을 막는 추가 처리가 필요합니다.
- 스크린 리더는 aria-disabled 속성을 인식하여 비활성화된 상태를 사용자에게 알립니다.
결론
aria-disabled 속성은 웹 접근성을 높이는 데 매우 유용한 도구입니다. 이는 모든 HTML 요소에 적용할 수 있으며, 스크린 리더가 요소의 비활성화 상태를 인식할 수 있도록 돕습니다. 그러나 시각적 스타일링과 상호작용 방지를 위해 추가적인 CSS 및 자바스크립트 처리가 필요합니다. disabled 속성과 비교해 더 유연하게 사용할 수 있지만, 각 속성의 특성과 용도를 이해하고 적절하게 사용하는 것이 중요합니다.
728x90
