WAI-ARIA와 웹 접근성

728x90

여태까지 웹을 개발하면서 접근성에 대한 고려는 크게 하지 않았는데요.

웹 강의를 듣다가 여태껏 웹 접근성에 대해 너무 무지했던 것 같아 반성 및 정리할 겸 기록해봅니다.

MDN web docs에서 접근성>ARIA 항목을 참고하여 작성했습니다. 그럼 출발~

WAI-ARIA란?

WAI-ARIA는 Web Accessibility Initiative - Accessible Rich Internet Applications의 약자로, 웹 콘텐츠와 웹 애플리케이션이 접근성(Accessibility)을 지원하도록 설계된 기술 표준입니다. 장애를 가진 사용자가 스크린 리더(Screen Reader)나 보조 기술을 통해 웹을 이용할 때, 더 명확하고 쉽게 상호작용할 수 있도록 도와주는 기술이라고 생각하시면 편할 것 같은데요.

WAI-ARIA는 마크업에 역할, 속성, 상태 정보를 추가해서 스크린 리더 및 보조 기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험을 제공하는데요. 하나씩 살펴보시쥬

WAI-ARIA의 주요 개념 1 - 역할

역할은 HTML 요소의 용도를 명확히 정의하는데 사용됩니다. 예를 들어, <div>나 <span> 같은 요소는 본래 의미가 없는 태그이지만, WAI-ARIA role을 추가하면 의미를 부여할 수 있습니다.

<div role="button" tabindex="0">Click Me</div>

요런 식으로 role 속성을 button으로 부여하면, 이 요소는 버튼으로 동작하며 클릭 가능하다는 정보를 스크린 리더에 전달할 수 있게 됩니다.

WAI-ARIA의 주요 개념 2 - 속성

속성은 요소의 구조적 정보를 보조 기술에 전달하는 데 사용됩니다. 속성은 변하지 않는 경우가 대부분이며, 접두사로 aria를 씁니다.

예시 1. aria-label : 요소에 보이지 않는 텍스트 레이블을 제공하기

<button aria-label="Search">🔍</button>

이렇게 작성해주게 되면, 스크린 리더에는 Search가 출력되게 됩니다.

예시 2 . aria-controls: 버튼이 제어하는 콘텐츠 영역을 지정하

<button aria-controls="menu">Open Menu</button>
<div id="menu">
  <p>Menu content here</p>
</div>

이렇게 하게 되면 스크린 리더는 버튼이 id="menu"인 요소를 제어하고 있음을 알게 됩니다.

WAI-ARIA의 주요 개념 3 - 상태

상태는 요소의 동적 속성을 나타내며, 값이 변경될 수 있습니다. 상태도 속성처럼 aria 접두사로 시작합니다.

예시 1. aria-expanded : 요소가 확장되었는지 여부를 알려주기

<button aria-expanded="false" aria-controls="menu">Toggle Menu</button>
<div id="menu" hidden>
  <p>Menu content here</p>
</div>

이렇게 작성해주게 되면, 스크린 리더는 메뉴가 닫혀 있음을 인식합니다.

<button aria-expanded="true" aria-controls="menu">Toggle Menu</button>
<div id="menu">
  <p>Menu content here</p>
</div>

이렇게 작성해주면 메뉴가 열렸음을 인식해주겠죠?

예시 2. aria-checked : 체크박스나 토글의 선택 상태를 나타내주기

<div role="checkbox" aria-checked="false" tabindex="0">Subscribe to newsletter</div>

이렇게 작성해주면 체크박스가 체크 안된 것을,

<div role="checkbox" aria-checked="true" tabindex="0">Subscribe to newsletter</div>

이건 체크박스가 체크되었음을 전달해줄 수 있습니다.

예시 3. aria-hidden : 요소를 보조 기술에서 숨김.

<div aria-hidden="true">This text is hidden from assistive technologies.</div>

이렇게 작성하면 스크린 리더는 이 텍스트를 읽지 않게 됩니다.

WAI-ARIA의 주요 속성 예시

자주 쓰는 WAI-ARIA 속성을 표로 정리해봤습니다.

속성	설명	예시
role	요소의 역할을 정의합니다.	role="alert": 경고 메시지를 나타냄.
aria-label	요소에 대해 화면에 보이지 않는 레이블을 제공합니다.	<button aria-label="Search">검색</button>
aria-labelledby	다른 요소에 있는 텍스트를 레이블로 사용합니다.	<div id="title">Menu</div><button aria-labelledby="title">Click</button>
aria-expanded	요소가 확장되었는지 여부를 나타냅니다.	aria-expanded="true": 드롭다운 메뉴가 열려 있음.
aria-hidden	요소가 보조 기술에서 숨겨져야 하는지를 나타냅니다.	aria-hidden="true": 스크린 리더가 이 요소를 무시함.
aria-live	실시간으로 변경되는 콘텐츠가 있음을 나타냅니다.	aria-live="polite": 업데이트된 콘텐츠를 스크린 리더로 읽음.
aria-controls	특정 ID의 요소를 제어하고 있음을 나타냅니다.	<button aria-controls="menu">Open Menu</button>

WAI-ARIA 사용 시 주의사항

1. HTML5 기본 태그 우선 사용

WAI-ARIA는 HTML5 기본 태그로 제공되지 않는 접근성을 보완하기 위한 것입니다. 가능한 경우 HTML5 요소(예: <button>, <nav>, <header>)를 사용하는 것이 더 효율적입니다.

<!-- WAI-ARIA가 불필요한 예 -->
<div role="button" tabindex="0">Click Me</div>

<!-- HTML5 기본 요소 사용 -->
<button>Click Me</button>

2. 과도한 사용 금지 및 스크린 리더 테스트하기

모든 요소에 WAI-ARIA 속성을 추가하면 오히려 접근성을 저하시킬 수 있습니다.

또한, 스크린 리더를 비롯한 보조 기술에서 WAI-ARIA가 설계한 대로 작동하는지 확인하시는 걸 추천드립니다!

WAI-ARIA 사용하면 좋은 이유

사실 비장애인 입장에선 너무나 당연하게 누리고 있는 웹을 모두가 평등하게 누리게 하기 위해서는 WAI-ARIA를 쓰는게 좋겠죠.

웹을 만들때는 귀찮을 수 있지만, 근데 이렇게 접근성을 높이면 더 많은 사용자층이 유입되고 검색 엔진에서도 더 잘 분석되고 SEO에도 좋겠죠?

저부터 웹 접근성을 고려해 웹을 만들어야겠습니다...

이상입니다.

감사합니다.