Internet Web Contents Accessibility Guideline

접근성 있는 웹 콘텐츠 설계

웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.

항목 2.1 (이미지 맵 기법 사용 제한) 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하며 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.

용어 정리

이미지 맵(image map)이란 이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로 이동하도록 만드는 프로그램 기법이다.
서버측 이미지 맵(server-side image map)이란 이미지 맵을 구현하는 프로그램이 서버측에 존재하여 사용자의 웹 브라우저가 이미지 맵 상의 어떤 그림 위에 마우스를 위치시키고 클릭하면 클라이언트가 마우스의 위치정보를 서버로 제공하고, 서버는 전달되어온 마우스의 위치에 해당하는 이미지 맵의 영역이 지시하는 링크로 이동한 결과를 클라이언트에 표시하는 방식의 프로그램 기법이다.
클라이언트측 이미지 맵(client-side image map)이란 HTML 태그를 이용하여 사용자의 브라우저에서 이미지 맵의 영역을 식별하여 직접 해당 영역이 지시하는 링크로 이동하도록 하는 프로그램 기법이다.

요구 조건

구성하려는 이미지 맵의 형태를 클라이언트측에서 기하학적으로 표현하기 어려운 경우가 아니면 서버측 이미지 맵을 사용하지 않는다.
서버측 이미지 맵 기법을 사용할 경우에는 이미지 맵의 영역에 대응하는 텍스트 링크를 별도로 제공해야 한다(항목 1.1 참조).
클라이언트측 이미지 맵을 사용할 경우에는 이미지 맵의 영역에 대한 충분한 대체 텍스트를 제공하여야 한다(항목 1.1 참조).

적용시 장점

서버측 이미지 맵 방식에서 서버는 해당 영역에 대한 대체 텍스트를 사용자에게 제공하지 못하며,단지 컴퓨터 화면상에 표시할 뿐이다.따라서 이 항목을 적용하면 대체 텍스트 링크가 없는 서버측 이미지 맵의 사용을 제한하므로 시각장애인의 접근성을 높일 수 있게 된다.
클라이언트측 이미지 맵을 사용하는 경우에도 영역을 표시하는 부분에 대체 텍스트를 함께 표시한다면 이미지 맵의 영역을 읽어주므로 시각장애인들이 이미지 맵의 어느 영역을 가리키고 있는지를 확인할 수 있다(항목 1.1 참조).

적용 예

클라이언트측 이미지맵 : 대체 텍스트 지원 <AREA> 태그를 사용하여 클라이언트측 이미지 맵을 작성할 경우 대체 텍스트를 해당 영역에서 제공하여야 한다.
<a href="server-image-map.php"> <img src="http://pcsi.go.kr//img/main_2005_07/quick_banner.gif" ismap="ismap" alt= "Quick Menu" /> </a>
서버측 이미지맵 : 링크목록 제공 서버측 이미지 맵을 사용할 경우에는 대체 텍스트로 구성된 링크목록을 같은 페이지에 제공하면 시각장애인들이 텍스트 링크를 사용하여 필요한 작업을 할 수 있다(항목 1.1 참조).

항목 2.2 (프레임의 사용 제한) 콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.

용어 정리

없음

요구 조건

웹 콘텐츠에는 가급적 프레임을 사용하지 않아야 한다. 만일 프레임을 사용하는 경우에도 사용하는 프레임의 수를 최소한으로 줄여야 한다.
프레임을 사용할 경우에는 프레임 별로 서로 독특한(중복되지 않는) 제목을 부여하여 프레임을 식별할 수 있어야 한다.

적용시 장점

화면을 볼 수 있는 사용자는 한 페이지를 여러 개의 영역으로 구분한 프레임을 볼 수 있다. 그러나 화면을 볼 수 없는 시각장애인에게 여러 개의 프레임으로 구성된 페이지는 모든 프레임의 내용을 인지하기 어렵다. 따라서 여러 개의 프레임으로 구성된 웹 페이지에서 각각의 프레임에 제목을 부여하면 활성화된 프레임의 제목을 읽어주기 때문에 프레임간의 이동이 매우 편리하다.

적용 예

프레임 : 프레임별 제목 부여 여러 개의 프레임으로 구성된 웹 콘텐츠에서 각각의 프레임에 제목을 부여할 수 있다. 예를 들어, 두개의 프레임으로 구성된 웹 페이지의 경우에 각각의 프레임 제목을 “순이”와 “철수”라고 명명한다면 현재 활성화된 프레임의 이름을 읽어 볼 수 있으므로 엉뚱한 프레임에서 작업하는 잘못을 방지할 수 있다.

