ARIA 소개
Source: Dev.to
WAI-ARIA의 목적은 무엇이며 어떻게 작동하나요?
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)의 목적은 웹 콘텐츠와 복잡한 사용자 인터페이스 구성 요소를 장애가 있는 사람들에게 더 접근 가능하게 만드는 것입니다. 특히 기본 HTML만으로는 보조 기술(예: 스크린 리더)이 동적 콘텐츠나 사용자 정의 위젯을 이해하기에 충분한 의미 정보를 제공하지 못할 때 필요합니다. 개발자는 요소에 역할(role), 상태(state), 속성(property)을 추가함으로써 보조 기술이 해당 요소가 무엇인지(예: 메뉴 또는 버튼)와 현재 어떤 상태인지(예: 확장됨 또는 체크됨)를 파악하도록 도와줍니다. 이를 통해 접근성 도구에 의존하는 사용자의 탐색 및 상호작용이 개선됩니다.
ARIA 역할이란 무엇인가요?
ARIA 역할은 HTML 요소에 추가하는 속성으로, 보조 기술(예: 스크린 리더)에게 해당 요소가 무엇인지 혹은 어떤 기능을 하는지 알려줍니다. 요소에 button, navigation, alert, main 등과 같은 역할을 부여하면, 그 의미가 명확해져 접근성 도구가 올바르게 표시하고 상호작용할 수 있습니다. 이는 기본 의미 요소를 사용하지 않는 사용자 정의 또는 동적 UI 구성 요소에 특히 유용하며, 장애가 있는 사용자가 웹 인터페이스를 보다 신뢰성 있게 이해하고 탐색하도록 돕습니다.
aria-label과 aria-labelledby 속성의 역할은 무엇인가요?
**aria-label**과 aria-labelledby 속성은 요소에 접근 가능한 이름을 제공하여 보조 기술이 그 목적을 사용자에게 전달할 수 있게 합니다.
- **
aria-label**은 요소 내부에 직접 텍스트 라벨을 제공하며, 눈에 보이는 텍스트가 없을 때 유용합니다. - **
aria-labelledby**는 다른 요소의 텍스트를 참조하여 라벨로 사용하므로 기존 콘텐츠를 재사용할 수 있습니다.
두 속성 모두 사용자 정의 또는 비텍스트 요소가 스크린 리더 등 접근성 도구를 사용하는 사용자에게 올바르게 식별되고 이해될 수 있도록 보장합니다.
aria-hidden 속성이란 무엇이며 어떻게 작동하나요?
aria-hidden 속성은 요소가 보조 기술에 노출되어야 하는지를 제어합니다.
aria-hidden="true"는 요소를 스크린 리더에서 숨겨, 장식용이거나 중복된 콘텐츠에 유용합니다.aria-hidden="false"는 요소가 선언적으로 표시되고, 스크린 리더가 읽고 상호작용할 수 있도록 합니다.
요소가 이미 HTML hidden 속성을 가지고 있거나, display: none 또는 visibility: hidden으로 숨겨진 경우에는 접근성 트리에서 자동으로 제외됩니다. 이런 경우 aria-hidden을 추가로 사용할 필요가 없으며, 중복됩니다.
aria-describedby 속성이란 무엇이며 어떻게 작동하나요?
aria-describedby 속성은 요소를 하나 이상의 다른 요소와 연결하여 추가적인 설명 정보를 제공하도록 합니다. 스크린 리더와 같은 보조 기술은 이름이나 라벨 외에 이 설명을 전달하여 사용자가 요소를 더 잘 이해하고 효과적으로 상호작용할 수 있게 합니다. aria-labelledby가 접근 가능한 이름을 제공한다면, aria-describedby는 보다 상세한 설명이나 지침을 제공하는 텍스트를 가리킵니다. 참조된 내용은 화면에 보이지 않아도 설명으로 사용할 수 있습니다.
이러한 내용은 의미 있는 HTML만으로는 충분하지 않을 때 ARIA가 어떻게 접근성을 지원하는지를 보여줍니다. 이를 통해 보다 포괄적인 사용자 정의 인터페이스를 만들 수 있습니다. 다음 워크숍인 Build an Accessible Audio Controller를 진행하면서 더 많은 것을 배울 예정이니, 그때까지 코딩을 즐기세요!