접근성을 위한 ARIA 속성 사용
페이지 정보
작성자
DocsArchives
작성일
2025.09.07 20:08
본문
모두에게 친절한 웹
웹 접근성은 시각, 청각 등 다양한 사용자에게 웹을 제공하는 기술입니다. HTML5만으로는 한계가 있어 ARIA(Accessible Rich Internet Applications) 속성을 활용하면 보조 기술과의 호환성을 높일 수 있습니다.
ARIA 속성 예시
<button aria-label="검색">????</button>
<nav aria-label="주요 메뉴"> <ul> <li><a href="/">홈</a></li> <li><a href="/about">소개</a></li> </ul></nav>
<div role="alert"> 오류가 발생했습니다!</div>aria-label: 요소에 대한 설명 제공-
role: 요소의 역할 정의 (alert,navigation,button)
실무 활용 사례
-
스크린리더 친화적인 메뉴 제작
-
동적 콘텐츠 변경 알림
-
웹 애플리케이션 버튼과 모달 대체
ARIA 속성을 적절히 사용하면 모든 사용자에게 친절한 웹사이트를 만들 수 있습니다. 단순히 보이는 것뿐 아니라 접근성과 UX를 고려한 설계가 필수입니다.
댓글 0