한국 웹 접근성 지침(KWCAG) 이해와 활용

웹 접근성 전문교육 전임강사 : 조훈 실장 / (주)디비딥
Tel : 070-7893-3456, HP : 019-9231-0318
Email : i@hooney.net

차례 (Table of Contents)

처음
차례
인터넷 웹 접근성 지침 개요
웹 접근성 점검 프로그램 설치
- 웹 브라우저 설치
- 웹 브라우저 확장기능 설치
지침1. 인식의 용이성
지침 2. 운용의 용이성
지침 3. 이해의 용이성
지침 4. 기술적 진보성
- 항목 4.1 신기술의 사용
- 항목 4.2 별도 웹사이트 제공
웹 접근성 향상 전략
참고 사이트 & 자료
- 해외 사이트

국내 사이트
국내외 책

웹 접근성이 주는 혜택

웹 접근성(Web Accessibility)은 어떠한 사용자(장애인, 노인 등), 어떤 기술환경에서도 전문적인 능력 없이도 웹 사이트에서 제공하는 모든 정보에 접근하고 이용할 수 있도록 보장하는 것이다. 웹 접근성을 향상시킴으로써 얻게 될 이득은 아래와 같다.

장애인, 노인 등을 포함한 다양한 범위의 이용자 확대 : 웹 접근성 보장을 통해 장애인, 노인 등 신규 고객 확보가 가능하며, 일반인의 홈페이지 접근성도 증대된다.
새로운 장소, 새로운 기기 등 이용상황의 확대 : 자연환경, 주변환경에 구애없이 인터넷 접근이 가능하며, 다양한 정보통신 기기를 통해서도 인터넷 접근 가능하다.
디자인 및 설계에 있어서의 효율성 제고 : 검색엔진의 색인과정, 사이트 개편, 다국어 버전 등 사이트 개편 및 신규 제작시 편의성이 증대된다.
비용 절감의 효과 : 장기적 관점에서 사이트 운영비용이 감소되며, 법제도 개선시 추가 제작이 불필요하다.
홍보 효과 : 장애인, 노인 등을 위한 서비스 제공에 따라 기업 이미지 제고에 도움이 된다.

개요

인터넷 웹 콘텐츠 접근성 지침은 장애를 가진 사람들이 접근할 수 있도록 웹 콘텐츠를 제작하는 방법을 기술하고 있으며, 웹 콘텐츠 저자, 웹 사이트 설계자 및 웹 콘텐츠 개발자들이 웹 콘텐츠를 접근성(Accessibility)을 준수하여 쉽게 만들 수 있도록 도움을 주는 목적으로 만들어졌다.

이 지침의 첫째 목표는 웹 페이지의 접근성을 높이는 것이다. 그러나 이 지침을 따름으로써 웹 표시 장치(user agent)(예를 들어, 데스크탑 브라우저, 음성 브라우저, 이동 전화, 자동차용 컴퓨터 등)의 종류나 사용 환경(소음이 심한 곳, 조명이 지나치게 어둡거나 지나치게 밝은 곳, 손을 사용할 수 없는 환경 등)과 무관하게 모든 이가 보다 쉽게 웹 콘텐츠에 접근할 수 있을 것이다. 또, 이 지침을 따름으로써 웹 정보 검색을 더 빠르게 할 수 있다. 이 지침은 개발자에게 그림/이미지나 동영상 등을 쓰지 말라고 권하지는 않는다. 그러나 멀티미디어에 담긴 내용을 더 많은 사람들이 향유하게 하는 방법을 설명하고 있다.

표준 제정일 : 2004년 12월 23일
개발자 : 김석일 교수(충북대학교) 외 4인 & KADO
참고 지침 : 미국 재활법 508조 기준 & W3C WAI WCAG 1.0, WCAG 2.0 초안
주요 구성 : 4개 지침 14개 세부항목

제정 배경

웹 디자인과 관련한 웹 접근성이라는 것에 대해 생소하다면, 많은 사용자들이 당신과는 매우 다른 환경에서 웹을 보고 있다는 것을 생각해 보라.

어떤 사람들은 보고, 듣고, 움직이는데 장애가 있을 수 있고, 또는 정보의 일부를 처리하지 못 하는 수도 있다.
어떤 사람들은 글을 읽고, 이해하는 것에 어려움을 가지고 있다.
키보드나 마우스가 없거나, 또는 키보드나 마우스를 사용하지 못 하는 환경일 수도 있다.
어떤 사람들은 텍스트만 나오는 화면이나, 아주 작은 화면을 써야 할 수도 있고, 또 느린 인터넷 접속만이 가능할 수도 있다.
자기 언어가 아닌 경우 특정 언어를 유창하게 말하고 이해하지 못 한다.
사용자의 눈, 귀, 손이 다른 일(예: 운전, 시끄러운 환경에서 작업 등)을 하고 있거나 다른 일로 방해를 받을 수도 있다.
사용자에 따라 초기 버전의 브라우저를 쓸 수도 있고, 전혀 다른 브라우저를 쓸 수도 있으며, 음성 브라우저나 다른 운영 체제를 쓸 수도 있다.

콘텐츠 개발자들은 페이지를 디자인할 때에 이런 다양한 상황을 고려 해야 한다. 다른 고려 요소도 있지만, 접근성이 높은 디자인을 채택할 경우 일반적으로 장애를 가진 사용자들에게 우선 이익이 되고, 전체 웹 사용자들에게도 이익이 된다.

텍스트 설명을 붙이는 것이 어떻게 이미지에 대한 접근성을 높이는가? "대체 텍스트"라는 말의 두 단어가 모두 중요하다.

텍스트 콘텐츠는 사용자에게 합성된 음성으로, 점자로, 또는 말 그대로 시각적인 텍스트로 제시될 수 있다. 이들 각각의 경우 다른 감각 기관을 통해 전달된다. 즉, 합성된 음성은 귀를 통해서, 점자는 촉각을 통해, 그리고 텍스트는 시각을 통해 전달된다. 이렇게 함으로써 여러가지 감각 기관에 장애를 지닌 이들의 정보 접근성을 제고할 수 있다.
텍스트가 유용하려면 텍스트도 이미지가 의도했던 것과 같은 기능이나 목적을 전달해야 한다. 예를 들어서 우주에서 바라본 지구 사진에 대한 대체 텍스트가 있다고 생각해보자. 만약 이미지를 보여주는 목적이 주로 장식적인 것이라면, "우주에서 바라본 지구 사진" 정도가 필요한 목적에 부합하는 텍스트가 될 것이다. 만약에 사진을 보여주는 목적이 세계 지리에 대한 특정한 정보를 예로 들기 위한 것이라면 텍스트 설명도 그런 정보를 담고 있어야 한다. 만약 이미지를 선택하여 (예를 들면 사진을 클릭하도록 해서), 지구에 관한 정보를 제공하도록 되어 있다면, 그것에 대한 대체 텍스트도 "지구에 관한 상세 정보" 정도가 되는 것이 좋을 것이다. 그러므로, 이미지가 사용자들에게 제공하는 기능이나 목적과 똑같은 것을 텍스트가 제공해 준다면, 그것은 훌륭한 대체 텍스트가 될 수 있다.

