[💻 코드스테이츠 FE 44기] 웹 접근성 2 - WAI-ARIA

✔️ 시작

WAI-ARIA 무엇인지 어느 상황 일 때 사용해야 하는지 학습했다.

---

📍 알게된 부분

✔️ WAI-ARIA

• WAI-ARIA는 WAI와 ARIA를 합친 단어
• WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
• HTML 요소에 추가적으로 의미를 부여

WAI (Web Accessibility Initiative)

웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA (Accessible Rich Internet Applications)

장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

RIA (Rich Internet Applications)

따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

✔️ WAI-ARIA의 필요성

• 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용
  HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와준다.

❗️ ‘시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이란

시멘틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미
WAI-ARIA는 보조적인 역할로만 사용해야 한다.
WAI-ARIA를 남용해선 안 되며, 시멘틱한 HTML을 작성하는 것이 최우선이다.

• SPA처럼 AJAX를 사용하는 상황, 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.

✔️ WAI-ARIA 사용법

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

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

1.역할(role)

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

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

잘못된 예시

• HTML 요소로 충분히 파악할 수 있는 내용을 또 설명해 줄 필요는 없다.

<!--button 태그를 지정했으나 role속성을 이용해 한 번 더 지정해 주었다.-->
<button role="button">button인 요소</button>

• 시멘틱 요소 본연의 의미를 임의로 바꾸지 말아야 한다.

<!--h1 태그는 제목이나 role속성으로 button으로 설명해 주고 있다.-->
<h1 role="button">h1인 요소</h1>

2.상태(State)

여러 개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시할 수 있는 aria-selected 속성

<!--탭 메뉴가 있을 때 메뉴 클릭 여부 표시-->
<ul 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>
</ul>

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

aria-expanded
아코디언 UI가 펼쳐진 상태인지 표시
aria-hidden
요소가 숨김 상태인지를 표시

이외 다양한 속성이 있다.

3.속성(Property)

1.aria-label

요소에 라벨을 붙여주는 기능

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

2.aria-live

해당 요소가 실시간으로 내용을 변경하는 영역인지 표시
- 브라우징 도중에 내용을 띄우는 alert, modal, dialog와 같은 역할을 하는 요소
- AJAX 기술을 사용하여 실시간으로 내용을 변경하는 영역에 사용

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

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

더 많지만 role, aria-label 정도만 사용해도 HTML에 추가적인 의미를 부여할 수 있고 웹 접근성을 어느 정도 향상 시킬 수 있다.

웹 접근성을 확보할 때 가장 중요한 것은 시멘틱한 HTML을 작성하는 것이다.
WAI-ARIA는 보조적인 역할로만 사용해야 하며, 남용해서는 안 된다.

---

✏️ 마치며

WAI-ARIA라는 용어을 이번 학습에서 처음 접하게 되었다.
간혹 홈페이지 검색 할 때 보이는 role이 뭐지? 했었는데 이번에 그 의문이 풀린 거 같다.

웹 접근성을 확보할 땐 WAI-ARIA가 아닌 시멘틱한 HTML을 작성해야 하며(header, footer, nav, section 등)
WAI-ARIA는 부가적 설명이 필요할 때 사용해야 한다.