항목 2.3 (깜박거리는 객체 사용 제한) 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

용어 정리

스크립트(script)란 컴퓨터에 자동으로 처리를 실행하기 위한 명령을 나열한 파일로 일반적으로 텍스트 파일 형식으로 제공되는 것이다.

요구 조건

웹 콘텐츠에는 애니메이션 등과 같이 깜빡거리는 주파수의 범위가 3 Hz에서 49Hz 사이인 콘텐츠 요소들을 포함하지 않아야 한다.
만일 위의 (1)에서 명시한 요구조건을 만족할 수 없는 웹 콘텐츠는 깜빡거림이 있는 웹 페이지로 이동하기 전에 이 페이지에 깜빡거림이 있음을 사전에 사용자에게 경고해주어야 한다. 또한, 스크린의 깜빡거림이 배제된 대체 페이지를 별도로 제공하여야 한다(항목 1.1 참조).

적용시 장점

광과민성 발작 증세를 지닌 사람들은 빛이 깜빡거리는 것에 반응하여 발작을 일으킨다. 특히 3Hz에서 49 Hz의 사이의 깜빡거림은 발작을 일으키는 원인이 되며, 20Hz 부근이 발작을 가장 잘 일으키는 주파수이다. 따라서 요구조건 (1)을 만족하는 콘텐츠의 경우에는 광과민성 발작중세가 있는 사용자도 접근이 가능하다.
정신이 산만한 사람의 경우에는 계속적인 깜빡거림이 있는 콘텐츠를 집중하여 응시할 수 없으므로 이 요구조건을 만족하는 콘텐츠는 정신이 산만한 사람도 접근이 가능하다.

적용 예

첫 페이지 구성 : 깜박거리는 개체 배제 웹사이트에 처음 접속했을 때에 스크린에 나타나는 첫 페이지에는 최소한 깜빡거림이 없도록 콘텐츠를 구성하며, 만일 다음 페이지에 깜빡거림이 있는 콘텐츠가 포함되어 있을 경우에는 경고문을 첫 페이지에 표시하고, 깜빡거리는 콘텐츠를 제거한 대체 페이지와 이 페이지로 이동하는 링크를 제공하도록 구성한다.
스크립트 사용 : 스크립트 동작하지 않도록 설정 스크립트를 이용하여 깜빡이는 텍스트(blinking text)를 구성하면 스크립트가 동작하지 않도록 함으로써 깜빡임을 제거할 수 있다.
프로그래밍 기법 : 객체를 깜박거리게 하는 태그 사용 배제 <blink> 또는 <marquee>태그는 사용하지 않는다.

항목 2.4. (키보드로만 운용 가능) 키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

용어 정리

키보드 인터페이스란 키보드 또는 특수한 입력장치로부터 응용프로그램이 필요한 모든 정보를 입력받도록 하는 장치를 의미한다.
포인팅 디바이스(pointing device)란 마우스나 터치패드와 같이 컴퓨터 화면의 특정한 부위를 직접 지정할 수 있는 장치를 의미한다.
음성 입력 장치란 음성으로 컴퓨터를 제어할 수 있도록 구성한 시스템 또는 시스템을 구성하도록 하는 프로그램을 의미한다.

요구 조건

웹 콘텐츠는 키보드 또는 장애를 극복하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다.

적용시 장점

포인팅 디바이스(pointing device)를 사용할 수 없는 시각장애인들도 웹 콘텐츠나 웹사이트 기능을 키보드만으로 사용할 수 있다.
키보드 또는 키보드 인터페이스를 사용할 수 없는 지체장애인의 경우에는 키보드 대신 음성 입력 장치를 이용하여 웹 콘텐츠에 접근할 수 있다.

적용 예