대체 텍스트를 사용하는 것은 장애인들에게만 이득을 주는 것이 아니다. 검색 로봇은 페이지 색인을 만들 때에 그 대체 텍스트를 사용할 수 있기 때문에 모든 사용자들이 페이지를 더 빨리 찾을 수 있도록 도움을 줄 수 있다.

웹 콘텐츠 개발자들은 이미지나 다른 멀티미디어 콘텐츠에 대해서 대체 텍스트를 제공해야 하는 한편, 사용자들에게 최종적으로 정보를 표시해주는 표시 장치 (예를 들면 브라우저나, 이를 지원하는 화면 음성 변환기, 점자 표시 장치 등)는 사용자들에게 대체 텍스트에 담긴 정보를 최종 전달해 주어야 한다.

텍스트가 아닌 다른 대체 방법 (예 : 아이콘, 녹음된 음성, 또는 수화를 보여주는 비디오)도 인지적인 장애, 학습 장애, 청각 장애를 포함하여 문자로 쓰여진 텍스트에 접근하는 데에 어려움을 겪는 많은 사람들에게 문서에 대한 접근성을 높여줄 수 있다. 이는 또 읽는 것을 싫어하거나 못 읽은 사람들에게도 도움이 될 수 있다. 시각 정보에 대한 음성 설명같은 것이 텍스트 형식이 아닌 대체 표현 방법이 될 것이다. 멀티미디어 프리젠테이션에서 시각 부분에 대한 음성 설명을 통해 시각 정보를 볼 수 없는 사람에게 도움을 준다.

웹 접근성을 향상시키는 원칙

이 지침을 따름으로써, 콘텐츠 개발자들은 여러 환경에서 정보를 보전하면서 변환될 수 있는 페이지를 만들 수 있다. 여러 환경에서 쉽게 변환될 수 있는 페이지란 신체, 감각, 인지 장애나 작업 환경의 제약 조건, 기술적인 장벽과 상관없이 접근성이 높은 페이지이다. 여러 환경에서 쉽게 변환되는 페이지를 디자인하기 위해서는 다음과 같은 원칙들이 있을 수 있다.

콘텐츠의 구조(structure)와 표현 방법(presentation), 그리고 동작(Behavior)을 분리한다.
(대체 텍스트를 포함해서) 텍스트를 제공한다. 텍스트는 거의 모든 종류의 브라우저에서 가능한 형태로 전달될 수 있고, 거의 모든 사용자들에게 접근가능하다.
볼 수 없거나 들을 수 없는 사용자에게도 전달할 수 있는 문서를 만든다. 오디오나 비디오의 경우, 다른 감각 채널로 그 목적이나 기능이 동일한 정보에 접근할 수 있게 해야 한다. 이것은 맹인을 위해 전체 사이트를 미리 오디오 녹음하여 제공하라는 뜻이 아니다. 맹인 사용자의 경우 화면 음성 변환기(screen reader) 기술을 이용해서 페이지 내의 모든 텍스트 정보를 접할 수 있다.
한 가지 하드웨어에 의존하는 문서를 만들지 않는다. 사람들은 마우스가 없을 수도 있고, 화면이 작을 수도 있고, 화면 해상도가 낮을 수도 있고, 흑백 화면일 수도 있고, 화면이 없고 단지 음성만 나오거나, 텍스트만 나올 수도 있다.

또한, 콘텐츠 개발자들은 콘텐츠를 이해와 탐색이 쉽게 만들어야 한다. 이것은 단지 말을 간결하고 명확하게 써야 한다는 것뿐만 아니라, 페이지 내에서 혹은 페이지 사이에 이해하기 쉬운 탐색 방법을 제공해야 한다는 것을 뜻한다. 페이지마다 항해(navigation) 도구과 방향(orientation) 정보를 제공함으로써 접근성과 편리함을 극대화할 수 있다.

데스크탑 브라우저의 사용자들만 볼 수 있는 시각적인 단서(예를 들면, 이미지 맵, 가변적인 스크롤바, 줄줄이 늘어선 프레임, 그래픽 등)를 모든 사용자들이 이용할 수 있는 것은 아니다. 사용자들은 음성 합성 장치나 점자 표시 장치 등을 통해 페이지를 볼 경우와 같이 한 번에 한 단어씩만 접근 가능하다든지, 또는 좁은 화면이나 낮은 해상도 때문에 한 번에 일부분만 볼 수 있는 경우가 있기 때문에, 맥락 정보를 잃어버릴 수 있다. 방향 정보가 없다면 사용자들은 아주 큰 표나 목록, 메뉴 등을 이해하지 못 할 수도 있다.

구성 및 범위

인터넷 웹 콘텐츠 접근성 지침은 접근이 가능한 웹 콘텐츠를 만들기 위한 설계 원리를 개괄한다. 이 원리를 무시한 채로 웹 콘텐츠를 제작한다면 장애를 가진 사람들은 웹 콘텐츠에 접근할 수 없거나 접근하는 데에 어려움이 따르게 된다. 반면에 이 원리에 따라 웹 콘텐츠를 제작한다면 적절한 보조기술을 사용하는 장애인들은 해당 콘텐츠에 충분히 접근할 수 있을 것이다. 웹 문서를 설계함에 있어서 고려해야 하는 접근성의 유형은 다음과 같다.

시각을 통하여 정보를 인지할 수 없거나 인지 능력이 떨어지는 시각장애가 있는 경우
청각을 통하여 음향 정보를 인지하지 못하는 청각장애가 있는 경우
신경계의 마비, 근골격계의 마비 또는 선천성 기형 등으로 신체의 움직임에 제한이 있는 지체장애가 있는 경우
읽기나 문장 이해력이 떨어지는 언어장애가 있는 경우
키보드나 마우스를 사용할 수 없는 장애가 있는 경우
문서에 적용된 언어에 따라 말하거나 이해하는데 어려움이 있는 장애가 있는 경우 - 예를 들면 외국어로 작성된 콘텐츠를 이해하지 못하는 경우
시각, 청각 또는 손을 사용하고 있어서 필요로 하는 일을 할 수 없는 경우 - 예를 들어 운전 중이나 소음이 많은 곳에서 일하는 경우로 장애라기보다는 처한 환경에 따라 제한 받는 경우
사용하고 있는 웹 브라우저의 종류나 버전이 다름으로 인하여 어려움이 발생하는 경우 등이다.

