# 웹 콘텐츠 접근성 가이드라인

## WCAG란?

W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 **웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의**하여 **장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침**으로, 웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야 할 요구사항입니다. 접근성은 시각, 청각, 지체, 음성, 인지, 언어, 학습 및 신경 장애를 포함한 광범위한 장애를 포함합니다. ([장애 유형](http://www.bokjibank.or.kr/SW_bbs/notice/view.php?zipEncode=90wDU9vEU9wBLjxzJzspLrxydrMCH9MyMCvrjzvpLbxEun2ybrMCH9MyMmtpTvNBFDxzPzNj9qgBLLMz5v2AM0tzTfMB5v2AMKMAR9MyFD1u9qusKjxyVjMj9u3zM0tzNfgC39MBMahAW5cDZLgBVu2yPr3BU9YCIj2xxn1l9WMC19fDZLgB) 참고)

* 시각 (Visual)
* 청각 (Auditory)
* 지체 (Physical)
* 음성 (Speech)
* 인지 (Cognitive)
* 언어 (Language)
* 학습 (Learning)
* 신경 (Neurological)

{% hint style="info" %}
이 가이드 라인은 광범위한 문제를 다루고 있지만 모든 장애 유형 또는 장애 조합을 가진 사람들의 불편을 완전하게 해결할 수는 없습니다. 노화로 인해 능력이 감소된 노인의 접근성을 향상하고, 일반 사용자의 사용성을 향상 시키는 역할을 합니다.
{% endhint %}

WCAG는 각 지침을 4가지 원칙의 범주로 분류하여 제공합니다.

> **인식** 가능하고, \
> **조작** 가능하며, \
> **이해** 할 수 있고, \
> **견고** 해야 합니다.

| **원칙**                                                                   | **설명**                                         |
| ------------------------------------------------------------------------ | ---------------------------------------------- |
| [**인식**](https://a11y.gitbook.io/wcag/1-perceivable) `Perceivable`       | 모든 사용자는 서비스 콘텐츠를 인식할 수 있어야 합니다.                |
|                                                                          | **Q:** 시/청각 장애를 가진 사용자가 서비스를 인식하는데 문제가 없습니까?   |
| [**운용**](https://a11y.gitbook.io/wcag/2-operable) `Operable`             | 모든 사용자는 서비스의 기능을 운용할 수 있어야 합니다.                |
|                                                                          | **Q:** 마우스 없이 서비스를 이용할 수 있고, 성공적으로 수행할 수 있습니까? |
| [**이해**](https://a11y.gitbook.io/wcag/3-understandable) `Understandable` | 모든 사용자가 서비스의 콘텐츠, 기능 사용법 등을 이해하기 쉬워야 합니다.      |
|                                                                          | **Q:** 명확하고 이해하기 쉬운 콘텐츠를 제공하고 있습니까?            |
| [**견고**](https://a11y.gitbook.io/wcag/4-robust) `Robust`                 | 사용자가 이용하는 모든 기기 및 브라우저에서 접근, 사용 가능해야 합니다.      |
|                                                                          | **Q:** 특정 운영체제 또는 브라우저에서만 서비스를 이용할 수 있지 않나요?   |

표준 권고안은 W3C 회원, 소프트웨어 개발자 및 다른 W3C 그룹과 이해 관계자가 검토 했으며 W3C 권장사항으로 이사의 승인을 받았습니다. 즉, 안정적인 문서로 참조 자료로 사용 되거나 다른 문서에서 인용 될 수 있습니다. 권고안을 만드는 데 \
있어 W3C의 역할은 사양에 주의를 집중하고 널리 배포 되도록 하는 것입니다. 다시 말해 웹의 기능과 상호 운용성을 향상 시키는 것을 목적으로 합니다.

![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSxxcRrhq2nSTfUSv3R%2F-LSxy-L2d8WBe0sOdr6c%2Fimage.png?alt=media\&token=73c986af-a37c-4a24-b0b2-a584491de5c6)

## 버전 <a href="#versions" id="versions"></a>

### WCAG 1.0 (1999)

**1999년**에 **출간** 되었고 **14개의 가이드라인을 우선 순위에 따라 1\~3점으로 구분하여 평가**하였습니다. 이것은 **접근성 가이드라인이 생겼다는 점에서는 큰 의미**가 있지만, 웹 페이지가 제작되는 방식이나 보조기술 등이 급격히 발전 함에 따라 **가이드라인이 해당 기술을 따라가지 못했다는 면에서 한계를 들어내기도** 했습니다.

{% embed url="<https://www.w3.org/TR/WCAG10/>" %}

### WCAG 2.0 (2008)

**2008년**에 **발표** 되었고 **가이드라인 1.0의 준수사항을 모두 통합**하면서, **콘텐츠**를 **인지 가능**하고 **조작 가능**하며 **이해**할 수 있고 **견고**해야 한다는 **4가지 원칙으로 구조가 개편**되었습니다. 구분된 원칙에 따라 장애가 있는 사용자가 웹 콘텐츠를 보다 쉽게 접근할 수 있도록 하기 위한 기본 목표를 제시하는 **12개 가이드라인을 제시**했습니다.&#x20;

{% embed url="<https://www.w3.org/TR/WCAG20/>" %}

![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSvrn_1m9Eje-HFU8AH%2Fimage.png?alt=media\&token=3242e1fa-c369-46cc-a578-76435d938682)

### WCAG 2.1 (2018)

**WCAG 2.0을 확장한 버전**으로 **2018년 6월에 최종 권고안이 발표** 되었습니다. 2.1 가이드라인은 2.0 가이드라인 자체를 대체하는 것이 아니라, 장애가 있는 사람들의 **모바일 장치** 사용, **저시력**, **인지** 또는 **학습 장애**를 가진 사람들이 웹 콘텐츠에 보다 쉽게 접근할 수 있도록 만드는 요구 사항 중 일부를 개선 하였고, **17개의 새로운 가이드라인(성공기준)을 제공**합니다.

2.1은 2.0이 출시 되었던 당시(2008) 보다 모바일 장치 사용률이 높아졌고 기존 환경보다 조작 자체가 복잡해진 점 등을 고려하여 이전 버전의 WCAG를 개선하기 위해 지속적으로 연구된 개발 성과물입니다. 즉, **WCAG 2.0과 호환 되므로 웹 사이트가 2.1에 부합하면 2.0에도 부합하는 것**입니다. WCAG 2.1의 새로운 요구 사항은 2.0과 마찬가지로 특정 장치, 운영 체제, 브라우저 또는 기타 기술 사용에 의존하지 않습니다.

{% embed url="<https://www.w3.org/TR/WCAG21/>" %}

![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSvsMxH8yGkH_p63Pra%2Fimage.png?alt=media\&token=8c1e61be-d88f-4354-8bf9-2e8eb4d5e8bf)
