웹 접근성을 위한 ARIA

 

안녕하세요 찐망고 입니다.

 

ARIA(Accessible Rich Internet Applications)는 웹 접근성을 개선하기 위해 만들어진 표준입니다.

주로 스크린 리더나 기타 보조 기술을 사용하는 사용자들이 웹 콘텐츠를 더 쉽게 이해하고 사용할 수 있도록 도와줍니다.

 

왜 ARIA가 필요한가?

일반적인 HTML 요소는 이미 접근성을 어느 정도 지원합니다. 예를 들어:

• <button>은 기본적으로 클릭 가능하다는 정보를 보조 기술에 전달합니다.
• <img>는 alt 속성을 통해 이미지를 설명합니다.

하지만, 동적 콘텐츠나 맞춤형 UI 컴포넌트(예: 탭, 드롭다운, 모달 창) 같은 복잡한 요소는 기본 HTML만으로는

충분한 접근성을 제공하지 못합니다. 이럴 때 ARIA를 사용하여 접근성을 강화할 수 있습니다.

 

ARIA의 주요 개념

ARIA는 **속성(Attribute)**을 추가하여 콘텐츠를 더 잘 설명합니다. 주요 개념은 다음과 같습니다:

1. ARIA 역할 (Roles)

• 요소가 어떤 역할을 하는지 정의합니다.
• 보조 기술에게 이 요소가 버튼, 메뉴, 슬라이더 등임을 알려줍니다.

role="button"	이 요소가 버튼임을 명시	<div role="button">Click Me</div>
role="dialog"	모달 대화 상자를 나타냄	<div role="dialog">...</div>
role="tablist"	탭 컨테이너를 나타냄	<div role="tablist">...</div>

 

 

2. 상태 및 속성 (States and Properties)

• 요소의 현재 상태나 추가 정보를 제공합니다.

aria-disabled	요소가 비활성화 상태임을 나타냄	<button aria-disabled="true">...</button>
aria-expanded	요소가 확장되었는지 여부를 나타냄	<button aria-expanded="true">...</button>
aria-hidden	요소가 스크린 리더에서 숨겨져 있는지 여부	<div aria-hidden="true">...</div>

 

3. ARIA 레이블 (Labels)

사용자에게 더 명확한 정보를 전달하기 위해 텍스트 레이블을 제공합니다.

aria-label	스크린 리더가 읽을 레이블 제공	<button aria-label="Search">...</button>
aria-labelledby	다른 요소의 텍스트를 레이블로 연결	<div aria-labelledby="label">...</div>
aria-describedby	요소를 추가로 설명하는 텍스트와 연결	<div aria-describedby="description">...</div>

 

 

ARIA의 장단점

장점:

1. 접근성 향상: 맞춤형 컴포넌트에서도 스크린 리더를 통해 정보를 전달할 수 있음.
2. 유연성: 기존 HTML 구조를 변경하지 않고도 접근성을 강화할 수 있음.

단점:

1. 올바른 사용이 중요: 잘못 사용하면 오히려 접근성을 떨어뜨릴 수 있음.
2. 학습 필요: 다양한 속성과 역할을 이해하고 상황에 맞게 사용해야 함.

 

ARIA 사용 사례

1. 사용자 지정 버튼:

<div role="button" tabindex="0" aria-label="Add to Cart">
  <i class="icon-cart"></i>
</div>

 

• 스크린 리더는 "Add to Cart"를 읽습니다.
• role="button"과 tabindex="0"으로 키보드 포커스도 지원됩니다.

2. 숨겨진 요소:

<div aria-hidden="true">
  <i class="icon-decorative"></i>
</div>

• 스크린 리더는 이 아이콘을 무시합니다.

3. 모달 창:

<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">
  <h2 id="dialog-title">Modal Title</h2>
  <p id="dialog-description">This is the modal content.</p>
</div>

• 보조 기술은 이 대화 상자가 모달 창임을 인식하고 제목과 설명을 읽습니다.

 

결론

ARIA는 복잡한 웹 애플리케이션에서도 접근성을 확보하기 위한 강력한 도구입니다.

올바르게 사용하면 모든 사용자, 특히 장애가 있는 사용자들이 웹 콘텐츠를 더 쉽게 사용할 수 있습니다.

하지만, 기본 HTML로 해결 가능한 경우라면 ARIA를 과도하게 사용하지 않는 것이 더 좋습니다.