인터넷 웹 콘텐츠 접근성 지침은 사람들이 필요한 부분을 빠르게 찾아볼 수 있도록 하기 위해 서로 관계가 있는 항목들을 네 가지 지침으로 분류하였다. 이 경우에 현재까지 개발된 보조기술이나 앞으로 개발될 기술을 사용하는 경우도 염두에 두고 있다. 접근성이 준수된 웹 콘텐츠란 아래의 네 가지 지침을 만족하는 경우에 가능하다. 따라서 이 문서에서는 아래의 네 가지 지침에 포함되는 모든 검사항목을 만족해야 접근성이 있다고 하며, 일부분 또는 전체 검사항목을 만족하지 못하는 경우에는 접근성이 없는 웹 콘텐츠라고 정의한다.

인식의 용이성 : 글로 표현할 수 없는 콘텐츠를 제외하고 장애 유형에 관계없이 모든 사용자가 콘텐츠를 인지할 수 있도록 제공해야 한다.
운용의 용이성 : 콘텐츠에 포함된 모든 구성 요소들은 장애 유형과 관계없이 모든 사용자가 사용할 수 있어야 한다.
이해의 용이성 : 모든 콘텐츠는 가능한 한 그 내용과 사용 방법을 모든 사용자가 이해하기 쉽도록 구성해야 한다.
기술적 진보성 : 현재 개발된 보조기술로는 접근이 어렵거나 불가능한 웹 콘텐츠는 가용한 보조기술을 이용하여 접근할 수 있도록 대체 콘텐츠를 함께 제공해야 한다.

네 가지 지침은 각각 몇 개의 검사항목(또는 항목)으로 구성된다. 본 표준에서 제시하는 검사항목은 총 14개이다. 각 검사항목은 요구사항, 용어정의, 해당 항목을 준수함으로써 얻어지는 혜택 및 적용 예 등으로 구성된다.

웹 접근성 점검 프로그램 설치

웹 사이트의 접근성을 수동으로 점검할 수 있는 프로그램을 이용하면, 직접 코드를 보지 않더라도 해당 웹 사이트의 접근성을 쉽게 점검할 수 있다. 첫번째 설치해야 할 프로그램은 바로 인터넷 익스플러가 아닌 다른 브라우저, 즉 파이어폭스와 오페라 웹 브라우저를 설치해서 사용해보는 것이고, 두번째는 웹 브라우저의 확장기능을 설치해서 접근성 점검을 직접 시행하는 것이다.

웹 브라우저 설치

브라우저를 설치하실 때, 인터넷 익스플러 웹 브라우저에서 shift 키를 누른 상태에서 아래 링크를 클릭하시면, 새창에서 링크가 열려서 강의 페이지를 벗어나지 않습니다.

새로 설치한 3개의 웹 브라우저에서 여러분의 사이트를 각각 방문해 보세요. 3개 브라우저에서 모두 잘 보이시나요? 잘 보이지 않거나 깨져 보인다면, 사용자가 처한 다양한 환경(브라우저)에서 여러분의 웹 사이트는 접근성이 높지 않은 사이트임을 알 수 있습니다. 반대로 잘 보인다면, 접근성 높은 사이트임을 알 수 있습니다.

웹 브라우저 확장기능 설치

인터넷 익스플러용 확장기능

Web Accessibility Toolbar EN 1.2 ([.exe] file 771 kb)

파이어폭스용 확장기능

아래의 링크는 웹 접근성 점검을 위한 파어어폭스 확장기능 3개입니다. 반드시 파이어폭스 브라우저에서 링크를 클릭해서 확장기능을 설치해주세요. 인터넷 익스플러와 오페라와 같은 다른 브라우저에서는 설치가 안됩니다.

지침 1. 인식의 용이성

웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.

항목 1.1 텍스트 아닌 콘텐츠(non-text contents)의 인식

텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

어떤 사용자들은 이미지, 동영상, 소리, 애플릿 등을 직접 사용할 수 없지만, 그런 시청각적인 콘텐츠에 대한 대체 정보를 포함하고 있는 페이지는 사용 가능할 것이다. 대체 정보는 반드시 원래 콘텐츠와 동일한 목적을 달성할 수 있어야 한다. 따라서, 목차로 돌아가는 윗화살표 그림에 대한 대체 텍스트는 "목차로 돌아가기" 정도가 될 수 있을 것이다. 어떤 경우에는 대체 정보가 시각적인 콘텐츠(예 : 복잡한 차트, 빌보드, 다이어그램의 경우)에 대한 시각적인 모양을 설명할 수도 있고, 음성 콘텐츠(예: 교육용 음성 강의 녹음물의 경우)에 대한 내용을 담을 수도 있다.

이 지침에서는 텍스트가 아닌 콘텐츠(이미지, 오디오, 비디오)에 대한 대체 텍스트 제공의 중요성을 강조하고 있다. 대체 텍스트는 다양한 기술적인 방법을 통해 여러 종류의 장애를 가진 사용자들에게 접근 가능한 방법으로 변환될 수 있다는 점에서 효력이 있다. 텍스트는 음성 합성기가 읽어줄 수도 있고, 점자 표시 장치를 통해 출력될 수도 있고, 컴퓨터 화면과 종이를 통해 (여러가지 크기로) 시각적으로 출력될 수도 있다. 음성 합성기의 출력은 맹인이나, 인지적인 장애, 학습 장애, 청각 장애 등으로 인해 읽는 것에 어려움이 있는 사람들에게 아주 중요한 역할을 한다. 점자는 시각 장애인 뿐 아니라, 청각과 시각에 모두 장애를 가진 사람에게는 필수적이다. 시각적으로 보여지는 텍스트는 대부분의 웹사용자는 물론이고 청각 장애인에게 혜택을 준다.

체크 포인트

텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 콘텐츠는 모두 해당 콘텐츠와 정확하게 일치하는 텍스트 콘텐츠(text contents)와 함께 제공해야 한다.
만약, 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 없는 경우는 해당 콘텐츠에 대한 설명을 텍스트로 반드시 제공해야 한다. 이 때, 제공되는 텍스트 콘텐츠는 설명하고자 하는 원래의 콘텐츠의 내용이나 형태 등의 상세한 정보를 제공해야 한다.
텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트는 콘텐츠 제작자가 원래의 콘텐츠를 사용해 표현하고자 했던 의미나 기능도 포함하여 설명해야 한다.
텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트를 읽어줌으로 인하여 의미의 혼동을 줄 경우에는 빈 문자(blank text)를 대체 텍스트로 사용해야 한다.

지침을 준수함으로써 얻는 이득

