WAI-ARIA

leekoby·2023년 3월 7일

web

WEB

목록 보기

5/7

🔧변경내용🔨

제목 날짜 내용
발행일 23.03.07

제목	날짜	내용
발행일	23.03.07

📌들어가기에 앞서

해당 포스터는 웹접근성 학습 내용 중 WAI-ARIA에 대한 내용을 정리한 것입니다.

📖 WAI-ARIA 란?

WAI-ARIA는 WAI와 ARIA를 합친 단어

WAI (Web Accessibility Initiative) :
- 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications) :
- 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
- RIA (Rich Internet Applications) :
  - 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

정리하자면, WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격

📖 WAI-ARIA의 필요성

시맨틱 HTML을 학습하면서, HTML 요소에 의미를 부여한 시맨틱 요소를 사용하는 것만으로도 웹 접근성을 향상시킬 수 있다고 했다. WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다. 정리하자면, 다음과 같은 상황에서 WAI-ARIA를 사용하면 웹 접근성을 효과적으로 향상시킬 수 있을 것이다.

시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.
- ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미
- WAI-ARIA는 보조적인 역할로만 사용
- WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선입니다.
SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.

📖 WAI-ARIA 사용법

WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.

WAI-ARIA의 속성에는 크게 세 가지 분류가 있다.

역할(role) : HTML 요소의 역할을 정의하는 속성
상태(state) : 요소의 현재 상태를 나타내는 속성
속성(property) : 요소의 특징을 정의하는 속성(attribute)

각 분류마다 어떤 속성이 있는지, 대표적인 예시와 사용법을 간단히 살펴보자.

1. 역할(Role)

HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)이다.

예를 들어, 버튼으로 사용되는 요소를 만들었는데 <div> 요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄 수 있다.

<div role="button">div이지만 button으로 사용되는 요소</div>

주의할 점은, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해줄 필요는 없습니다.

// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>

또한, 시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 합니다.

// WAI-ARIA의 잘못된 사용 예시
<h1 role="button">h1인 요소</h1>

이전에 구현해본 Tab 컴포넌트를 예로 들어보면

화면을 보기만 해도 각 탭을 누르면 화면이 바뀌는 탭 컴포넌트라는 것을 알 수 있지만, HTML 요소의 구조만으로 화면을 파악할 수 있는 사용자는 어떨까? 아래의 HTML 코드만 보고서 이 요소들이 어떤 기능을 하는지 파악할 수 있을까? 아마 불가능할 것이다.

// 컴포넌트 구조를 간소화한 모습입니다.
<div>
 <li>Tab1</li>
 <li>Tab2</li>
 <li>Tab3</li>
</div>

<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>

이럴 때, WAI-ARIA를 사용해서 이 구조가 탭의 역할을 하고 있음을 다음과 같이 표시해줄 수 있다.

<div role="tabList">
 <li role="tab">Tab1</li>
 <li role="tab">Tab2</li>
 <li role="tab">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

2. 상태(State)

- aria-selected

Tab 컴포넌트 예시에서, role 속성을 추가하여 해당 요소의 역할을 명시해보았다. 하지만 Tab 컴포넌트에서 필요한 정보는 이것 뿐일까? 아니다. 현재 어떤 탭이 선택되어 있는지도 알 수 있어야 한다. 이럴 때 사용하는 속성이 바로 여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있는 aria-selected 라는 속성이다. 해당 속성을 적용하면 다음과 같다.

<div role="tabList">
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

이제 3개의 탭 중에서 첫 번째 탭이 선택된 상태임을 알 수 있게 되었다.

이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded, 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성이 있다.

3. 속성(Property)

- aria-label

요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생하기도 한다. 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼이 대표적인 예시다.

위 이미지는 MDN의 검색 기능 컴포넌트다. 돋보기 모양의 검색 버튼, X자 모양의 닫기 버튼이 보인다. 이렇게 이미지만 들어있는 버튼의 경우 HTML 요소의 구조만으로 어떤 역할을 하는 버튼인지 파악할 수 있을까? 아마 힘들 것이다.

<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>

물론 버튼 요소에 숨겨진 자식 요소를 추가해서 어떤 역할을 하는지 설명하는 내용을 추가해줄 수 도 있지만, 이럴 때 사용할 수 있는 WAI-ARIA 속성도 있다. 바로 aria-label 입니다.

aria-label 은 말 그대로 요소에 라벨을 붙여주는 기능을 합니다. 해당 요소를 사용하면 다음과 같이 의미를 부여해줄 수 있습니다.

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

aria-live 속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다. 즉, 브라우징 도중에 내용을 띄우는 alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성이다. 시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려주면 큰 도움이 된다고 한다.

속성 값으로는 polite, assertive, off(default)가 있다.

polite :
- 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달
assertive :
- 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달

이 외에도 다양한 WAI-ARIA 속성들이 존재한다. 모든 속성들을 제대로 알고 쓰기 위해서는 상당한 시간을 투자하여 공부할 필요가 있다. 당장은 role, aria-label 정도만 사용해도 HTML에 추가적인 의미를 부여할 수 있기 때문에 웹 접근성을 어느정도 향상시킬 수 있다. 하지만 웹 접근성을 확보할 때 가장 중요한 것은 시맨틱한 HTML을 작성하는 것임을 항상 기억하자. 앞서 말했듯, WAI-ARIA는 보조적인 역할로만 사용해야 합니다.