웹접근성(WAI-ARIA) 완벽 가이드: 의미와 활용법
기술정보 25.08.29 조회 15웹접근성(WAI-ARIA) 완벽 가이드: 의미와 활용법
웹접근성 향상을 위한 WAI-ARIA 가이드를 소개합니다.
WAI-ARIA 속성의 의미와 활용법, 실무 적용 사례까지 정리하여 누구나 이해할 수 있도록 안내합니다.
특히 관공서, 공공기관, 협회 등 법적 웹접근성 준수가 필수인 사이트에서 WAI-ARIA 적용은 선택이 아닌 필수이며,
실제 템플릿 제작과 운영 과정에서도 적극적으로 활용되고 있습니다.
➰➰➰
✅ WAI-ARIA란 무엇인가?
WAI-ARIA란, 정의: Accessibility Initiative – Accessible Rich Internet Applications의 약자로,
시각장애인, 청각장애인 등 다양한 사용자가 웹 애플리케이션과 콘텐츠를 원활히 이용하도록 돕는 웹 접근성 기술 중 하나입니다.
✅ 왜 WAI-ARIA가 필요한가?
✔ HTML 기본 태그만으로 의미 전달이 부족한 경우 보완
✔ 스크린 리더 사용자에게 명확한 정보 전달
✔ 반응형 웹, SPA 환경에서 접근성을 유지하는 핵심 역할
특히 관공서, 공공기관, 협회 홈페이지 등은 법적 웹접근성 준수가 필수이므로, WAI-ARIA 적용이 매우 중요합니다.
✅ 주요 WAI-ARIA 속성
aria-hidden
✔ 브라우저에는 보이지만, 스크린 리더 등 보조기술에는 숨김 처리됩니다.
✔ true / false 값으로 지정합니다.
1 2 | <span aria-hidden="true">★</span> | cs |
aria-label
✔ 요소의 대체 텍스트를 제공합니다. (이미지의 alt 속성과 비슷)
✔ 비시각적 요소에도 텍스트 설명을 부여할 때 주로 사용됩니다.
role
✔ 요소의 역할(Role)을 명시적으로 지정합니다.
✔ button, dialog, navigation, banner, tab 등 다양한 역할을 정의할 수 있습니다.
1 2 | <a href=”” role=”button” aria-label="콘텐츠 열기">자세히 보기</button> | cs |
aria-expanded
✔ : 확장 가능한 요소(예: 아코디언, 드롭다운)의 열림/닫힘 상태를 알려줍니다.
✔ true(열림) / false(닫힘) 값으로 지정합니다.
aria-controls
✔ 주로 aria-expanded 와 함께 사용되어, 버튼이 어떤 영역을 열고 닫는지를 보조기술 사용자에게 알려줍니다.
✔ 값은 제어할 대상 요소의 id 값을 적어야 합니다.
1 2 | <button aria-expanded="false" aria-controls="faq01">FAQ 열기<button> <div id="faq01" hidden>자주 묻는 질문의 답변입니다.<div> | cs |
✅ ARIA 속성값 제어 방법 (스크립트 활용)
대표적으로 버튼 클릭 시, aria-expanded 값을 바꾸면 스크린리더 사용자도 현재 상태를 정확히 알 수 있습니다.
✔ 속성 제어 방법
- setAttribute → 속성 추가 또는 값 변경
- removeAttribute → 속성 제거
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <button aria-expanded="false" aria-controls="mainMenu"> 메뉴 열기</button> <nav id="mainMenu" hidden> <ul> <li><a href="#">홈</a></li> <li><a href="#">서비스</a></li> <li><a href="#">문의</a></li> </ul> </nav> <script> const btn = document.getElementById("btn"); btn.addEventListener("click", () => { if (btn.getAttribute("aria-expanded") === "true") { btn.setAttribute("aria-expanded", "false"); } else { btn.setAttribute("aria-expanded", "true"); } }); </script> | cs |
✅ 실무에서의 활용 사례
✔ 네비게이션 메뉴 접근성 개선 (관공서 홈페이지에서 메뉴 접근성을 확보할 때 필수)
✔ 모달 창 열림/닫힘 처리
✔ 탭 UI, 아코디언 UI 접근성 확보
✔ 폼 요소 설명 보완
✅ 웹접근성 준수와 SEO 효과
✔ 접근성이 높은 사이트일수록 검색엔진 크롤러가 구조를 명확히 이해
✔ 시맨틱 마크업 + WAI-ARIA는 SEO 최적화에 직접적인 도움
➰➰➰
✨ KEY POINT!! ✨
✔ 불필요한 aria 남용은 피하기
✔ HTML 시맨틱 태그 우선 작성 → 부족한 경우 aria 속성으로 보완
✔ 접근성 검증 도구(axe, Lighthouse 등) 활용하여 점검
✨ 관련 링크 ✨
