> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/hanna/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/hanna/web-accessibility/untitled.md).

# WAI-ARIA

WAI-ARIA 재생목록 : <http://bit.ly/wai_aria>

### WAI-ARIA 소개

#### WCAG

* WAI(W3C에서 설립한 기구)에서 권하고 있는 웹접근성 지침
* 시각장애인이나 저시력자, 청각장애인 등 다양한 장애를 가진 사용자들이 보다 접근 가능한 콘텐츠를 제공하는 것을 목표로 두고 있다.

#### 한국형 웹콘텐츠 접근성 지침 (KWCAG)

* "웹콘텐츠 접근성 가이드 라인"의 버전이 업테이트 되면서 웹접근성 보장 수준이 좋아지고 있으나 새롭게 등장하는 신기술들을 지원하기에는 아직도 부족한 부분이 많다.
  * RIA의 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족
  * Ajax를 통한 실시간 변경 콘텐츠를 못 읽을 수 있음
  * 페이지 콘텐츠 중 일부만 변경 시, 동일한 내용을 계속 읽어야 하는 문제 발생
  * 화면 확대 사용자의 경우, 가시 범위 밖의 콘텐츠 변경 내용을 알 수 없음.

#### ARIA의 목적

* WAI-ARIA는 마크업의 역할, 속성, 상태 정보를 추가하여 스크린 리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험을 제공하기 위함이다.
  * 추가된 정보는 웹브라우저에 의해 자동으로 해석되어 각각의 운영체제의 접근성 API로 변환되도록 설계되었다. 이 때 스크린리더 및 보조기기는 운영체제에서 제공하는 접근성 API를 통해 데스크탑 애플리케이션과 동일한 방법으로 Javascript 컨트롤을 인식하고 상호작용을 하게 된다. 이것이 스크린리더 및 보조기기 사용자가 웹 애플이케이션을 사용할 때 데스크탑 애플리케이션의 동작과 유사하게 인식하고 작동하기 때문에 보다 향상된 사용자 경험을 제공하게 된다.

### ARIA의 3가지 기능

#### 역할(Role)

* 특정 요소(Element)에 역할을 정의하는 것
* 역할을 부여하여 사용자에게 정보를 제공
* 부여된 역할은 동적으로 변경할 수 없음
* 메뉴 정의
  * 의미를 가지지 않는 중립적인 요소인 div를 사용할 때 ARIA의 rloe 속성의 값을 menu로 지정하면 해당 콘텐츠가 메뉴 콘텐츠라는 의미를 부여하게 되며 사용자는 해당 요소의 콘텐츠가 메뉴 정보 영역임을 알게 된다.

```markup
<div class="user_menu" role="menu"></div>
```

* 경고 대화상자 정의

```markup
<div class="auth_error" role="alertdialog"></div>
```

* 버튼 정의
  * 버튼 컴포넌트를 제작하기 위해 마우스 사용및 키보드 접근을 위해 `<a>`요소를 사용하는 경우가 있다. 하지만 **a 요소는 스크린 리더 사용자에게 버튼이 아닌 링크로 전달**되어 다른 페이지로 이동할 것이라는 예상을 하게 한다. 이 때 ARIA의 rloe 속성을 추가하면 버튼으로 인식하게 된다.

```markup
<a class="btn_01" role="botton"></a>
```

#### 속성(Properties) & 상태(States)

* 요소가 기본적으로 갖고 있는 특징이나 상황
* 속성과 상태는 "aria-\*" 접두어를 가진다
* 상태는 요소의 상황을 나타내므로 애플리케이션이 실행중에 자주 바뀌는 반면, 속성은 상대적으로 바뀌는 경우가 드물다.

**속성**

* 필수 항목 속성
* 사용자는 해당 입력 서식이 필수 항목임을 전달받게 된다.

```markup
<input type="checkbox" aria-required="true" />
```

* 추가 설명 속성

```markup
<input type="text" aria-describedby="reference" />
```

* 그룹 레이블 명명

```markup
<div role="group" aria-label="레이블"></div>
```

**상태**

* 확장되어 있는 상태의 탭패널

```markup
<div role="tabpanel" aria-expanded="true"></div>
```

* 오류가 발생한 상태의 입력상자

```markup
<input type="text" aria-invalid="true" />
```

* 선택된 상태의 토글버튼

```markup
<button aria-pressed="true"></button>
```

### ARIA 사용 규칙

#### ARIA와 HTML5

* ARIA의 역할(role)과 HTML5 섹션 요소를 중복해서 사용하지 않는다.

```markup
<nav role="navigation"></nav>
```

#### ARIA의 Role과 HTML5 섹션 관련 요소 비교

* `<role="application">`
  * 동일한 역할의 요소 없음. &#x20;

    주로 `<div>`요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
* `<role="banner">`
  * 동일한 역할의 요소 없음. &#x20;

    비슷한 의미로 `<header>`요소를 사용할 수 있으나 `<header role="banner">`로 사용하였다면 한 페이지에게 한 개의 요소만 사용하길 권장한다.
* `<role="navigation">`
  * `<nav>`요소. &#x20;

    다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메뉴 및 서브 메뉴 등에 사용할 수 있다.
* `<role="main">`
  * `<main>`요소. &#x20;

    본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, `<article>`,`<aside>`,`<footer>`요소의 하위 요소로 사용할 수 없다.
* `<role="aside">`
  * `<aside>`요소. &#x20;

    주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현할 수 있다. &#x20;

    `<aside>`영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 할 수 있다.
* `<role="form">`
  * `<form>`요소. &#x20;

    폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 할 수 있다.
* `<role="search">`
  * 동일한 역할의 요소 없음. &#x20;

    검색의 역할을 담당하는 서식 영역임을 의미하며 `<div>`또는 `<form>`요소를 사용하는 것을 권장한다.
* `<role="contentinfo">`
  * 동일한 역할의 요소 없음. &#x20;

    비슷한 의미로 `<footer>`요소를 사용할 수 있으나 `<footer role="contentinfo">`로 사용하였다면 한 페이지에서 한 개의 요소만 사용하길 권장한다.

#### HTML요소의 기능 변경 제한

```markup
<h1 role="button">버튼</h1>
<!-- X -->
<h1><button>버튼</button></h1>
<!-- O -->
<h1><span role="button">버튼</span></h1>
<!-- O -->
```

#### 키보드 사용 보장

```markup
<span role="button">버튼</span>
<!-- X -->
<span role="button" tabindex>버튼</span>
<!-- O -->
```

#### 숨김콘텐츠

```markup
<button aria-hidden="true">버튼</butten>  <!-- X -->
<button role="presentation">버튼</butten> <!-- X -->

button {display: none;}
<button aria-hidden="true">버튼</butten>  <!-- O -->
```

#### 레이블 제공

```markup
<div>
  <div id="user-name">이름</div>
  <input type="text" id="name" aria-labelledby="user-name" />
</div>
```

#### 유효성 검사

<https://validator.w3.org/>