시각장애 또는 인지장애 등으로 인해 시각으로 정보를 습득하는 데에 어려움을 겪는 사용자들이 스크린 리더(screen reader)와 같은 보조기술을 사용하여 텍스트 콘텐츠를 음성을 통해 읽음으로써 접근권을 보장받을 수 있게 된다.
청각장애나 다른 이유로 음향 정보를 알아들을 수 없는 사용자들을 위해 그 내용을 텍스트로 표시하거나 수화로 해당 내용을 번역함으로써 접근이 가능하게 된다.
시각장애인은 물론 시각장애와 청각장애를 함께 갖고 있는 사용자 역시 해당 콘텐츠를 점자로 변환해 읽음으로써 접근권을 보장받을 수 있게 된다.
몇 개의 자료를 순서대로 나열하는 목록 등 해당 이미지가 단순히 홈페이지를 아름답게 꾸미기 위해 사용된 경우에는 이미지에 대한 대체 텍스트(alt-text)로 빈 문자를 사용하면 의미의 불필요한 혼동을 줄일 수 있다.

항목 사례

위 스크린샷은 국가청렴위원회 웹 사이트의 첫 화면(2007.03.21)이다. 웹 브라우저를 이용해서 눈으로 보는데 전혀 문제가 없다. 깔끔한 디자인이 무척 매력적인 사이트이다. 하지만 이미지를 볼 수 없는 환경에서는 어떨까?

위 스크린샷은 이미지를 끄고 본 화면이다. 국가청렴위원회 웹 사이트는 각각의 이미지에 대체 텍스트를 제공하지 않고 있으며, 이 때문에 웹 페이지가 어떤 내용으로 구성되어 있는지 인지하기 어렵다. 웹 사이트의 텍스트 아닌 콘텐츠에 대체 텍스트를 제공하는 것은 웹 접근성을 향상시키기 위해서 가장 중요한 항목 중 하나이다. 위의 예처럼 이미지를 볼 수 없는 환경에서는 웹 사이트를 서핑하는 것 자체가 불가능할 뿐더러, 개별 페이지의 내용들도 전혀 파악할 수 없기 때문이다.

그렇다면, 대체 텍스트를 제공하는 방법이 무척 복잡하며 힘든 과정을 필요로 할까? 위 웹 사이트의 한 부분에 사용된 코드를 수정함으로써 웹 접근성을 향상시키기 위해 필요한 과정이나 방법을 알아보자.

현재의 코드 :

		<td width="184"><a href="index.jsp" target="_self"><img src="img/logo.gif" width="184" height="37" border="0"></a></td>

수정할 코드 :

		<td width="184"><a href="index.jsp" target="_self"><img src="img/logo.gif" alt="국가청렴위원회" width="184" height="37" border="0"></a></td>

현재의 코드와 수정할 코드를 비교해보면, 단지 img라는 태그에 alt라는 대체 텍스트 속성과 "국가청렴위원회"라는 값이 추가된 것 뿐임을 확인할 수 있다. 더 많은 것을 바랬을 수 있겠지만, 아쉽게도 이 것이 전부다. 단지 1개의 코드와 1개의 값을 매칭시켜 추가함으로써 웹 사이트의 접근성을 향상시킬 수 있는 것이다.

이번엔 대체 텍스트를 제공하고 있는 웹 사이트의 예를 보자. 아래의 스크린샷은 비상기획위원회 웹 사이트의 첫 화면이다. 이미지를 볼 수 있는 일반적인 환경에서는 위의 국가청렴위원회 사이트와 비교해서 별다른 차이가 보이지 않는다.

그렇다면, 이번에도 이미지를 끄고 확인해보자. 위의 국가청렴위원회 웹 사이트와 다르게, 아래의 스크린샷에서 볼 수 있듯이 여러 개의 텍스트를 확인할 수 있다. 이미지를 볼 수 없는 환경에서도 이 웹 사이트가 비상기획위원회 사이트임을 알 수 있으며, 대체 텍스트를 제공하고 있는 네비게이션(국민의 소리, 행정정보공개, 정책자료실, 알림마당, 위원회소개)을 이용해서 웹 사이트를 어렵지 않게 서핑할 수 있다. 또한 웹 페이지에 포함된 콘텐츠를 인식할 수 있고, 이용할 수 있는 것도 어렵지 않다.

위의 두 사이트는 이미지를 볼 수 있는 일반적인 환경에서는 크게 다르지 않지만, 이미지를 볼 수 없는 환경에서는 엄청난 차이가 있음을 확인할 수 있다. 또한 대체 텍스트를 제공하는 방법이 너무나 쉬운 방법임에도 알 수 있다. 사실 웹 접근성을 향상시키는 방법은 대체 텍스트를 제공하는 예에서 볼 수 있듯이 대부분 쉽다. 다만, 웹 사이트를 제작하는 입장에서 이러한 내용을 모르고 있을 수 있고, 이를 관리감독하는 입장에서 놓치고 있었던 항목이었을 수 있다.

항목 1.2 영상매체의 인식

웹이 진화하면서 텍스트가 아닌 콘텐츠, 특히 멀티미디어 콘텐츠가 각광을 받고 있다. 이러한 멀티미디어 콘텐츠는 사용자의 귀와 눈을 사로잡으며, 사용자는 보다 효과적으로 콘텐츠를 받아들일 수 있다. 다만 멀티미디어 콘텐츠를 제공할 경우, 여러 종류의 장애를 가진 사용자들도 동일한 콘텐츠를 접근할 수 있도록 방법을 제공해야 한다.

일례로, 동영상에 음성을 제공함으로써 시각장애인이 콘텐츠에 접근할 수 있지만, 청각장애인은 콘텐츠에 접근할 수 없다. 단지 화면만 볼 수 있을 뿐, 음성을 들을 수 없기 때문이다. 앞서 설명한 것처럼 텍스트는 다양한 기술적인 방법을 통해 여러 종류의 장애를 가진 사용자들에게 접근 가능한 방법으로 변환될 수 있다. 그런 점에서 가장 효율적인 방법이 바로 텍스트로 해당 콘텐츠를 제공하는 것이다.

체크 포인트

음향 정보로부터 사용자가 충분한 정보를 얻을 수 없는 모든 영상매체는 캡션을 함께 제공해야 한다.
캡션은 영상매체나 음향매체와 동기 되어야 한다.
모든 생방송은 캡션을 실시간으로 제공해야 한다. 단 음성이 없는 음악 방송의 경우에는 예외로 한다.
콘텐츠는 사용자가 캡션과 영상정보를 동시에 접해야 그 내용을 이해할 수 있도록 구성되어서는 안 된다. 즉, 캡션과 영상정보는 서로 보완관계가 되지 않아야 한다.