이벤트 발생 방법 : 다양한 입력장치 사용 가능 웹 콘텐츠에서는 포커스인(focus-in), 포커스 아웃(focus-out), 그리고 활성화(activation)의 세 가지 이벤트가 주로 사용된다. 또한, 이들 이벤트는 포인팅 디바이스(예를 들어 마우스), 키보드, 음성 입력 시스템과 같은 다양한 입력 디바이스로 제어가 가능하다.
콘텐츠의 제어 : 키보드 또는 키보드 인터페이스 사용 가능 콘텐츠를 구성하는 모든 링크와 데이터 개체의 실행과 선택은 키보드 또는 키보드 인터페이스를 사용하여 수행할 수 있도록 구성한다. 예를 들어, 웹 페이지를 구성하는 콘텐츠 요소들 간의 이동은 탭(tab)키를 사용하여 가능하도록 구성한다.
```
 <ul>
  <li><a href="./Preface.html" target="_self" tabindex="4">서문</a></li>
  <li><a href="./Introduce.html" target="_self" tabindex="5">개요</a></li>
  <li><a href="./standard_1.html" target="_self" tabindex="6">표준의 구성 및 범위</a></li>
  <li><a href="./accessibility_00.html" target="_self" tabindex="7">접근성 있는 웹 콘텐츠 설계</a></li>
 </ul>
```

항목 2.5 (반복 네비게이션 링크(repetitive navigation link)) 웹 콘텐츠는 반복적인 네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

용어 정리

반복적 네비게이션 링크(repetitive navigation link)란 여러 개의 네비게이션 링크들이 연속적으로 나열되어 있는 링크 개체를 의미한다. 스크린 리더는 반복적 네비게이션 링크 개체를 구성하는 모든 링크들을 순서대로 읽어주므로 콘텐츠의 핵심 부분으로 이동하기 위해서는 모든 링크를 읽어주는 시간이 필요하게 된다.

요구 조건

웹 콘텐츠 상에 반복적 네비게이션 링크 개체가 포함되어 있으며 이 링크 객체가 콘텐츠의 핵심부분보다 먼저 읽어주도록 구성된 경우에 이들 링크들의 읽기를 생략하고 직접 콘텐츠의 메인 부분으로 직접 이동할 수 있는 링크를 제공하여야 한다.
하나의 긴 문장으로 구성된 웹 페이지는 이 페이지의 문장을 여러 개의 논리적인 절로 구분하고 각 절의 색인을 콘텐츠의 첫 부분에 포함시켜 원하는 절의 시작 부분으로 직접 이동할 수 있도록 웹 페이지를 구성한다.
모든 웹사이트는 텍스트 또는 대체 텍스트가 포함된 텍스트 아닌 콘텐츠로 구성된 사이트 맵을 제공하여야 한다.

적용시 장점

이 항목을 만족하는 경우 페이지의 상단이나 좌측 프레임에 반복적 네비게이션 링크개체가 포함되어 있다면 스크린 리더 사용자는 이들 링크 목록을 순서대로 읽어준 후에야 필요한 부분을 읽어주므로 매우 지루한 과정이 요구된다. 그러나 이 페이지의 처음에 핵심 부분으로 이동할 수 있는 링크를 제공하면 빠르게 필요한 위치로 이동할 수 있다.
하나의 긴 문장으로 구성된 콘텐츠 중에서 사용자가 원하는 부분을 찾기 위해서는 처음부터 모두 읽어야 함으로 필요한 부분을 찾는 것은 매우 지루한 일이다. 따라서 문장의 시작 부분에 색인을 제공하여 필요한 부분으로 직접 이동하도록 하는 것은 매우 편리한 기능이다.
사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 직접 이동할 수 있다.

적용 예

메인 콘텐츠로의 직접 이동 : 프레임과 링크 사용 예 만일 웹 콘텐츠를 두 개의 프레임으로 구분하고 왼쪽 프레임을 반복적 네비게이션 링크용 프레임으로, 오른쪽 프레임을 메인 콘텐츠를 제공하도록 구성할 경우를 생각해 보자. 스크린 리더는 왼쪽의 반복적 네비게이션 링크 프레임의 내용을 모두 읽은 후에야 비로소 중앙의 메인 콘텐츠를 읽어주게 된다. 따라서 왼쪽 프레임에 있는 모든 반복적 네비게이션 링크들을 우회하여 직접 메인 콘텐츠로 이동하는 버튼을 두고, 이 버튼에 “메인 콘텐츠로 이동”이라고 레이블을 붙인다면 반복적네비게이션 링크 개체 모두를 읽지 않고도 메인 콘텐츠 부분으로 직접 이동이 가능하게 된다.
```
<style type="text/css">
 /* accessibility Guide */
 #accessibilityMenu  {display:none;}
</style>


<div id="accessibilityMenu">
 <ul>
  <li><a href="#LeftMenu" tabindex="0" title="대메뉴 바로가기">대메뉴 바로가기</a></li>
  <li><a href="#ContentsBody" tabindex="0" title="컨텐츠 바로가기">컨텐츠 바로가기</a></li>
 </ul>
</div>

```
문서 목차 : 긴 문서의 탐색용이 하나의 긴 문서로 구성된 웹 콘텐츠의 시작부분에 이 문서의 목차와 해당 위치로 직접 이동할 수 있는 링크를 제공하고,문서가 나누어지는 부분에 문서의 처음,다음 절, 목차 등으로 이동할 수 있는 링크를 두면 문서를 탐색하는데 매우 편리하다.
웹사이트 : 사이트 맵의 운영 웹 콘텐츠의 첫 페이지에 사이트 맵으로 이동하는 링크를 제공하면 모든 페이지를 열람하지 않고도 필요한 웹 페이지로 직접 이동이 가능하다.

