ARIA 속성에 대하여 - 웹 접근성

aria thumbnail

ARIA

ARIA(Accesible Rich Internet Application) 속성은 웹 어플리케이션에서 접근성을 개선하기 위한 HTML 속성이다. WAI-ARIA라고도 불리며, 웹 페이지가 시멘틱 마크업만으로 충분하지 않은 경우에 사용되며, 보조기술이 페이지 요소를 올바르게 해석하고 상호작용할 수 있게 한다.

주요 목표로는

• 동적 컨텐츠와 인터렉티브 요소를 보조 기술에서도 잘 인식할 수 있게 하는 것.
• javaScript로 동적으로 생성되는 컨텐츠, 버튼, 모달 등의 웹 어플리케이션이 올바르게 접근할 수 있도록 만든다.

ARIA 속성의 분류

1. ARIA 역할(Role) 
2. <div role="button" tabindex="0">확인</div>
3. 각 HTML의 요소의 목적과 동작 방식을 정의.
4. ARIA 상태 및 속성

   <input type="checkbox" aria-checked="true"> 수락 // 요소가 체크 되었는지 확인
   
   <button aria-expanded="false">메뉴 보기</button> // 요소가 펼쳐져 있는지 확인
   
   <button aria-disabled="true">사용 불가</button> // 상호 작용한 상태인지 확인
   
   <div aria-hidden="true">이 콘텐츠는 스크린 리더에서 숨겨집니다.</div> // 화면에는 보이지만 스크린리더기에는 숨겨져 있는지 확인
   

5. 특정 요소의 상태나 속성을 나타내기 위해 사용
6. ARIA 라이브 리전aria-live 속성은 동적인 컨텐츠 영역에서 업데이트가 발생할 때, 스크린 리더가 사용자에게 변화를 알릴 수 있도록 도와준다.
7. <div aria-live="polite">새로운 메시지가 도착했습니다.</div> // polite는 업데이트를 즉시 읽어주지 않고 사용자 인터렉션이 끝난 후 알림을 제공한다는 의미. off / polite / assertive
8. 동적으로 업데이트되는 컨텐츠를 보조기술이 자동으로 읽어주도록 설정
9. ARIA 레이블

   <button aria-label="닫기">X</button> // 시각적으로는 x로 보이지만, 스크린리더기에는 닫기로 읽힘
   
   <label id="username-label">사용자 이름:</label>
   <input type="text" aria-labelledby="username-label"> // aria-labelledy는 해당 id의 내용을 불러와 읽음
   

10. aria-label은 요소의 레이블을 스크린 리더에서 설명할 수 있도록 추가하는 속성으로, 특히 시각적으로 레이블이 보이지 않지만, 보조 기술에서 설명이 필요한 경우 유용
11. ARIA 소유 관계

    <div id="menu" aria-owns="menu-item1 menu-item2">
        <div id="menu-item1">메뉴 항목 1</div>
        <div id="menu-item2">메뉴 항목 2</div>
    </div>
    

12. aria-owns는 DOM 구조상 떨어져 있지만, 논리적으로 연결된 요소간의 관계를 설정하는 속성이다.

주의사항

• ARIA는 보조기술이지 대체 기술이 아니다. HTML5의 시멘틱 태그를 먼저 사용하고, 시멘틱 태그로 해결할 수 없는 경우에만 ARIA 태그를 사용.
• 과도한 ARIA 기술은 오히려 혼란을 야기한다. 기본 시멘틱 마크업이 접근성을 제공하는 경우 ARIA 속성을 추가할 필요 없다.
• 브라우저 호환성 확인이 필요하다.

장점

• 웹 접근성 강화
• 사용자 경험 향상
• 유용한 사용

ARIA는 복잡한 웹 애플리케이션에서 접근성을 보완하고 향상시키는 도구이다. 시맨틱 HTML이 기본적으로 웹 접근성을 보장해주지만, 동적 콘텐츠나 비표준 요소와 같은 복잡한 상황에서는 ARIA 속성이 필수적이다.