지침을 준수함으로써 얻는 이득

청각장애인은 음향매체와 함께 제공되는 캡션을 통해 음성이나 음향 정보에 접근이 가능하게 된다. 또한, 캡션을 활용하면 해당 콘텐츠에 대한 인덱스를 작성하거나 내용을 검색할 때에도 유용하게 사용될 수 있다.
장애인이 아닌 경우에도 영상매체와 함께 동기 되는 대체 매체가 제공되는 경우에 보다 편리하게 콘텐츠를 활용할 수 있다. 예를 들어 캡션은 소란한 환경이나 오디오 재생기능이 갖추어져 있지 않은 경우 유용하며, 외국어 습득과 같이 언어능력이나 읽기 능력을 높이는데 활용될 수 있다.
화면해설의 경우에는 화면을 보지 않더라도 중요한 정보를 음성으로 알 수 있게 해주므로 시각을 통해 사물을 인식하기 어려운 장애인의 경우에는 화면해설을 통해 화상정보를 인지할 수 있다. 그러나 화면해설은 필수사항으로 분류하지 않는다.

항목 사례

아래의 스크린샷은 광주광역시청에서 제공하고 있는 "제2정부통합전산센터" 홍보영상물이다. 단순한 텍스트나 이미지만으로 구성된 콘텐츠를 제공하는 것보다, 이처럼 멀티미디어 콘텐츠를 제공하는 것이 웹 사이트를 이용하는 사용자들과 상호반응하는 데 효율적임은 분명한 사실이다. 특히, 전세계적으로 높은 광대역 인터넷 회선의 보급률을 보유한 우리나라 환경에서는 멀티미디어 동영상 콘텐츠는 무척 일반화된 콘텐츠 종류임에 분명하다.

이와 같은 멀티미디어 콘텐츠를 제공하려면, 화면을 볼 수 없는 시각장애인과 음성을 들을 수 없는 청각장애인을 모두 고려해야만 한다. 이 둘을 만족시키는 방법으로 가장 효율적인 방법은 화면에 자막을 제공하는 것이다. 아래의 스크린샷은 볼 수 있는 도움나라 웹 사이트에서 제공하고 있는 동영상으로써, 동기화된 자막과 수화를 동시에 제공하고 있다.

아래의 스크린샷은 도움나라 웹 사이트에서 제공하는 청각장애인용 동영상으로써, 수화와 원고를 제공하고 있다.

이처럼 멀티미디어 콘텐츠에 자막이나 원고, 수화를 제공하는 웹 사이트는 몇몇 소수의 웹 사이트만이 아니다. 아래의 스크린샷에서 볼 수 있듯이 국내 대형 웹 사이트 중 하나인 네이버(NAVER) 역시 동영상 뉴스에 원고를 제공하고 있다. 시간의 흐름에 종속적인 멀티미디어 콘텐츠 특성상, 원고를 제공하는 것은 시각장애인을 위한 배려를 넘어 일반 사용자들에게도 무척 도움이 된다. 동영상을 처음부터 끝까지 보는 것보단 원고를 읽음으로써 보다 빨리 뉴스의 내용을 확인할 수 있기 때문이다.

또한, 멀티미디어 콘텐츠를 제공할 때는 다양한 파일 형태로 제공해야 한다. 네이버 뉴스의 예처럼, 윈도우 미디어 형식의 파일만을 제공할 경우에는 윈도우가 아닌 다른 OS 환경, 즉 리눅스나 맥OS에서는 해당 콘텐츠를 플레이시킬 방법이 없다. 그런 점에서 아래의 스크린샷에서 볼 수 있듯이 WebAIM 사이트(http://www.webaim.org/intro/index.php#video)처럼 다양한 멀티미디어 파일들과 텍스트 자막, 번역된 자막을 제공하는 것은 무척 바람직하다.

항목 1.3 색상에 무관한 인식

콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

오직 색깔만 사용해서 어떤 정보를 전달한다면, 일부 색깔을 구별할 수 없는 사람들이나, 흑백 디스플레이를 사용하는 사람들, 또는 비시각적인 장치를 사용하는 사람들은 그 정보를 받아보지 못 할 것이다. 전경색과 배경색이 같은 계통의 색조로 너무 비슷하다면 흑백 디스플레이 사용자나 색약 혹은 색맹이 있는 사람에게는 충분한 대비 효과를 주지 못 할 것이다.

체크 포인트

콘텐츠가 제공하는 텍스트나 그래픽 정보는 색상을 제거하더라도 그 내용을 인지할 수 있어야 한다.
웹 페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다. 특히 웹 페이지의 내용을 고 대비(high contrast) 모드로 표시했을 때에도 충분히 명암대비가 되도록 콘텐츠를 설계하여야 한다.

지침을 준수함으로써 얻는 이득

색상의 차이가 정보의 다름을 나타내지 않으므로 색각(색맹 또는 색약) 이상자의 경우에도 혼동을 일으킬 염려가 없게 된다.
도표 등의 경우에 사용하는 색상의 명암 대비가 충분하므로 약시자의 경우에도 도표를 정확히 인지할 수 있다.
고대비 모드를 사용할 수밖에 없는 사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

항목 사례

막대 그래프나 꺾은 선 그래프, 파이 차트 등을 이용하여 정보를 표시하는 경우에 각각의 영역을 색깔로 구분하기보다는 여러 가지 무늬를 이용하여 표시하면 색상을 인식할 수 없는 사용자들, 예를 들면 약시자나 색각이상자가 쉽게 이해할 수 있다.

1) 접근성이 낮은 막대 그래프(컬러)

2) 접근성이 낮은 막대 그래프(회색톤)

3) 접근성이 높은 막대 그래프

4) 접근성이 낮은 꺽은 선 그래프

5) 접근성이 높은 꺽은 선 그래프

중요한 항목 표시

예를 들어, 가입자의 신상 정보를 입력하는 웹 페이지에서 필수항목을 색깔(예를 들어 빨간색)을 사용하여 표시하는 경우에 이 색깔을 인지하지 못하는 색각 이상자의 경우에는 이 항목의 중요도를 인지할 수 없다. 따라서 색깔 대신 특수 기호(예를 들어 별표)를 이 항목에 추가하면 대부분의 사용자가 이 항목이 중요한 항목인지를 쉽게 인지할 수 있다.

주황색 텍스트와 *(별표)를 함께 제공하는 네이버의 회원가입 예)

지침 2. 운용의 용이성

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

항목 2.1 (이미지 맵 기법 사용 제한)

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

체크 포인트

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

지침을 준수함으로써 얻는 이득

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

항목 사례

클라이언트측 이미지맵