항목 2.6 (반응시간의 조절기능) 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동 등은 사용자가 시간에 구애받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.

용어 정리

실시간 이벤트(real-time event)란 콘텐츠의 저자가 시간을 통제할 수 없는 실시간 상황에 벌어지는 이벤트를 의미한다.
정해진 시간 내에 응답이 필요한 콘텐츠들은 다음과 같다.
1. 자동적으로 갱신되도록 구성된 콘텐츠
2. 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
3. 깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트
4. 짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창
5. 일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용 할 수 없게 되는 콘텐츠
팝업(Pop-Up) 창이란 활성화되어 있는 웹 브라우저에 담긴 콘텐츠가 어떤 동작에 의하여 또는 자동으로 새로 열린 웹 브라우저 창을 의미한다. 그러나 운영체제가 표시하는 메시지 창은 팝업 창으로 분류하지 않는다.

요구 조건

웹 콘텐츠의 시간 제약 조건이 최소한 아래의 항목 중 하나는 만족하여야 한다.
1. 사용자가 시간제한 기능을 동작하지 않도록 할 수 있거나,
2. 일반적으로 사람들이 선호하는 시간의 10배 이상으로 제한 시간을 늘릴 수 있거나,
3. 주어진 시간이 종료하기 전에 경고를 발하며, 제한 시간을 늘리기 위하여 최소한 10초 이상 시간이 주어질 수 있어야 한다.
그러나 아래의 항목은 예외로 하되, 시간제약이 있음을 이 페이지에서 분명하게 알려 주어야 한다.
1. 경매 등과 같이 시간 제약이 있으나 다른 대안이 없는 경우거나,
2. 실시간 게임이나 시간이 정해진 범위에서 작업해야 하는 테스트 등과 같이 시간 제약이 필수적인 경우
팝업(Pop-Up) 창은 가급적 사용을 피해야 한다. 그러나 꼭 사용해야 하는 경우에는 팝업 창이 열리기 전에 사용자에게 경고를 할 수 있어야 한다. 또한 팝업 창이 열리더라도 포커스가 새로 열린 팝업 창으로 이동해서는 안 된다.

적용시 장점

독서 장애, 인지 장애, 학습 장애를 지닌 사람들은 기록된 문서를 읽고 이해하는 데에 대부분의 사람들보다 더 많은 시간을 필요로 하는 경우가 종종 발생한다.
지체장애인들은 이동 객체에 대해 반응할 만큼 빠르게 동작하거나 정확하게 움직일 수 없다.
자주 갱신되는 콘텐츠에서 보조 기술이나 음성 브라우저 등이 정해진 시간 내에 이 콘텐츠를 읽거나 처리하는 것이 곤란한 경우에 시간 제약에 구애받지 않도록 할 필요가 있다.
팝업 창을 사용하면 시각장애인의 경우에 새로운 창의 열고 닫힘을 잘 알 수 없으므로 매우 불편하다. 그러나 부득이해서 팝업 창을 사용해야만 하는 경우에는 창이 열리기 전에 사용자에게 이를 알려주어 시각장애인들이 팝업 창이 열린다는 것을 사전이 인지하도록 하는 것이 좋다.

적용 예

시간제약이 없는 콘텐츠 구성 웹 콘텐츠를 구성할 경우에 시간제한을 두지 않도록 한다.
시간제한이 있는 콘텐츠 구성 시간제한을 둘 경우에는 이러한 사항을 사용자가 충분히 알 수 있도록 공지하도록 한다. 이를 위하여 경과시간과 남은 시간을 화면에 표시하거나 그 값을 스크린 리더로 사용자에게 알려줄 수 있다.