Day 10) ARIA란

🎄  A11y Advent Calendar (번역) 10일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

ARIA(Accessible Rich Internet Applications)는 HTML의 semantic을 향상시켜 스크린 리더와 같은 보조 기술에 더 많은 의미를 전달하기 위한 표준입니다. 하지만 ARIA를 사용할 때는 신중해야 하며, 기본적으로는 ARIA를 사용하지 않는 것이 가장 좋은 접근법이라는 점을 기억해야 합니다.

 

ARIA 사용의 기본 원칙

1. 가능하면 native HTML을 사용하세요. HTML 요소들은 이미 접근성을 고려하여 설계되었습니다. 예를 들어, <button>, <a>, <form>과 같은 기본 요소들은 보조 기술과 자연스럽게 호환됩니다.
2. ARIA는 보완 수단으로 사용하세요. HTML만으로는 충분하지 않은 경우(예: Tab, Carousel 등) 필요한 부분에만 ARIA를 적용합니다.

 

ARIA를 활용하여 접근성 높은 위젯을 만드는 방법에 대해 배우고 싶다면 Heydon Pickering의 ARIA-Inclusive Component를 추천합니다. 이 가이드는 실용적인 예제와 함께 ARIA를 올바르게 사용하는 방법을 잘 설명하고 있습니다.

 

ARIA의 활용 사례: Live 영역

 

live 영역은 동적으로 업데이트되는 콘텐츠를 화면 리더에게 알리는 역할을 합니다. 이는 알림, 채팅 피드, 동적 메시지와 같은 요소에 유용합니다.

<div role="log" aria-live="polite">
  <!-- Chat messages being inserted as they are sent -->
</div>

<div role="alert" aria-live="assertive">
  <!-- Important notifications being inserted as they happen -->
</div>

 

live 영역의 중요한 사항

1. 페이지 로드 시 컨테이너가 존재해야 합니다.

aria-live 속성은 문서가 로드된 후 동적으로 추가할 수 없습니다. 페이지 초기화 시 컨테이너를 미리 만들어야 합니다.

 

2. role 속성이 권장됩니다.

role="log", role="alert", role="status" 등 적절한 역할을 부여하세요. 일부 역할은 기본적으로 암시적인 aria-live 값을 가지지만, 호환성을 극대화하기 위해 명시적으로 설정하는 것이 좋습니다.

 

3. polite와 assertive의 사용을 구분하세요.

polite: 새로운 내용을 부드럽게 알리고, 사용자 작업을 방해하지 않음

assertive: 중요한 알림에 사용하며 즉시 사용자에게 전달됨. 하지만 너무 자주 사용하면 오히려 방해가 될 수 있으므로 신중하게 사용하세요.

 

4. 업데이트가 종료되면 aria-live="off"로 설정하세요.

더 이상 영역이 업데이트되지 않을 경우 보조 기술이 변경 사항을 추적하지 않도록 aria-live="off"를 설정하는 것이 좋습니다.

 

ARIA는 접근성을 개선하는 강력한 도구이지만, 잘못 사용하면 오히려 혼란을 초래할 수 있습니다. 따라서 기본 HTML 요소를 우선적으로 사용하고, ARIA는 꼭 필요한 경우에만 신중히 적용하세요. 특히 live 영역과 같은 동적 콘텐츠를 다룰 때는 속성과 역할을 명확히 지정하여 사용자 경험을 최적화하는 것이 중요합니다.

 

 

출처 Day 10) ARIA