<AREA> 태그를 사용하여 클라이언트측 이미지 맵을 작성할 경우 대체 텍스트를 해당 영역에서 제공하여야 한다.

서버측 이미지맵

서버측 이미지 맵을 사용할 경우에는 대체 텍스트로 구성된 링크목록을 같은 페이지에 제공하면 시각장애인들이 텍스트 링크를 사용하여 필요한 작업을 할 수 있다.

항목 2.2 프레임의 사용 제한

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

체크 포인트

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

지침을 준수함으로써 얻는 이득

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

항목 사례

1) 너무 많이 사용한 프레임

2) 팝업창 제목 부여

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

항목 2.3 깜박거리는 객체 사용 제한

콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

객체나 페이지가 움직이거나, 깜박이거나, 스크롤되거나, 자동으로 갱신되는 경우에는 사용자가 중간에 이를 잠시 멈추게 하거나 완전히 중단할 수 있도록 해야 한다. 인지적인 장애나 시각적인 장애가 있는 사람들 중 일부는 빠르게 움직이는 텍스트를 일부 또는 전혀 읽지 못 한다. 인지적인 장애가 있는 사람들은 움직임 때문에 페이지 내에서 다른 내용을 보지 못 할 수도 있다. 화면 음성 변환기는 움직이는 텍스트를 읽을 수 없다. 신체적 장애가 있는 사람들은 움직이는 객체에 반응하기 위해 충분히 빠르고 정확하게 움직이지 못 한다.

체크 포인트

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

지침을 준수함으로써 얻는 이득

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

항목 사례

1) 깜빡거리는 개체 - 움직이는 GIF 이미지

2) 깜빡거리는 개체 - 플래시 광고

웹사이트에 처음 접속했을 때에 스크린에 나타나는 첫 페이지에는 최소한 깜빡거림이 없도록 콘텐츠를 구성하며, 만일 다음 페이지에 깜빡거림이 있는 콘텐츠가 포함되어 있을 경우에는 경고문을 첫 페이지에 표시하고, 깜빡거리는 콘텐츠를 제거한 대체 페이지와 이 페이지로 이동하는 링크를 제공하도록 구성한다.

3) 깜빡거리는 개체 - 스크립트

4) 깜빡거리는 개체 - HTML 태그

객체를 깜박거리게 하는 HTML 태그인 <blink> 또는 <marquee> 태그는 사용하지 않는다.

항목 2.4. 키보드로만 운용 가능

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

이 항목의 목적은 컨텐츠를 키보드 또는 키보드 인터페이스로 조작할 수 있도록 하는 것이다. 컨텐츠가 키보드 또는 대체 키보드로 조작할 수 있다면, 키보드 애뮬레이터와 같은 입력 장치를 사용해야 하는 사람이나 시각 장애인(눈과 손을 함께 움직일 필요가 있는 마우스 등의 장치를 사용할 수 없는 사람)도 콘텐츠를 이용할 수 있다.

체크 포인트

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

지침을 준수함으로써 얻는 이득

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

항목 사례

콘텐츠를 구성하는 모든 링크와 데이터 개체의 실행과 선택은 키보드 또는 키보드 인터페이스를 사용하여 수행할 수 있도록 구성한다. 예를 들어, 웹 페이지를 구성하는 콘텐츠 요소들 간의 이동은 탭(tab)키를 사용하여 가능하도록 구성한다.

예1) 키보드로 이용 가능한 자바스크립트 메뉴

예2) 키보드로 이용 가능한 자바스크립트 메뉴

예3) 키보드로 이용 불가능한 플래시 메뉴

예4) 키보드로 이용 가능한 플래시 메뉴

항목 2.5 반복 네비게이션 링크(repetitive navigation link)

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

체크 포인트

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

지침을 준수함으로써 얻는 이득

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

항목 사례

예1) 메인 콘텐츠로의 직접 이동 링크 제공

아래의 스크린샷은 정보통신 접근성 향상 표준화 포럼(IABF) 웹 사이트의 첫 화면이다. CSS를 제거하지 않고 본 모습과 CSS를 제거하고 본 모습을 보면 확연히 차이를 느낄 수 있을 것이다. 특히 콘텐츠와 주메뉴, 하위메뉴로 바로가는 스킵 네비게이션을 제공하고 있는데 이를 CSS로 시각적으로만 가려두고 있는 점을 확인할 수 있다.

아래처럼 스킵 네비게이션을 제공하는 것은 스크린 리더를 사용하는 시각장애인에게 무척 유용하지만, 핸드폰이나 PDA와 같이 느린 인터넷 환경과 CSS를 사용할 수 없는 환경, 그리고 작은 화면 표시 장치를 이용하는 일반인에게도 무척 유용하다.

만일 웹 콘텐츠를 두 개의 프레임으로 구분하고 왼쪽 프레임을 반복적 네비게이션 링크용 프레임으로, 오른쪽 프레임을 메인 콘텐츠를 제공하도록 구성할 경우를 생각해 보자. 스크린 리더는 왼쪽의 반복적 네비게이션 링크 프레임의 내용을 모두 읽은 후에야 비로소 중앙의 메인 콘텐츠를 읽어주게 된다. 따라서 왼쪽 프레임에 있는 모든 반복적 네비게이션 링크들을 우회하여 직접 메인 콘텐츠로 이동하는 버튼을 두고, 이 버튼에 “메인 콘텐츠로 이동”이라고 레이블을 붙인다면 반복적 네비게이션 링크 개체 모두를 읽지 않고도 메인 콘텐츠 부분으로 직접 이동이 가능하게 된다.

예2) 문서 목차 제공

하나의 긴 문서로 구성된 웹 콘텐츠의 시작부분에 이 문서의 목차와 해당 위치로 직접 이동할 수 있는 링크를 제공하고, 문서가 나누어지는 부분에 문서의 처음, 다음 절, 목차 등으로 이동할 수 있는 링크를 두면 문서를 탐색하는데 매우 편리하다.

예3) 사이트 맵 제공

웹 콘텐츠의 첫 페이지에 사이트 맵으로 이동하는 링크를 제공하면 모든 페이지를 열람하지 않고도 필요한 웹 페이지로 직접 이동이 가능하다.

항목 2.6 반응시간의 조절기능

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

실시간 이벤트

실시간 이벤트란 콘텐츠의 저자가 시간을 통제할 수 없는 실시간 상황에 벌어지는 이벤트를 의미하며, 아래와 같다.

자동적으로 갱신되도록 구성된 콘텐츠
몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트
짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창
일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용할 수 없게 되는 콘텐츠

체크 포인트

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

지침을 준수함으로써 얻는 이득

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

항목 사례

예1) 시간제한이 있는 콘텐츠 구성 (하나은행)

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

예2) 시간제약이 있는 플래시 게임

