웹 접근성 기초 (Web Accessibility / ARIA)
비장애인은 햄버거 아이콘(줄 3개)을 보면 "아, 저걸 누르면 메뉴가 열리겠구나" 하고 직관적으로 압니다. 하지만 눈이 보이지 않아 화면 낭독기(스크린 리더)를 사용하는 시각 장애인은 어떨까요? 컴퓨터는 햄버거 아이콘을 보고 "메뉴"라고 말해주지 못합니다.
🦮 스크린 리더와 맹인 안내견 (ARIA)
☰
ARIA 적용 전 (위험)
낭독기: "버튼입니다." (무슨 버튼인지 모름)
➡️
🦮
☰
ARIA 적용 후 (안전)
aria-label="메뉴 열기"
안내견(낭독기): "메뉴 열기 버튼입니다!"
이럴 때 장님 안내견처럼 시각장애인에게 정확한 길과 정보를 알려주는 것이 바로 ARIA(Accessible Rich Internet Applications) 속성들입니다. 단순히 예쁜 웹사이트를 넘어, 모든 사람이 차별 없이 사용할 수 있는 따뜻한 웹을 만드는 선진국형 개발자의 필수 소양입니다!
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
aria-label | - | 눈에 보이는 텍스트가 없는 아이콘 버튼 등에 "이 버튼은 무슨 용도입니다" 라고 귀뜸해주는 대체 텍스트입니다. |
aria-hidden | true/false | 예쁘게 꾸미려고 넣은 장식용 아이콘을 낭독기가 "이상한 기호"라며 읽지 않도록 쉿! 하고 무시하게 만듭니다. |
role | button, tab 등 | 어쩔 수 없이 div나 span으로 버튼을 만들었을 때, "내 본질은 사실 버튼이야!" 라고 명시적으로 선언합니다. |
aria-expanded | true/false | 아코디언 메뉴나 드롭다운이 현재 펄쳐져 있는지 닫혀 있는지를 보조 기기에 지속적으로 알려줍니다. |
<!-- 1. 버튼에 시각장애인용 대체 텍스트 제공 -->
<button aria-label="메뉴 열기">
<i class="icon-hamburger"></i> <!-- 화면엔 줄 3개 아이콘만 보임 -->
</button>
<!-- 2. 스크린 리더가 읽지 못하게 숨김 -->
<span aria-hidden="true">🔒</span>
<p>보안이 강화되었습니다.</p> <!-- 자물쇠 아이콘은 장식이므로 텍스트만 읽게 함 -->
<!-- 3. 태그의 의미(Role)를 명확히 부여 -->
<div role="button" tabindex="0">
div(박스)로 만들었지만 난 클릭되는 버튼이야!
</div>
<!-- 4. 현재 상태 알려주기 -->
<div aria-expanded="false">
드롭다운 메뉴 닫혀있음
</div>