aria-hidden 속성: 웹 접근성을 위한 필수 속성
aria-hidden 속성은 화면 낭독기(screen reader)와 같은 보조 기술에서 특정 요소를 숨길 때 사용됩니다. 이 속성을 활용하면 웹 접근성을 개선할 수 있으며, 불필요한 요소를 사용자 경험에서 제외할 수 있습니다.
1. aria-hidden의 기본 문법
<element aria-hidden="true">이 요소는 스크린 리더에서 무시됩니다.</element>
2. aria-hidden 값과 동작
| 값 |
설명 |
true |
해당 요소를 스크린 리더에서 무시 (보이지 않도록 설정) |
false |
스크린 리더가 해당 요소를 읽을 수 있도록 설정 |
3. aria-hidden 사용 예제
✅ (1) 아이콘을 스크린 리더에서 숨기기
장식용 아이콘은 의미 없는 정보이므로, aria-hidden="true"로 설정하면 보조기기가 이를 무시합니다.
<span class="icon" aria-hidden="true">🎵</span>
✅ (2) 모달(팝업)에서 백그라운드 콘텐츠 숨기기
모달이 열려 있을 때 배경의 콘텐츠를 스크린 리더에서 숨길 수 있습니다.
<div class="modal-overlay" aria-hidden="true">
<p>이 영역은 모달이 열리면 스크린 리더에서 읽히지 않습니다.</p>
</div>
✅ (3) 화면에는 보이지만 스크린 리더에서만 숨기기
예를 들어, 특정 요소를 시각적으로는 유지하면서도 보조기기에서 읽지 않게 할 수 있습니다.
<p aria-hidden="true">이 문장은 시각적으로 보이지만, 스크린 리더에서는 무시됩니다.</p>
4. aria-hidden을 사용할 때 주의할 점
- form 요소에는 사용하지 말 것 - 입력 필드가 숨겨지면 사용자가 접근할 수 없음.
- 중요한 콘텐츠를 숨기지 않기 - 화면에서는 보이지만 스크린 리더에서 접근해야 하는 경우
aria-hidden을 사용하지 말 것.
- 의도적으로 설정할 것 -
display: none; 또는 visibility: hidden; 과 함께 사용하면 예상치 못한 결과가 나올 수 있음.