예3) 자동 스크롤 콘텐츠-1

예4) 자동 스크롤 콘텐츠-2

지침 3. 이해의 용이성

사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.

항목 3.1 데이터 테이블 구성

데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

체크 포인트

데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다.
데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성하여야 한다.

지침을 준수함으로써 얻는 이득

데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응되는 모든 헤더 값을 알 수 있다.

항목 사례

예1) 대표적인 테이블의 사례 > 표의 사례 > 성적표

	국어	영어	수학	컴퓨터
철수	90	80	60	70
영희	60	70	80	90

성적표의 HTML 코드 :

<table width="90%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th scope="col">&nbsp;</th>
		<th scope="col">국어</th>
		<th scope="col">영어</th>
		<th scope="col">수학</th>
		<th scope="col">컴퓨터</th>
	</tr>
	<tr>
		<th scope="row">철수</th>
		<td>90</td>
		<td>80</td>
		<td>60</td>
		<td>70</td>
	</tr>
	<tr>
		<th scope="row">영희</th>
		<td>60</td>
		<td>70</td>
		<td>80</td>
		<td>90</td>
	</tr>
</table>

예2) 간단한 데이터 테이블 구성

HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각 <TD>와 <TH> 태그를 사용하여 테이블을 구성한다.

예3) 복잡한 데이터 테이블 구성 - 경희대학교 강의 시간표

HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers" 등의 속성을 이용한다.

항목 3.2 논리적 구성

콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.

체크 포인트

문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어놓았을 때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.

지침을 준수함으로써 얻는 이득

논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어려움이 없다.
(2) 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같아지게 된다.

항목 사례

예1) 의미에 맞는 적절한 HTML 태그와 CSS를 사용하여 콘텐츠 선형화 - 한국 웹 접근성 그룹 KWAG

예1) CSS를 제거하고 보기- 한국 웹 접근성 그룹 KWAG

예3) 의미에 맞는 적절한 HTML 태그를 사용하여 콘텐츠 선형화 - 한국 웹 접근성 그룹 KWAG

의미에 맞는 적절한 HTML 태그 사용, CSS 사용. 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용을 이해하기 쉽게 콘텐츠를 구성하여야 한다.

항목 3.3 온라인 서식 구성

온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

체크 포인트

온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제어 요소간의 표시 순서가 일정하여야 한다.
탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애플릿, 플러그인 또는 다른 프로그램 요소를 사용한다. 만일 이것이 불가능할 경우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(항목 4.1 참조).

지침을 준수함으로써 얻는 이득

요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어 요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.

항목 사례

예1) 레이블과 입력 양식

잘한 예2) 펼침메뉴 사용시 이동 버튼 제공 - 정보통신 접근성 향상 표준화 포럼(IABF)

잘못한 예3) 플래시에 입력양식 사용

지침 4. 기술적 진보성

구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.

항목 4.1 신기술의 사용

스크립트, 애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.

새로운 기술을 지원하지 않는 표시 장치를 쓰거나 또는 그런 기능을 꺼 놓았다고 하더라도 페이지에 접근 가능하도록 해야 한다. 웹 개발자들이 현존하는 기술의 문제점을 해결하기 위해서 새로운 기술을 사용하는 것은 장려할 일이지만, 구버전의 브라우저나 새로운 기능을 꺼놓는사용자들에게도 여전히 그 페이지가 보이도록 하는 방법을 제공해야 한다.

체크 포인트

콘텐츠를 나타내기(display) 위해 혹은 인터페이스 요소를 만들기 위해 스크립트 언어를 이용할 경우에는 스크립트에 의해 제공되는 중요한 정보는 최신의 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 스크립트의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
애플릿, 플러그인(plug-in) 혹은 다른 응용 프로그램을 이용하여 웹 콘텐츠를 구성하였을 때에는 이들 프로그램 요소에 의해 제공되는 중요한 정보는 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 이들 프로그램 요소의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
스크립트, 애플릿과 플러그인은 키보드 또는 대체 키보드 인터페이스를 이용하여 사용할 수 있어야 한다.

지침을 준수함으로써 얻는 이득

보조기술이 지원되는 경우가 아니면 애플릿, 플러그인, 스크립트 등의 프로그램 요소를 사용하지 않도록 제한하므로 장애인들이 이들 프로그램 요소에 의하여 접근이 차단되는 일을 방지할 수 있다. 만일 Javascript 기능을 지원하지 않는 웹사이트에서 Javascript 기능을 정지시켰을 때에도 사용자에게는 필요한 정보가 차단되지 않는다.

항목 사례

플래시(Flash)에 대한 대체 텍스트를 현재까지 개발된 스크린 리더가 읽을 수 없다면 플래시를 사용하지 않도록 한다.

예) 링크의 목적지 로 "javascript:"

"href" 속성의 값으로 "javascript:"를 쓰는 것은 접근성 지침 위반일 뿐 아니라 HTML 표준 위반이기도 하다. 만약 스크립트 없이 페이지를 사용하는 것이 불가능하다면, NOSCRIPT라는 요소를 사용하여 대체 텍스트를 제공하거나, 클라이언트측 스크립트 대신에 서버측 스크립트를 사용하라. 또는 대안적으로 접근 가능한 페이지를 제공하라.

항목 4.2 별도 웹사이트 제공

콘텐츠가 항목 1.1에서 4.1에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹사이트)를 별도로 제공해야 한다.

체크 포인트

가능한 보조기술 수준이 미흡하여 장애인이 접근 가능한 웹 콘텐츠를 제작할 수 없는 경우에는 텍스트로만 구성된 대체 페이지를 마련하고 기존의 웹 콘텐츠의 첫 페이지에 대체 페이지로 이동하는 링크를 제공하여야 한다.
제공하는 대체 페이지는 기존의 웹 콘텐츠가 포함한 정보나 기능을 모두 포함하여야 한다.
제공하는 대체 페이지는 기존의 웹 콘텐츠의 개정 주기에 맞추어 개정되어야 한다.

지침을 준수함으로써 얻는 이득

새로운 웹 콘텐츠 제작기술의 개발로 인하여 아무리 노력하여도 원래의 웹 콘텐츠에 포함된 일부 또는 모든 콘텐츠 요소들을 장애인의 접근이 가능한 콘텐츠로 수정할 수 없을 경우가 있다. 이 경우 대체 텍스트로 구성한 페이지를 별도로 구성하여 운영하면 장애인의 접근성이 충분히 지원된다.

항목 사례

한글97 문서

한글97로 작성된 문서를 콘텐츠로 제공하는 사이트의 경우, 스크린 리더를 통하여 한글97 문서를 읽을 수 없다. 이 경우에 동일한 내용을 별도의 HTML 문서로 제작하여 링크한다면 이러한 문제점이 해소된다.

