# WAI-ARIA
- WAI와 ARIA를 합친 단어이다.
- WAI에서 발표한 RIA환경에서의 웹접근성 기술 규격이다.
- 간단히 생각하면 !!! 웹 접근성을 향상시킬수 있는 방법 중의 하나이다!
- WAI(web accessibility initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA(accessible rich internet applications): 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
-RIA(rich internet applications): 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할수 있는 편리성+프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.
# WAI-ARIA의 필요성
- HTML요소에 추가적으로 의미를 부여할수 있게 해준다. 따라서 보조적으로 사용하면 웹 접근성을 향상시킬수있다.
-다음과 같은 상황에서 WAI-ARIA를 사용하면 웹 접근성을 효과적으로 향상시킬수있다.
- 시맨틱 요소만으로 의미를 충분히 부여할수 없는 상황에 WAI-ARIA를 사용하면 HTML요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할수 있게 도와준다.
('시맨틱 요소만으로 의미를 충분히 부여할수 없는 상황'이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미이다. WAI-ARIA는 보조적인 역할로만 사용해야한다. WAI-ARIA를 남용해선 안되고, 시맨틱한 HTML을 작성하는 것이 최우선이다.) - SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬수 있다.
# WAI-ARIA 사용법
- HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄수 있다.
- WAI-ARIA의 속성에는 크게 세가지 분류가 있다.
-역할(role): HTML요소의 역할을 정의하는 속성
-상태(state): 요소의 현재 상태를 나타내는 속성
-속성(property): 요소의 특징을 정의하는 속성
1. 역할(role)
- HTML의 요소 종류와 역할이 서로 맞지 않을때, 어떤 역할을 하는 요소인지 명시해줄때 사용할수 있는 속성(attribute)이다.
- HTML요소로 충분히 파악할수 있는 내용을 WAI-ARIA로 또 설명해줄 필요는 없다.
- 시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.
- ex) 버튼으로 사용되는 요소를 만들었는데 <div>요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄수있다.
<div role="button">div이지만 button으로 사용되는 요소</div>
//WAI-ARIA의 잘못된 사용예시
<button role="button">button인 요소</button>
//WAI-ARIA의 잘못된 사용예시
<h1 role="button">h1인 요소</h1>- ex) 탭 컴포넌트의 경우
// 컴포넌트 구조를 간소화한 모습입니다.
<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 : 현재 어떤 탭이 선택되어 있는지도 알수 있게한다. 여러개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할수있는 속성이다.
- aria-expanded: 아코디언 UI가 펼쳐진 상태인지 표시해준다.
- aria-hidden: 요소가 숨김상태인지를 표시해준다.
// 3개의 탭 중에서 첫번째 탭이 선택된 상태임을 알수있다.
<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. 속성(property)
- aria-label
-요소에 라벨을붙여주는 기능.
-텍스트 콘텐츠 없이 이미지로만 만들어진 버튼의 경우 HTML요소의 구조만으로 어떤 역할을 하는 버튼인지 파악하기 힘들다.
<button> <img src="X.png" /> <button>
<button> <img src="돋보기.png" /> <button>
//WAI-ARIA속성 추가하면
<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: 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을바로 사용자에게 전달한다.
★웹 접근성을 확보할때 가장 중요한것은 시맨틱한 HTML을 작성하는 것이다. WAI-ARIA은 보조적인 역할로만 사용해야한다★
더 많은 정보가 궁금하면 mdn 찾아보셈.........