웹 접근성 향상 전략

일반적으로 웹 개발자가 웹 접근성을 전적으로 수행하는 역할한다고 생각합니다. 그러나, 웹 소프트웨어 또한 웹 접근성을 수행하는데 중요한 역할을 합니다. 소프트웨어는 개발자나 장애인이 접근 가능한 웹을 만들고 평가하는 역할을 수행해야 합니다.

웹 사이트의 접근성을 향상시키기

접근성이 높은 웹 사이트를 만드는 것은 쉬울 수도, 또한 어려울 수도 있습니다. 이는 콘텐츠 형식, 사이트의 규모와 복잡성, 개발 툴과 환경 등 여러 요인에 영향을 받기 때문이다.

웹 사이트를 제작하거나 개편할 초기부터 계획을 세운다면, 웹 접근성을 쉽게 향상시킬 수 있다. 웹 접근성이 낮은 사이트를 수정하는 것은 상당히 많은 노력이 필요하다. 특히 사이트가 올바른 (X)HTML 마크업으로 작성되지 않았거나, 플래시나 동영상, 또는 이미지와 같은 형식의 콘텐츠로 구성되어 있다면 더욱 어렵다. 경우에 따라서는 부분적인 접근성 향상에 만족해야할 수도 있으며, 접근성 향상에 대한 강력한 의지로 웹 사이트를 전면 개편할 수도 있다.

웹 사이트 제작/개편 프로젝트 진행시, 계획 단계에서부터 웹 접근성을 고려해야 한다. 한국 웹 접근성 콘텐츠 가이드를 참고할 수 있으며, 사내에 전문인력이 없을 경우 외부 전문가의 참여나 자문을 받는 것도 좋은 방법이다. 이렇게 프로젝트 계획 단계에서부터 진행과정 내내 웹 접근성을 고려해야할 뿐만 아니라, 프로젝트 완료 후에도 유지/보수 측면에서도 꾸준히 고려해야 한다.

웹 사이트의 접근성을 평가하기

웹 사이트를 제작하거나 개편할 때, 초기부터 또는 과정 전반에 걸쳐 웹 접근성을 평가함으로써 접근성 관련 문제점을 조기에 발견하고 쉽게 수정할 수 있다. 이는 웹 사이트의 제작/개편 프로젝트 완료 후에 접근성을 평가함으로써 인력과 비용, 그리고 시간을 2중으로 낭비하는 문제를 해결할 수 있다.

웹 접근성 평가는 도구(tool)를 사용하는 방법과 전문가를 활용하는 방법이 있다. 접근성 평가 도구는 하나의 유용한 수단일 뿐이며, 평가 도구 없이도 접근성 지침을 준수했는지 판단할 수 있어야 한다. 그런 점에서 웹 사이트의 접근성을 평가하기 위해서는 반드시 접근성 전문가가 필요하다.

웹 접근성 평가 도구 현황

도구 명칭	제작사	무료 여부	다운로드 여부
AccVerify	Hisoftware	X	○
Bobby	CAST	X	○
Insight	SSB Technologies Inc.	X	○
PageScreamer	Crunchy Technologies Inc.	X	○
The WAVE	Teple University	○	○

웹 접근성 수정 도구 현황

도구 명칭	제작사	무료 여부	다운로드 여부
AccRepair	Hisoftware	○	○
A-Prompt	CAST	X	○
InFocus	SSB Technologies Inc.	○	○
PageScreamer	Crunchy Technologies Inc.	○	○
Lift	UsableNet	○	○

온라인 무료 평가 사이트

(해외) Bobby - http://webxact.watchfire.com/
(해외) Cynthia Says - http://www.cynthiasays.com/
(국내) KADO - http://www.iabf.or.kr/
(국내) Cool check - http://www.coolcheck.co.kr/

참고 사이트 & 자료

아래의 사이트와 책에서 웹 접근성에 대한 정보를 얻을 수 있다. 해외에 비해서 국내에는 웹 접근성과 관련된 정보가 부족한 것이 사실이지만, 지속적인 한국 정보문화 진흥원(KADO)의 활동과 최근에 몇몇 민간의 활동에서 관련 정보를 얻을 수 있다.

해외 사이트

Web Accessibility Initiative (http://www.w3.org/WAI/)
장애를 겪고 있는 사람들이 웹에 접근할 수 있도록 전략과 가이드, 자료를 만드는 W3C의 중요 활동 그룹이다.
Section 508 (http://www.section508.gov/)
미국에서 1998년에 개정된 전자제품이나 기술적인 정보에 대한 장애인들의 접근성을 보장하는 법률이다.
BBC - My Web My Way (http://www.bbc.co.uk/accessibility/)
영국의 BBC 방송사에서 웹 사이트에 쉽게 접근할 수 있도록 브라우저나 데스크탑, 키보드 등을 조정할 수 있는 다양한 방법과 예제들을 제공해주고 있다.
WebAim (http://www.webaim.org/)
1999년부터 웹 접근성과 관련한 주옥같은 자료들을 제공하고 있는 비영리 기관이다.
Web Accessibility Toolbar (http://www.visionaustralia.org.au/ais/toolbar/)
호주에 있는 Accessible Information Solutions가 제공하는 무료 웹 접근성 평가 툴로써, 인터넷 익스플러에 설치하여 사용할 수 있다.

국내 사이트

정보통신 접근성 향상 표준화 포럼 (http://www.iabf.or.kr/)
장애인 및 노인 등의 정보통신 접근성을 향상시키기 위한 표준화를 위한 포럼으로 국내의 웹 접근성 표준화를 추진하고 있으며, 웹 접근성에 대한 세미나 소식과 각종 자료들을 제공하고 있다.
한국 웹 접근성 그룹 (http://www.kwag.net/)
국내 웹 접근성을 향상시키기 위한 자발적인 모임으로써, 회원 상호간의 정보 공유와 스터디, 세미나 등을 진행하는 온라인/오프라인 모임이다.

국내외 책

웹 액세서빌리티 : 접근하기 쉬운 웹 사이트 구축하기 (저자 : 짐 대처, 번역 : 우유미)
신체적 장애를 가진 장애인들과 노약자들도 쉽게 이용할 수 있는 웹 사이트의 구축 방법, 선진국의 웹 액세서빌리티 보장 법률에 대한 실례, 플래시로 제작한 사이트에서의 웹 액세서빌리티 적용 사례, 그리고 무선 웹 사이트 시대에 걸맞는 공간상의 제약 극복을 위한 문제 제기를 담고 있다.
Web Accessibility: Web Standards and Regulatory Compliance
Constructing Accessible Web Sites
Maximum Accessibility: Making Your Web Site More Usable for Everyone