웹 접근성 품질마크 인증제

1. 웹 접근성 품질마크 인증제

다운로드 품질마크가이드.zip

이 장에서는 웹 접근성 품질마크 인증제를 도입하게 된 주요 목적과 이를 위한 기본 방침을 설명한다.

1.1. 웹 접근성 품질마크 인증제의 도입 목적

웹 접근성 품질마크를 도입하게 된 주요 목적은 다음과 같이 크게 두 가지로 나누어 볼 수 있다.

첫째, 장애인과 고령자 등 소외 ‘정보소외 계층’에게 웹 사이트의 정보를 보다 용이하게 접근할 수 있는 환경을 조성하는 데 있다. 오늘날 웹을 통한 정보․지식의 제공 양이 기하급수적으로 늘어나고 있으며, 그것을 통해 제공되는 정보와 지식의 종류나 영역도 일상적인 내용에서부터 생활에 필수적인 정보․지식에 이르기까지 다양하고 광범위하다. 따라서 다양한 인지적․신체적 특성을 지닌 장애인이나 고령자를 포함하여 그 누구든지 웹을 통해 정보나 지식에 제대로 접근할 수 없다면, 그 사람은 웹의 다양한 혜택을 충분히 만끽할 수 없을 뿐만 아니라 일상생활을 하는 데 상당한 불편을 겪을 수밖에 없다.

문제는 이들 장애인이나 고령자들이, 경제적인 이유 등으로 인해 정보에 접근할 수 있는 인터넷망이나 컴퓨터와 같은 장치들을 소유하지 못함으로써 겪었던 ‘1차 정보격차(1st digital divide)’의 경우와는 달리, 심지어 이들 장치들을 소유하고 있다고 하더라도 공공기관의 정보이든 기타 일반적인 정보이든 각종 웹 사이트에서 제공하는 정보 자체가 접근 가능하게(accessible) 제공되지 않음으로써 발생하는 ‘2차 정보격차(2nd digital divide)’를 겪고 있다는 점이다. 이러한 문제를 해결하기 위해서는 정부나 정보격차 해소를 위해 노력하는 공신력 있는 기관들이 웹 페이지 설계자나 운영자들에게 장애의 유무나 연령 등에 상관없이 모든 이용자들이 해당 웹 사이트에서 제공하는 모든 정보와 지식 등에 적절하게 접근할 수 있는 환경을 구축하도록 촉구해야 한다. 웹 접근성 품질마크는 해당 사이트가 얼마나 접근 가능하도록 구축․운영되고 있는가를 보다 객관적으로 평가․인증해 줌으로써 웹 페이지 설계자나 운영자들로 하여금 해당 사이트를 보다 접근 가능하게 만들 수 있도록 해 줄 것이다.

둘째, 우리나라의 경우, 선진국들에 비해 공공기관에서 제공하는 정보에 대한 접근성이 상당히 뒤떨어지고 있다. 이로 인해 매년 급격하게 증가하고 있는 장애인이나 고령자들의 경우, 해당 기관의 홈 페이지에서 제공하는 공공정보마저도 제대로 접근할 수 없는 상황이다. 이러한 문제의 원인은 여러 곳에서 찾아볼 수 있지만, 무엇보다도 중요하면서 심각한 것은 공공정보를 직접적으로 제공하고 있는 해당 공공기관은 말할 것도 없고, 위에서 언급한 바와 같이, 이로 인해 웹의 혜택을 충분히 누리지 못하고 있는 정보소외계층인 해당 장애인이나 고령자들조차도 웹 접근성을 제공받아야 한다는 필요성을 절감하고 있지 못하다. 따라서 웹 접근성 품질마크 인증제를 도입함으로써 웹 접근성을 강화하고 이를 통해 장애인과 고령자들이 정보화의 혜택을 충분히 누릴 수 있는 여건을 조성해 줄 뿐만 아니라 웹 접근성에 대한, 장애인과 고령자를 포함하여, 사회 일반인들의 인식을 널리 고양시킬 수 있을 것이다.

1.2. 웹 접근성 품질마크 인증제의 기본 원칙

이와 같은 목적을 달성하기 위하여, 웹 접근성 품질마크 인증제는 다음과 같은 몇 가지 기본 방침/원칙하에 운영된다.

첫째, 정보나 지식의 중요도나 포괄성 측면에서 볼 때, 정부나 공공기관에서 제공하는 행정서비스 등과 관련된 정보는 이용자들의 장애유무나 연령 등에 상관없이 해당 이용자의 일상생활 등에 커다란 영향을 미친다. 따라서 웹 접근성 품질마크 인증제는, 미국과 같은 외국의 사례에서도 알 수 있는 바와 같이, 우선적으로 각종 민생치안 관련 정보나 행정서비스에 관한 정보들을 제공하는 정부나 공공기관을 주대상으로 하지만 민간부분에서도 웹 접근성을 보장하기 위한 노력을 촉구하고 이 제도의 활성화를 위하여 웹 접근성 품질마크 인증심사기준을 충족한 모든 기관에 대해 품질마크를 부여하는 것을 원칙으로 한다.

둘째, 웹 접근성 품질마크 인증제는 한국정보문화진흥원을 중심으로 관련 기관, 학계, 민간단체가 참여하는 자율적인 인증체계로 추진하며, 이의 효율적인 운영을 위해 한국정보문화진흥원 산하에 웹 접근성 실태조사 및 심사, 인증을 위한 ‘웹 접근성 품질마크 인증위원회’와 ‘웹 접근성 품질마크 실무위원회’ 등 관련 기관을 설치․운영한다. 아울러, 인증마크에 대한 보다 높은 신뢰성 및 공신력을 확보하기 위해 웹 접근성에 관한 외부 전문가로 구성된 심사위원회를 운영하여 공정한 심사 및 인증을 할 뿐만 아니라 수시로 사후 모니터링을 실시하며, 매년 ‘웹 접근성 우수 사이트’를 선정․시상하는 등의 다양한 인센티브를 제공한다.

2. 웹 접근성 품질마크 인증심사

2.1. 웹 접근성 품질마크 인증체계

<그림 1>은 웹 접근성 품질마크를 효과적․효율적으로 추진․운영하기 위한 추진체계와 기능 등을 간략히 보여준다.

<그림 1> 웹 접근성 품질마크 인증 추진체계․기능도

2.1.1. 인증기관

‘정보격차해소에관한법률’ 제16조에 의거 웹 접근성 품질마크를 부여하는 인증기관은 한국정보문화진흥원이다.

2.1.2. 인증대상

웹 접근성 품질마크의 인증 대상은 정부 및 공공기관, 민간업체 등 공공이나 일반인을 대상으로 웹 서비스를 제공하는 법인사업자이다.

2.1.3. 웹 접근성 품질마크 인증위원회 및 실무위원회, 사무국

<그림 2>는 웹 접근성 품질마크 추진․운영 조직도를 보여준다.

한국정보문화진흥원

웹 접근성 품질마크 인증위원회
● 제도운영의 중요사항 결정 ● 마크 부여 최종 결정

				사무국
				● 웹 접근성 관련 연구·조사 ● 인증마크제 운영 지원

웹 접근성 품질마크 실무위원회
● 웹 접근성 준수 여부 심사 ● 평가 전문가 풀 운영

<그림 2> 웹 접근성 품질마크 추진․운영조직도

인증위원회는 정부 및 공공기관, 민간기업의 웹 사이트 접근성에 대한 조사 및 심사, 인증 기능을 수행하는 비상설기구이며, 위원회 위원은 정부, 학계, 산업계, 관련기관 및 단체의 책임자를 추천하여 위원장 포함 10인 이내로 위촉한다. 이 인증위원회에서는 웹 접근성 평가지표 및 인증 운영 지침 등 제도 전반에 관한 중요 사항을 결정하고 인증마크를 최종 승인하는 권한을 지닌다. 또한 인증위원회는 위원회 내에 웹 접근성 관련 연구․조사 및 품질마크 인증제의 운영을 지원하는 사무국을 설치․운영한다.

실무위원회는 인증위원회가 웹 접근성 수준의 평가 및 심사, 인증여부를 판단할 수 있도록 웹 접근성 품질마크 인증과 관련한 실질적인 조사 및 평가기능을 수행하는 비상설기구로서, 웹 접근성 지침 운영 및 평가, 웹 표준화 개발 등 10인 이내의 관련 분야 전문가로 구성된다.

이 기관들의 주요 기능 및 특징, 구성 등을 정리하면 <표 1>과 같다.

<표 1> 웹 접근성 품질마크 추진․운영 주요 기능, 특징, 구성

기 관	주요 기능
한국정보문화진흥원	● 웹 접근성 품질마크 운영 ● 웹 접근성 품질마크 인증위원회 운영 지원 ● 웹 접근성 사무국 운영
웹 접근성 품질마크 인증위원회	● 정부 및 공공기관, 민간기업의 웹 사이트의 접근성에 대한 조사 및 심사, 인증 기능을 수행하는 비상설기구 ● 위원은 정부, 학계, 산업계, 관련기관 및 단체의 책임자를 추천하여 위원장 포함 10인 이내로 위촉 ● 웹 접근성 평가지표 및 인증운영 지침 등 제도 전반의 중요사항에 대한 결정 및 인증마크 최종 승인 웹 접근성 품질마크 운영 규정 심의 및 확정 웹 접근성 인증마크 승인 ● 위원회 내에 웹 접근성 인증심사 및 평가 실무를 담당하는 운영위원회를 두며, 이를 지원할 수 있는 사무국을 설치․운영
웹 접근성 품질마크 실무위원회	● 인증위원회가 웹 접근성 수준의 평가 및 심사, 인증여부 판단할 수 있도록 웹 접근성 인증 관련 실질적인 조사·평가기능 수행 웹 접근성 심사 및 재심사 수행 심사․평가기준 등 품질마크 운영 규정 마련 웹 접근성 표준화 개발 지원 등 ● 웹 접근성 지침 운영 및 평가, 웹 표준화 개발 등 관련 분야 전문가 10인 이내 구성 전문위원회는 웹 사이트 평가의 효율적인 추진을 위해 접근성 평가전문가 실사팀(전문가 풀)을 별도 구성하여 운영

2.1.4. 인증범위

인증범위는 인증심사를 신청한 신청기관의 책임자나 대표자가 신청한 인증의 범위 내로 한정한다. 다만, 인증 신청한 웹 사이트의 특성상 분리하기가 곤란한 경우 인증의 범위에서 제외할 수 없다.

2.1.5. 인증 유효기간

인증대상 기관이 웹 접근성 품질마크 인증을 받게 되면 그 인증은 1년간 유효하며, 인증을 취득한 기관이 웹 접근성 및 접근성 품질마크를 지속적이고 적절하게 유지·운영하고 있는지를 수시로 점검한다. 수시점검을 통해 웹 사이트의 웹 접근성이 인증수준에 미흡한 것으로 판정된 경우, 인증기관은 해당 인증 취득기관에게 1개월 이내에 시정 조치할 것을 통보해야 하며, 통보를 받은 인증취득기관은 1개월 이내에 시정 사항에 대한 조치를 취해야 한다. 만약 이 기간 내에 시정을 하지 않는 경우 인증기관은 해당 인증취득기관에 대한 인증을 취소하며, 따라서 해당 기관에 대한 인증은 더 이상 유효하지 않다. 또한, 인증을 받은 웹 사이트에 중대한 변경(예: 사이트 개편, 주요 서비스 변경)이 발생한 경우 인증취득기관의 책임자나 대표자는 사유발생일로부터 1개월 이내에 변경 내용을 인증위원회에 통보하여야 하며, 인증위원회는 인증취득자와 협의하여 재심사 여부를 결정한다. 재심사는 변경된 범위에 대해서 인증심사와 동일한 절차에 따라 행해지며, 재심사 결과 적합하다고 판정된 경우 인증 유효기간은 결과통보일로부터 1년이 된다.

2.2. 인증심사 기준, 방법, 범위, 절차

웹 접근성 품질마크 인증심사는 ｢정보격차해소에관한법률｣에 근거하여 한국정보문화진흥원이 고시한 ｢웹 접근성 품질마크 인증심사 규칙｣(한국정보문화진흥원, 2007. 1. 12 제정)에 따라 수행된다.

2.2.1. 인증심사 기준

웹 접근성 품질마크 인증심사는 W3C의 WCAG 1.0과 현재 최종 검토단계에 있는 WCAG 2.0, 영국의 RNIB(Royal National Institutes of the Blind)의 ‘See it Right’, 미국재활법 508조, KWCAG 1.0과 여러 차례에 걸쳐 행해진 웹 접근성 실태조사 결과 등 웹 콘텐츠 접근성 지침 및 인증 기준 등을 토대로, 아래에 구체적으로 설명하게 될, 네 가지 웹 접근성 지침, 세 가지 중요도 수준, 13개 항목, 26개 지표, 58개의 체크리스트를 활용하여 평가한다.

a) 네 가지의 웹 접근성 지침

웹 접근성 품질마크 인증을 위한 지침은, 기존의 ‘한국형 지침(KWCAG 1.0)’과 마찬가지로, 서로 관련된 항목들을 다음과 같은 네 가지 원리 하에 분류하고, 이를 지침으로 삼았다.

(1) 인식의 용이성: 글로 표현할 수 없는 콘텐츠를 제외하고는 장애 유형에 관계없이 모든 콘텐츠는 모든 사용자에게 인지될 수 있는 형태로 제공되어야 한다.

(2) 운용의 용이성: 콘텐츠에 포함된 모든 구성 요소들은 장애 유형과 관계없이 모든 사용자가 사용할 수 있어야 한다.

(3) 이해의 용이성: 모든 콘텐츠는 가능한 한 그 내용과 사용 방법을 모든 사용자가 이해하기 쉽도록 구성되어야 한다.

(4) 신기술적 진보성: 현재 개발된 보조기술로는 접근이 어렵거나 불가능한 웹 콘텐츠는 가용한 보조기술을 이용하여 접근할 수 있도록 대체 콘텐츠를 함께 제공하여야 한다.

웹 접근성에서 특히 중요한 것은 웹 콘텐츠 설계자나 개발자들이 이 네 가지 요소들을 얼마나 조화롭게 융합하느냐에 따라 웹 접근성의 정도에 상당한 차이를 보인다. 즉, 특정 지침과 그 지침의 하위 영역이 아무리 잘 지켜졌다 하더라도 기타 지침과 그 하위 영역이 제대로 지켜지지 않으면 해당 웹 컨텐츠는 접근성에 상당한 문제가 있을 수밖에 없다. 따라서 웹 컨텐츠 설계자나 개발자는 어떻게 하면 이 네 가지 지침이 조화롭게 융합할 수 있는지 혹은 이 네 가지 지침이 모두 중첩되는 부분을 어떻게 넓혀 나갈 수 있는지를 지속적으로 고민해야 한다. 바로 이러한 이유 때문에, 웹 접근성 품질마크 인증에서는 이 네 가지 지침이 얼마나 잘 준수되었는가를 세부적인 항목, 지표, 체크리스트, 중요도에 따라 측정․평가하고, 그 평가결과에 근거하여 일정수준 이상의 인증기준(인증기준에 대해서는 뒤에서 상세히 언급함)을 준수한 웹 사이트에 대해 인증마크를 부여한다.

b) 세 가지 중요도 수준

웹 접근성 품질마크 인증을 위해 마련된 웹 접근성 지침은 세 가지 중요도 수준 즉, 의무[중요도 1, 반드시 준수해야 함(Must Have)], 권고[중요도 2, 마땅히 준수해야 함(Should Have)], 권장[중요도 3, 준수하도록 노력해야 함(May Have)]으로 나누어 평가된다. <표 2>는 각 중요도 수준별 개념과 의미에 대한 정의를 보여준다.

<표 2> 세 가지 웹 접근성 지침 중요도 수준과 의미

구분	중요도 1	중요도 2	중요도 3
개념 정의	● 의무(Must) ● 반드시 준수해야 함	● 권고(Should) ● 마땅히 준수해야 함	● 권장(May) ● 준수하도록 노력해야 함
의 미	● 기본적 요구사항을 충족시킴으로써 웹 접근성을 보장(ensure) ● 미준수시 웹 콘텐츠에 접근하는 것이 불가능	● 중대한 결함을 제거함으로써 웹 접근성을 증대(increase)시킴 ● 미준수시 웹 콘텐츠에 접근하는 것이 어렵게 됨	● 사소한 결함까지 제거함으로써 웹 접근성을 향상(enhance)시킴 ● 미준수시 웹 콘텐츠에 접근하는 것이 불편하게 됨
지표수	14개 지표	8개 지표	4개 지표

c) 웹 접근성 지침별 인증심사기준 항목, 지표, 중요도

다음은 웹 접근성 품질마크 인증을 위한 인증심사기준으로 설정된 네 가지 웹 접근성 지침별 인증심사기준 항목, 지표 및 중요도를 나타낸다.

□ 인식의 용이성

항 목	지 표	중요도
1-1. 텍스트 아닌 콘텐츠의 인식	1-1-1. 텍스트가 아닌 콘텐츠에는 모두 대체 텍스트가 제공되어야 한다.	1 (의무)
	1-1-2. 대체 텍스트의 내용은 적절하게 제공되어야 한다.	1 (의무)
	1-1-3. 정보가 있는 콘텐츠를 배경 이미지로 사용하지 않아야 한다.	1 (의무)
1-2. 멀티미디어 매체의 인식	1-2-1. 동영상 등의 시청각 멀티미디어 콘텐츠에는 동기화된 자막이 제공되어야 한다.	1 (의무)
1-3. 콘텐츠의 시각적 명료성	1-3-1. 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.	1 (의무)
	1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있어야 한다.	2 (권고)
	1-3-3. 텍스트는 쉽게 읽을 수 있도록 충분한 크기로 제공되어야 한다.	2 (권고)

□ 운용의 용이성

항 목	지 표	중요도
2-1. 이미지맵 기법 사용 제한	2-1-1. 서버측 이미지맵을 불필요하게 사용하지 않아야 한다.	1 (의무)
2-2. 프레임의 사용 제한	2-2-1. 불필요하거나 과도하게 많은 프레임을 사용하지 않아야 한다.	1 (의무)
2-2. 프레임의 사용 제한	2-2-2. 각 프레임의 title속성을 적절하게 제공하여야 한다.	1 (의무)
2-3. 깜빡거리는 객체 사용 제한	2-3-1. 깜빡이는 콘텐츠를 사용할 경우, 이에 대한 경고 및 제어방안을 제공하여야 한다.	1 (의무)
2-4. 키보드로만 운용 가능	2-4-1. 키보드만으로 모든 콘텐츠를 제어 할 수 있어야 한다.	1 (의무)
2-5. 반복 네비게이션 링크	2-5-1. 반복되는 링크가 많은 페이지를 효율적으로 이용하기 위한 스킵 네비게이션 링크를 제공하여야 한다.	3 (권장)
2-6. 반응 시간의 조절기능	2-6-1. 이용에 시간제한이 있는 콘텐츠의 경우 경고 및 시간조절 기능을 제공하여야 한다.	2 (권고)
2-6. 반응 시간의 조절기능	2-6-2. 팝업창을 불필요하게 사용하지 않아야 한다.	2 (권고)

□ 이해의 용이성

항 목	지 표	중요도
3-1. 데이터 테이블 구성	3-1-1. 테이블에 대한 summary와 caption을 제공하여야 한다.	2 (권고)
3-1. 데이터 테이블 구성	3-1-2. 데이터 테이블을 의미적으로 이해할 수 있도록 적절히 태그를 사용하여야 한다.	2 (권고)
3-2. 페이지의 논리적 구성	3-2-1. 의미에 맞는 적절한 HTML태그를 사용하여야 한다.	2 (권고)
	3-2-2. 콘텐츠의 내용은 선형화(순서대로 나열) 했을 때에도 무리 없이 인식을 할 수 있어야 한다.	1 (의무)
	3-2-3. 레이아웃 테이블 작성에 테이블의 구조 정보를 정의하는 태그를 사용하지 않아야 한다.	3 (권장)
	3-2-4. 각 링크의 목표 위치를 명확하게 하여야 한다.	3 (권장)
3-3. 온라인 서식 구성	3-3-1. 각 서식 제어 요소를 설명하는 레이블을 사용하여야 한다.	1 (의무)
3-3. 온라인 서식 구성	3-3-2. 키보드만으로도 온라인 서식 입력 및 서식 간 이동이 가능하여야 한다.	1 (의무)

□ 신기술적 진보성

항 목	지 표	중요도
4-1. 신기술의 사용	4-1-1. 스크립트, 애플릿, 플러그인 등 부가 어플리케이션에 의한 콘텐츠는 자체적인 접근성을 지니고 있어야 한다.	2 (권고)
	4-1-2. 부가 애플리케이션이 작동하지 않을 경우에도 동일한 내용을 전달할 수 있는 대체 콘텐츠를 제공하여야 한다.	1 (의무)
	4-1-3. 부가 애플리케이션의 설치가 요구되는 페이지는 해당 페이지에서 직접 어플리케이션을 설치할 수 있는 링크를 제공하여야 한다.	3 (권장)

d) 인증기준

웹 접근성 품질마크는 위에서 열거한 네 가지 접근성 지침 하에 13개 항목, 26개 지표와 56개의 체크리스트를 자동평가프로그램인 KADO-WAH를 이용한 사전심사와 전문가 심사, 사용자 심사, 인증 심의로 구성된 인증심사에서 일정한 수준 이상을 준수함으로써 모두 적합 판정을 받은 경우에 한하여 부여된다(구체적인 인증심사 방법과 적합판정 조건에 대해서는 뒤에서 보다 상세히 언급함).

구체적으로, 웹 접근성 품질마크 인증을 받기 위해서는 우선 위에서 열거한 평가지표와 체크리스트 중 자동평가프로그램인 KADO-WAH를 통해 평가가 가능한 지표와 체크리스트에 대한 사전검사에서 90% 이상을 준수해야 하며, 전문가 심사에서 다음 <표 3>에 제시한 각 지표별 웹 접근성 지침에 대한 인증기준을 충족하여 한다.

<표 3> 전문가 심사 인증기준

중요도	구분	인증기준
의무요건	P1	각 지표별 웹 접근성 지침을 90% 이상 준수
권고요건	P2	각 지표별 웹 접근성 지침을 70% 이상 준수
권장요건	P3	각 지표별 웹 접근성 지침을 50% 이상 준수

또한 사용자 심사의 경우에는 웹 접근성 평가를 위한 일정한 요건을 갖춘 장애인과 고령자 등으로 구성된 웹 사이트 사용자 심사자에게 일정한 과업을 주고 해당 과업에 대한 성공률에 근거한 인증기준에 의거 인증심사를 하게 된다(사용자 심사 평가툴은 현재 한국시각장애인연합회를 중심으로 개발 중임).

2.2.2. 인증심사 방법

인증심사는 심사의 과학성과 신뢰성, 효율성을 확보하기 위하여 지침과 지표, 체크리스트에 대한 준수여부 및 준수율을 계량화하기 위하여 웹 접근성 자동평가프로그램인 KADO-WAH 2.0을 통한 자동평가(전수조사)와 전문가 심사에 의해 수행되는 정량적 심사와 해당 지침이나 지표 등에 대한 적정성과 적합성을 전문성을 가진 심사자가 총체적인 접근법(heuristic approach)에 의해 주관적으로 심사하고 그 결과를 준수율로 환원하는 정성적 심사방법을 통해 행해진다.

<표 4> 인증심사 형태별 심사방법 및 관련 지표 예시

심사기법		설명	심사방법	지표판정 척도	관련 지표
정량적 심사	평가툴(KADO-WAH)에 의한 심사	지표에 대한 준수 여부를 객관적으로 심사함	지침을 준수한 대상의 개수/지침을 준수해야 하는 대상의 개수 * 100	● 준수함: 적합 ● 준수하지 못함: 부적합	● 지침 11-1-1, 1-1-3, 1-2-1 ● 지침 22-1-1, 2-3-1, 2-4-1, 2-6-2 ● 지침 33-1-1, 3-2-3, ● 지침 44-1-1, 4-1-2, 4-1-3
	전문가 심사에 의한 평가
정성적 심사	전문가 심사에 의한 평가	지표에 대한 준수 여부를 주관적으로 심사함	지침에 대한 준수 적정성(또는 적합성)		● 지침 11-1-2, 1-3-1, 1-3-2, 1-3-3 ● 지침 22-2-1, 2-2-2, 2-5-1, 2-6-1 ● 지침 33-1-2, 3-2-1, 3-2-2, 3-2-4, 3-3-1, 3-3-2

아울러, 설혹 이상의 두 가지 방법에 의한 심사를 통해서도 쉽게 평가하기가 곤란한 부분에 대하여 장애인과 고령자 등 웹 접근성을 평가할 수 있는 일정한 요건을 갖춘 실제 웹사이트 사용자에게 해당 웹 사이트 내의 주요 과업을 추출․제시한 후 당해 과업의 달성여부를 접근성의 준수 여부로 평가하는 방식[사용자 과업(task) 모형]을 통한 사용자 심사뿐만 아니라 위에서 행한 일련의 자동평가와 전문가 심사, 사용자 심사의 결과를 종합 검토․심의하며, 이에 근거하여 최종적으로 품질마크 인증여부를 확정하는 인증위원회 평가도 행해진다. 이러한 일련의 인증심사방법 및 평가내용을 간략히 정리하면, <표 5>와 같다.

<사용자 과업(Task) 모형이란?>

사용자 과업(task) 모형이란 해당 사이트 내에서 사용자의 과업 달성 여부를 접근성 준수 여부로 평가하는 방식으로서, 사용자 목표설정 단계, 사용자 과업수행 단계, 사용자 만족 단계로 구분하고 이와 관련된 주요 페이지를 선정․평가하는 방법을 일컫는다. 예를 들어, 아래 그림과 같은 구조를 가지고 있는 웹 사이트의 경우, 전문가나 사용자 심사를 위해서는 적어도 8개의 주요 페이지에 대한 접근성을 심층적으로 분석․평가해야 한다.

<주요 페이지 정의 및 사용자 과업 프로세스>

주요 페이지	정 의	중요성
메인페이지 (Main page)	웹 콘텐츠에 접근하기 위해 가장 처음 이용하는 페이지	초기 화면으로써 가장 자주 이용하고 중요한 페이지
랜딩페이지 (Landing page)	이메일, 배너, 즐겨찾기를 통해 방문할 경우, 가장 처음 이용하는 페이지	사용자 요구를 반영하고 있는 페이지
사이트맵페이지 (Sitemap page)	사이트 구조를 한 눈에 파악할 수 있는 페이지	메뉴 체계가 복잡하거나 처음 방문하는 홈페이지인 경우에 자주 이용하는 페이지
카테고리메인페이지 (Category Main page)	주요 서비스에 대한 정보를 체계적으로 소개하는 페이지	사용자 요구를 구체화시킬 수 있는 페이지
내용 페이지 (Story page)	사용자가 원하는 내용을 제공하는 최종 목적지 페이지	사용자 요구를 실질적으로 만족시키는 페이지
검색 결과 페이지 (Search Result page)	검색 결과를 출력하는 페이지	사용자의 문제 해결을 손쉽게 해결시킬 수 있는 페이지
기능 페이지 (Functional page)	사용자 과업을 위해 기능 제어가 이루어지는 페이지	사용자 조작이 요구되는 페이지
개인화 페이지 (Personalized page)	개별화와 맞춤화에 의해 편의 기능을 제공하는 페이지	사용자 과업의 효율성을 제고하는 페이지

<표 5> 웹 접근성 인증심사 방법 및 내용

심사 방법	심사 내용
자동평가 (사전심사평가)	● KADO-WAH 2.0을 통한 자동평가 실시 ● 자동평가를 통과한 경우 전문가 심사와 사용자 심사 진행
전문가 심사	● ‘웹 접근성 지침’(뒤에서 상세히 언급함)을 기준으로 전반적인 웹 접근성 수준을 확인점검 평가(수동평가)
사용자 심사	● 장애인 및 고령자 등에 의한 웹 접근성 사용자 심사
인증위원회 심사	● 전문가 및 사용자 심사의 결과를 종합 검토․심의 ● 웹 접근성 준수 및 인증 여부 확정, 인증마크 발행 승인 요청

2.2.3. 인증심사 범위

웹 접근성 품질마크 인증을 위한 인증심사 범위는 인증심사결과의 정확성과 신뢰성을 확보하면서 동시에 인증심사의 시간적․인적 효율성과 효과성을 최대한 담지할 수 있는 범위 내에서 행하는 것이 보다 실제적이라 할 수 있다. 이를 위해 웹 접근성 품질마크 인증은 해당 웹 사이트 전체를 대상으로 부여하되 인증심사 범위는 위에서 언급한 인증심사 방법에 따라 다음과 같이 달리 적용한다.

첫째, KADO-WAH 2.0을 통한 자동평가는 해당 평가툴을 이용하여 자동으로 평가가 가능한 지표나 체크리스트에 한하여 평가를 하되, 평가 범위는 해당 웹 사이트 전체로 한다(전수조사).

둘째, 전문가 심사는 자동평가툴을 이용한 자동평가와는 달리 웹 사이트의 구조나 내용뿐만 아니라 해당 내용 등에 대한 소스까지도 조사를 해야 하기 때문에 상당한 정도의 시간적, 비용적, 인적 자원이 필요하다. 이러한 제약으로 인해, 인증을 받고자 하는 웹 사이트의 규모 등에 따라 상당한 차이가 있기는 하지만, 해당 웹 사이트에 대한 전수조사를 실시하기가 거의 불가능하다. 따라서 전문가 심사는 본격적인 조사를 하기 전에 먼저 자동평가 결과와 웹 사이트의 구조, 유형 등에 대한 분석을 통해 해당 웹 사이트에서 사용자들이 주로 행하는 중요 과업을 중심으로 한 사용자 과업 모형을 추출, 당해 모형을 대표하는 페이지를 선별한 후 해당 페이지에 대한 접근성 준수여부를 심층적으로 분석․평가하는 것을 원칙으로 한다.

셋째, 사용자 심사의 경우에도, 비록 전문가 심사의 경우처럼 해당 웹 사이트의 구조나 내용, 소스에 대한 조사를 하지는 않지만, 웹 사이트의 규모나 주요 평가자가 장애인이나 고령자라는 인지적, 신체적, 정서적인 특성 때문에 전수조사를 하는 것은 현실적으로 불가능하다. 따라서 사용자 심사도 해당 웹 사이트의 구조나 주요 서비스 내용, 특성 등을 고려하여 웹 접근성의 측면에서 어떤 장애를 지닌 사용자가 가장 곤란을 겪을 수 있는지를 파악한 후, 해당 장애를 지닌 사용자와 고령자를 중심으로 전문가 심사시 사용한 방법과 동일한 사용자 과업 모형을 통해 추출된 주요 페이지를 중심으로 평가하는 것을 원칙으로 한다.

<표 6>은 심사형태별 심사주체와 심사범위, 그리고 여러 번의 시뮬레이션을 통해 측정된, 심사자 1인이 앞의 인증심사기준에 근거하여 특정 웹 사이트의 접근성을 심사하는 데 소요될 것으로 예상되는 시간을 보여준다.

<표 6> 인증심사 심사형태별 심사주체, 심사범위 및 소요예상시간

심사형태	심사 주체	심사 범위	소요예상시간(1인)
자동평가	KADO	전 체	1시간 (대상지표수 판별)
전문가 심사	3～5인의 전문가	사용자 과업수행 모형 추출 페이지(30페이지 내외)	1개 Site당 5시간 (심사계획 및 보고서 작성 제외)
사용자 심사	사용성 전문가 3인 (유관단체)	사용자 과업 수행에 관련된 페이지	1인당 5시간 (심사계획 및 보고서 작성 제외)
인증심의	인증위원회	심사결과 보고서	site 당 1시간

2.2.4. 인증심사 절차

<그림 3>은 웹 접근성 품질마크 인증심사 전체 과정을 보여준다.

<그림 3> 웹 접근성 품질마크 인증심사 절차

이러한 일련의 과정에서 웹 접근성 품질마크 인증을 받기 위해 누가, 언제, 무엇을, 어떻게 하여야 하는가를 각 과정별로 기술하면 다음과 같다.

(1) 인증신청 및 접수, 심사료

신청인이 사전에 KADO-WAH 2.0과 같은 웹 접근성 자동화 평가툴을 이용하여 당해 웹 사이트에 대한 자체 평가를 행하거나 인증기관과의 인증 상담을 통해 품질마크 인증을 받기 위한 적절한 수준의 접근성이 제공되고 있다고 판단되면 인증기관에 정식으로 인증을 신청할 수 있다. 인증 신청시 신청인은 웹 접근성 품질마크 인증신청서와 사전설문지(부록의 [별지 2]와 [별지 3]) 및 법인사업자 등록증을 온라인(http://webfree.kado.or.kr)을 통해 인증위원회에 제출하여야 한다. 인증심사는 매년 2회까지(전반기와 후반기) 신청할 수 있다. 인증심사 심사료는 2007년까지는 무료이며, 2008년부터는 유료로 전환할 계획이다.

웹 접근성 품질마크 인증신청 접수증
신 청 인	기 관 명		성명(대표자)
	법인사업자 등록 번호		전화번호
	주소(소재지)
인증신청 접수번호
인증신청의 구분		( ) 인증심사(처음으로 마크인증 신청) ( ) 재심사(변동사항에 따른 재인증 심사) ( ) 갱신심사(유효기간의 만료로 마크인증 연장)
위 신청인의 웹 접근성 품질마크 인증심사신청을 접수하였음을 확인함 200 년 월 일 확인자 소속:___________________ 이름:___________________

인증기관은 신청서류를 접수하고 위의 <표 7>과 같은 인증신청 접수증을 교부한 후 신청 서류의 기재사항을 검토하고 미비점이 있을 경우 보완을 요청한다. 보완요청을 받은 신청인은 요청받은 날로부터 10일 이내에 이를 보완하고 신청서류를 재구비하여 신청하여야 한다.

(2) 심사단계

심사단계에서는 인증기관이 심사 계획을 수립하여 <표 8>의 인증심사계획서를 신청인에 공문으로 통보하고 계획에 따라 사전심사와 인증심사를 수행한다.

웹 접근성 품질마크 인증심사 계획서
접 수 번 호
기 관 명
주소 (소재지)
인 증 범 위
인증심사 종류	□ 인증심사 □ 재심사 □ 갱신심사
인증심사기간	□ 사전심사: 200 년 월 일 ～ 200 년 월 일
인증심사기간	□ 인증심사: 200 년 월 일 ～ 200 년 월 일
인증심사팀 구성	심사팀장: 심 사 원: 심 사 원: 심 사 원: 심 사 원: 심 사 원:
위와 같이 귀사의 인증심사 계획을 통보합니다. 200 년 월 일 한국정보문화진흥원장

가. 사전심사

사전심사는 신청인이 제출한 서류의 적절성과 신청 사이트의 접근성 수준에 대하여 위원회가 지정한 자동평가도구(KADO-WAH 2.0)를 이용하여 평가한다. 평가 결과, 자동평가 인증기준(자동평가도구를 이용하여 평가할 수 있는 지표에 대하여 웹 접근성 지침을 90% 이상 준수)을 통과하지 못한 경우 인증심사는 중단되며, 위원회는 그 중단 사유를 신청인에게 통보한다.

나. 사용자 심사와 전문가 심사

해당 웹 사이트가 자동평가도구에 의한 사전심사 결과 적합하다고 판정된 경우에만 사용자 심사와 전문가 심사를 진행할 수 있다.

사용자 심사는 웹 사이트 사용자 중에서 웹 접근성을 평가할만한 일정한 요건을 갖춘 장애인, 고령자 등으로 심사원을 구성하며, 평가를 위하여 스크린 리더(screen reader)와 같은 보조공학 장치들을 활용하여 사용자 과업 모형에 근거하여 추출된 페이지에 대하여 접근성 및 사용성을 평가한다.

또한, 전문가 심사를 위하여 웹 접근성 분야의 전문가로 구성된 심사원 Pool을 구성․운영하며, 심사는 이 심사원 Pool에서 필요한 수의 인원을 뽑아 실사팀을 구성․운영한다. 이미 언급한 바와 같이, 전문가 심사도 시간이나 비용, 인적 자원의 제약 때문에 웹 사이트 전체에 대한 조사(전수조사)를 하지 않고 사용자 검사와 마찬가지로 사용자 과업 모형에 의해 추출된 웹 페이지를 중심으로 심사한다.

사용자 심사와 전문가 심사를 위한 모든 심사원들은 각 인증심사 전에 심사를 통해 알게 된 신청인의 정보에 대하여 비밀을 유지하겠다는 서약서를 제출한다(<표 9>참조).

서 약 서(심사원용)
심사기간: 200 년 월 일 ～ 200 년 월 일 신 청 인: 본인은 위 신청인에 대한 한국정보문화진흥원에서 수행하는 정웹 접근성 품질마크 인증업무를 수행함에 있어 관련 법령을 성실히 준수하고 인증업무 수행과정에서 취득한 사실과 신청인의 제출물을 인증업무 수행 이외의 용도로 사용하거나 유출 또는 공개하지 아니할 것이며 위의 사항을 위반할 경우 관련 법규에 따라 어떠한 처벌도 감수할 것을 서약합니다.
소속	성명	주민등록번호	서명





제출자 : 심사팀장 (인)
- 웹 접근성 품질마크 인증심사 구칙(한국정보문화진흥원, 2007.1.12 제정) - 제23조 【비밀유지 등】①품질마크 인증업무에 종사하거나 종사하였던 자는 그 직무상 알게 된 비밀을 타인에게 누설하거나 직무상 목적 외에 사용하여서는 아니된다. 다만, 다른 법률에 특별한 규정이 있는 경우에는 그러하지 아니하다.

사용자 심사와 전문가 심사의 순서는 다음과 같다.

① 사전설문지 및 사전심사 평가결과보고서 검토

② 웹 사이트 분석을 통한 심사계획 수립

③ 웹 사이트 사용성 심사 및 개별 심사 결과보고서 작성

④ 심사결과보고서 종합(심사기준 통과여부 제시) 및 인증위원회에 보고

(3) 인증단계

인증단계에서는 인증위원회를 개최하여 인증적합 여부를 심의하고 적합일 경우 인증기관이 인증서를 발급한다.

가. 인증위원회 개최

사전심사와 사용자 심사, 전문가 심사 등을 통해 심사대상 웹 사이트에 대한 모든 심사가 완료되고 각 심사주체로부터의 심사결과보고서가 모두 수합되면, 인증위원회는 제반 인증심사 결과보고서 등을 검토․심사한 후 해당 인증대상에게 품질마크를 부여할 것인지의 여부를 심의․의결하고, 심의 결과를 인증기관의 장에게 제출한다. 인증위원회 위원도 심사원들과 마찬가지로 심의과정을 통해 알게 된 정보에 대한 비밀유지 서약을 한다.

인증위원회는 해당 웹 사이트에 대한 품질마크 인증여부를 판정할 때 다음과 같은 기준에 의해 행한다.

첫째, 제반 심사결과 등을 토대로 판정하되 판정은 ‘적합’ 또는 ‘부적합’(Pass-Fail system)으로 하며, 판정 결정은 아래 <표 10>에 제시된 판정 기준에 의거하여 결정한다.

<표 10> 웹 접근성 품질마크 인증여부 판정기준

항 목	판 정 기 준	척도
지 표	중요도(priority)에 따른 준수율	적합/부적합
지 침	모든 지표의 적합 판정 여부
인 증	자동평가, 전문가심사, 최종심의 평가의 적합판정 여부

둘째, 적합 판정을 받기 위해서는 중요도별 품질을 접근성 관점에서 정보의 제공, 사용성, 시스템 구현, 운영 등으로 구분하고 각 품질별 평균값을 기준으로 산정한 지표별 준수율 기준을 충족해야 한다(<표 11> 참조).

<표 11> 웹 접근성 품질마크 인증을 위한 지표별 적합 판정 기준

(단위: %)

품 질 중요도	정보품질 Information	사용품질 Use	시스템품질 System	운영품질 Operating	종합
중요도 1	100	90	80	90	90
중요도 2	80	90	50	60	70
중요도 3	70	80	30	20	50

<표 12>는 위의 <표 11>에서 설정한 지표별 적합 판정 기준에 대한 성능기준과 해당 기준에 대한 근거를 보여준다.

<표 12> 중요도별 인증기준(성능기준)과 기준근거

중요도	성능기준	기준근거
중요도 1 (의무요건)	각 지표별 웹 접근성 지침을 90% 이상 준수해야 함	웹 접근성 품질마크 심사기준에 근거함. “웹 접근성 중요도에 따른 가중치를 적용하여 각 지표별 필수요건(P1)은 반드시 90%이상 준수해야 함”
중요도 2 (권고요건)	각 지표별 웹 접근성 지침을 70% 이상 준수해야 함	웹 접근성 품질마크 연구반 전문가 다중 투표 결과에 근거함. “우수한 웹 접근성 품질을 보장하기 위해 각 지표별 권고요건(P2)은 70%이상 준수해야 함”
중요도 3 (권장요건)	각 지표별 웹 접근성 지침을 50% 이상 준수해야 함	웹 접근성 품질마크 연구반 전문가 다중 투표 결과에 근거함. “일정 수준 이상의 웹 접근성 품질을 보장하기 위해 각 지표별 권장요건(P3)은 50%이상 준수해야 함”

셋째, 심사대상 웹 사이트가 웹 접근성 품질마크 인증을 받기 위해서는 사전심사, 전문가심사, 사용자심사 및 인증위원회의 심사에서 모두 적합 판정을 받아야 한다.

한편, 심의․의결 결과, 인증심사 의뢰 기관이 최종적으로 인증심의를 통과하지 못한 경우, 인증위원회는 의뢰기관에 인증탈락사유와 함께 인증심사결과를 통보해야 한다. 최종 인증을 받지 못한 기관은 수정․보완 후 다음 심사접수 기간에 이전과 동일한 방식으로 재심사를 의뢰할 수 있다.

나. 인증 결과 통보

인증기관의 장은 사전검사 결과보고서, 실무위원회의 인증심사 결과보고서, 인증위원회의 심의결과서, 심의의견서 등을 바탕으로 인증적합 여부에 따라 <표 13>과 같은 인증심사결과 통보서를 신청인에게 보낸다.

웹 접근성 품질마크 인증심사결과 통보서
접 수 번 호
심 사 구 분		□ 인증심사 □ 재심사 □ 갱신심사
심 사 범 위
신 청 인	기관명		성명(대표자)
	법인사업자 등록번호		전화번호
	주소(소재지)
인증 결과
결과 사유
기 타
위와 같이 인증결과를 통보합니다. 년 월 일 한국정보문화진흥원장 (서명 또는 인)

아울러, 인증기관의 장을 대신하여 웹 접근성 품질마크 인증 사무국은 품질인증서에 신청인의 인증 유지․발전과 개선 등 웹 접근성 품질마크 인증에 관한 제반 준수사항을 명시한 ‘웹 접근성 품질마크 인증서’와 웹 접근성 인증마크를 교부한다.

(4) 사후관리 단계

가. 수시 점검

인증기관은 인증을 받은 기관이 웹 접근성 품질마크 인증기준을 성실히 준수하고 있는지 등을 점검하기 위하여 해당 기관의 웹 사이트를 인증심사와 동일한 방법과 과정 등을 거쳐 수시로 점검한다. 주요 수시 점검사항은 다음과 같다

● 웹 접근성 품질마크 인증제의 운영과정에서 웹 접근성에 심각한 문제가 발생했는지의 여부 점검

● 인증서 사용 및 홍보에 있어서 인증 범위를 적절하게 활용하고 있는지 여부 점검

● 인증심사 이후 웹 접근성 품질마크 인증제를 운영·유지하는 과정에서 발생한 변경사항을 잘 관리하고 있는지를 점검

나. 인증의 취소

인증을 취득한 조직이 허위 사실이나 부정한 방법으로 인증을 받거나, 인증의 범위나 유효기간을 허위로 표시하거나 인증서를 부적절하게 사용한 경우, 그리고 인증에 적절하게 웹 사이트를 유지하지 못하는 경우 인증기관의 장은 이를 위반한 기관에 대해 웹 접근성 품질마크의 인증을 취소한다. 또한 인증취득 조직이 협조하지 않아 인증의 적합성을 판단할 수 없는 경우에도 그 인증을 취소할 수 있으며, 인증 취소는 인증기관장이 인증 취소를 통보함으로써 이루어진다.

다. 갱신심사

갱신 심사는 인증 유효기간을 연장하기 위한 심사로서 인증을 취득한 조직이 유효기간 만료일 이전에 갱신심사를 신청한 경우 수행한다. 갱신 심사의 내용과 절차 등은 인증심사와 동일하다.

끝으로, 지금까지 살펴본 웹 접근성 품질마크 인증절차별 수행 주체 및 산출물들을 간략히 정리하면 다음 <표 14>와 같다.

<표 14> 인증절차별 수행주체 및 산출물

단 계		수행주체				산출물
단 계		사무국	심사팀	위원회	신청자	산출물
1	인증심사 신청접수	●			●	인증심사 신청서
2	사전심사(자동평가)	●				사전심사 결과서
3	심사계획수립	●			●	사이트 분석서
4	전문가 심사		●			전문가 심사 보고서
5	사용자 심사	●	●			사용성 심사 보고서
6	인증심의			●		최종심의 결과
7	품질마크 부여	●				인증서, 품질마크

3. 웹 접근성 세부 인증기준 해설 및 예시

3.1. 인식의 용이성

항목 1.1 텍스트가 아닌 콘텐츠의 인식

1-1-1. 모든 텍스트가 아닌 콘텐츠에는 대체 텍스트가 제공되고 있는가?

■ 비텍스트가 내용 전달을 위해 제공되었다면 반드시 대체 텍스트를 제공해야 한다.

■ 비텍스트가 기능적 요소로 사용되었다면, 기능을 이해할 수 있는 대체 텍스트를 제공해야 한다[예: 이미지로 만든 메뉴 버튼은 메뉴명을, 이미지로 만든 컨트롤 버튼(확인, 검색 등)은 기능을 알 수 있도록 대체 텍스트를 제공해야 한다.].

■ 이미지 텍스트(텍스트로 만든 이미지)만으로 내용을 전달하는 방법은 가능한 사용하지 않는 것이 바람직하다. 만약 간단한 내용을 이미지 텍스트로 제공했다면, 이미지 텍스트로 표현한 내용을 대체 텍스트로 제공해야 한다.

■ 여러 개의 이미지가 합쳐진 이미지는 중요하거나 크기가 큰 이미지에 대체 텍스트를 제공해야 하고 나머지 이미지는 대체 텍스트를 제공하지 않아야 한다.

■ 여러 이미지맵으로 만들어진 이미지는 링크된 영역에 대체 텍스트를 제공하되, 전체 이미지에 대한 대체 텍스트와 링크된 부분 영역에 대한 대체 텍스트를 각각 제공해야 한다.

1-1-2. 대체 텍스트의 내용은 적절하게 제공되고 있는가?

■ 긴 설명은 불편을 야기 시킬 수 있으므로 대체 텍스트는 최대한 간단명료하게 작성해야 한다.

■ 가장 중요한 단어를 제일 먼저 위치하도록 대체 텍스트를 구성해야 한다.

■ 배너와 같이 이미지에 링크가 걸려 있는 경우, 이미지의 모양에 대한 설명이 아니라 이미지가 제공하는 의미적인 내용을 대체 텍스트로 제공해야 한다.

■ 움직이는 GIF 파일(Animated Gif)은 전달하고자 하는 정보를 대체 텍스트로 제공하므로, 가장 중요한 장면의 내용이나 전체 내용을 요약하여 대체 텍스트로 제공해야 한다.

■ 비텍스트가 장식적인 효과로 제공되었다면, 대체 텍스트를 공난으로 제공해야 한다(예: alt=" ").

■ 약도, 그래프, 차트 등 많은 내용을 담고 있는 이미지는 짧게 요약된 대체 텍스트를 제공해야 한다.

■ 만약 짧게 요약된 대체 텍스트만으로 정보 전달이 어렵다면, 간단한 대체 텍스트를 제공하되 자세한 설명을 위해 별도 페이지를 만들고 longdesc 속성 또는 D-Link 기법을 이용하여 연결시켜야 한다.

■ longdesc 속성이나 D-Link 기법을 사용하여 제공되는 대체 페이지는 최대한 간단명료하면서 원본 콘텐츠의 내용을 충분히 전달할 수 있도록 작성되어야 한다.

■ 원본 콘텐츠가 업데이트될 경우에는 대체 페이지도 함께 업데이트되어야 한다.

■ 조직도, 사이트 등 등 계층 구조를 표현해야 하는 그림은 간단한 대체 텍스트를 제공하되, 보다 정확한 설명을 위해 별도 페이지를 만들고, longdesc 속성 또는 D-Link 기법을 이용하여 연결시켜야 한다. 이때 계층 구조의 표현을 위해 <ul>, <dl>, <ol>이나 <h1>, <h2>, <h3> 등의 마크업을 사용해야 한다.

1-1-3. 정보가 있는 콘텐츠를 배경이미지에 사용하는 경우가 없는가?

■ 화면의 정보를 제공하는 콘텐츠 이미지를 배경 이미지로 사용해서는 안 된다.

■ 시각적인 효과를 위해서 이미지 대체 기법(image replacement technique)을 사용할 때에도 반드시 의미에 맞는 HTML과 텍스트를 표기 해 주어야 한다.

항목 1.2 영상 매체의 인식

1-2-1. 동영상 등의 시청각 멀티미디어 콘텐츠에 동기화된 자막이 제공되고 있는가?

■ 시청각 멀티미디어 콘텐츠에 자막을 제공해야 한다.

■ 시청각 멀티미디어 콘텐츠는 영상 자료와 자막을 동시에 접근해야만 그 내용을 이해할 수 있도록 구성되어선 안 된다.

■ 중요한 영상 콘텐츠는 별도로 텍스트 원고나 음성 설명을 추가해야 한다.

■ 제공된 자막은 사용자가 접근 가능한 형식이어야 하며, 사용자의 필요에 따라 조절할 수 있도록 해야 한다(예: Closed Caption).

■ 중요한 정보를 영상과 음성으로 제공할 경우, 별도의 텍스트 원고를 제공해야 하며, 이 텍스트 원고에는 추가적인 상황 설명이나 묘사가 포함되어야 한다.

■ 제공된 자막과 텍스트 원고는 영상이나 음성 자료에 동기화되어 제공되어야 한다.

■ 정보 전달을 음성에만 의존하지 않고, 음성 이외에 자막이나 원고를 제공해야 한다(음성만 있는 콘텐츠는 자막을 대신하여 텍스트 원고를 제공할 수 있다).

■ 오디오 방송(생방송)은 실시간 자막으로 처리해야 한다.

■ 풍부한 표현(Decoration)을 위해 제공된 음성 콘텐츠에 대해서는 별도의 대체 텍스트를 제공할 필요는 없다.

항목 1.3 색상에 무관한 인식

1-3-1. 색상으로 표현된 정보는 색상을 배제해도 원하는 내용을 전달할 수 있는가?

■ 정보 전달을 색상에 의존하지 않고 색상 이외에 명암이나 무늬, 또는 직접 텍스트로 표시하기 등 정보 전달을 위해 다른 표현 방법을 병행하여 사용해야 한다.

■ 구분하기 쉽고 읽기 편하도록 시각적 요소 간의 대비를 명료하게 처리해야 한다.

■ 여러 색상을 사용해야 하는 경우, 명도 대비가 낮은 색의 조합을 가급적 피해야 한다.

1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있는가?

■ 배경이미지나 배경색을 이용할 경우 텍스트나 콘텐츠의 색이 배경과 구분이 갈 수 있도록 충분한 대비를 가지고 있어야 한다.

■ 미적인 이유만을 고려하여 정보 전달을 위한 텍스트를 흐리게(밝은 회색의 텍스트) 해서는 안 된다.

1-3-3. 텍스트를 쉽게 읽을 수 있도록 충분한 크기로 제공되는가?

■ 약시자나 다양한 환경의 사용자도 텍스트를 인지할 수 있게 너무 작지 않은 적절한 크기로 텍스트가 제공되어야 한다.

■ 사용자가 브라우저나 보조 기기의 기능을 이용해서 텍스트 크기를 조절 할 수 있도록 상대단위 글자 크기를 이용해야 한다.

■ 사용자가 글자 크기를 변경하여도 내용을 충분히 인지할 수 있도록 화면이 깨지거나 내용이 겹치지 않아야 한다.

3.2. 운용의 용이성

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

2-1-1. 서버측 이미지맵을 사용하고 있지 않은가?

이미지의 ismap 속성을 이용하여 맵의 좌표를 서버측에서 처리하는 방식의 이미지 맵을 서버측 이미지 맵이라고 한다.

src="http://pcsi.go.kr//img/main_2005_07/quick_banner.gif" ismap="ism<a href="server-image-map.php">

</a>

서버측 이미지 맵은 포인팅 기기(마우스, 터치스크린 등)외의 기기로는 사용이 불가능하기 때문에 반드시 필요한 경우에만 사용하여야 하며, 서버측 이미지 맵을 사용하는 경우에도 키보드로 이용이 가능한 대체 콘텐츠를 제공하여야 한다.

항목 2.2 프레임 사용 제한

2-2-1. 불필요하거나 과도하게 많은 프레임을 사용하고 있지는 않은가?

과도하거나 불필요한 곳에 프레임을 사용할 경우 콘텐츠를 선형화하여 인식하는데 어려움이 따르기 때문에 되도록 프레임은 사용하지 않는 것이 좋다. 예를 들어, 브라우저 창의 주소를 고정하기 위해서 사용되는 프레임이나 뉴스 콘텐츠에 자주 사용되는 탭 형태의 콘텐츠를 구성하는 데, 각 콘텐츠를 개별 프레임으로 나누어 사용하는 것은 피해야 한다.

2-2-2. 각 프레임의 title속성은 적절하게 제공되고 있는가?

프레임을 사용할 때에는 각 프레임이 어떠한 역할을 하는지를 프레임 태그의 title속성으로 제공하여 프레임에 접근했을 때 손쉽게 프레임의 용도를 파악할 수 있게 해 주어야 한다. title속성에는 해당 프레임이 어떠한 콘텐츠를 나타내고 있는지를 알려주는 간단하고 명료한 표현을 사용해야 한다.

2-2-3. 프레임을 지원하지 않는 브라우저를 위한 접근 방법이 있는가?

<noframe>태그의 경우 의미 없는 ‘프레임이 지원되는 브라우저를 사용하시기 바랍니다.’와 같은 안내문보다는 각 프레임에 접근할 수 있게 프레임이 지원되지 않을 때 페이지를 이용할 수 있는 의미 있는 내용으로 구성되어야 한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<head>

<title>frames</title>

</head>

</frameset>

<body>

<ul>

</ul>

</body>

</noframes>

</frameset>

</html>

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

2-3-1. 깜빡이는 콘텐츠를 사용할 경우, 이에 대한 경고 및 제어방안을 제공하고 있는가?

초당 4～59번 깜빡이는 콘텐츠를 통상 깜빡이는 콘텐츠라고 칭하는데, 이러한 깜빡임은 광과민성발작을 일으킬 수 있기 때문에 사용을 피해야 한다. 또한 불필요하게 콘텐츠에 움직임을 줄 경우 사용성이나 콘텐츠의 인식도가 떨어지기 때문에 글자가 흐르는 콘텐츠나 과도한 움직임을 가지고 있는 내비게이션 등은 피해야 한다.

깜빡이는 콘텐츠를 이용해야 하는 경우에는 깜빡이는 콘텐츠로 이동하기 전에 깜빡이는 콘텐츠가 있다는 것을 사용자에게 미리 알려주고, 콘텐츠 페이지에서도 사용자가 깜빡임을 중지할 수 있는 수단을 제공해야 한다.

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

2-4-1. 키보드만으로 모든 콘텐츠를 제어할 수 있는가?

웹페이지의 모든 링크와 기능은 키보드만으로도 이용할 수 있어야 한다. 기본적인 키보드의 이용 가능성은 적절한 HTML을 사용하여 기능들을 구현하게 되면 보장이 된다. 링크에는 <a>태그를 사용하고 사용자 입력을 받아야 하는 경우에는 <form>과 인풋 컨트롤을 적절하게 사용하면 키보드로 이용하는 데 큰 무리가 없다. 또한 HTML의 문법을 올바르게 작성하는 것도 중요하다. HTML오류를 포한함 페이지의 경우 페이지가 올바르게 보이지 않을 수도 있고 키보드 내비게이션의 순서가 적절하지 못하게 될 수도 있다. 적절한 HTML을 사용하지 않고 HTML로 구현할 수 있는 기능을 스크립트를 이용한다든가 하는 방식으로 다른 방법을 많이 사용하게 되면 결과적으로 키보드로의 이용에 제약이 생길 수 있다.

3.2.1.1. 목록상자(<select>)와 온체인지(onchange) 이벤트

목록상자와 온체인지 이벤트를 이용해서 기능을 구현할 경우 키보드로 기능을 이용할 수 없게 된다. 마우스로는 원하는 항목을 선택하는 순간 온체인지 이벤트가 발생하지만 키보드로는 목록을 방향키로 조작할 때마다 온체인지 이벤트가 발생하여 원하는 항목을 선택할 수 없게 된다. 목록상자로 항목을 선택하는 경우 스크립트에 의존한 기능을 제공하지 않고 항목을 선택한 후 버튼을 클릭하였을 경우 기능이 작동되도록 제작해야 한다.

3.2.1.2. 마우스 포커스(Focus)시에 변경되는 콘텐츠

마우스 오버나 키보드 포커스에 의해서 현재의 상황이나 급격한 콘텐츠의 변화가 있어서는 안 된다. 예를 들면, 마우스 포커스에 의해서 화면을 덮는 광고 배너가 나온다든가 다른 페이지로 이동한다든가 공지사항 목록 리스트가 뉴스 리스트로 바뀐다든가 하는 식으로 현재 상태의 급격한 변화가 생기는 것들이다. 이러한 페이지의 변화는 클릭이나 엔터키를 누르는 것과 같은 사용자의 동작에 의해서 발생되어야 한다. 단, 상단 메뉴와 같이 마우스를 올렸을 경우 하단 메뉴가 나오는 것은 주요 콘텐츠나 상황의 변화가 아니기 때문에 허용된다.

항목 2.5 반복 내비게이션 링크

2-5-1. 반복되는 링크가 많은 페이지를 효율적으로 이용하기 위한 스킵 내비게이션(skip navigation) 링크가 제공되고 있는가?

콘텐츠를 선형화하여 인식할 경우 상단의 내비게이션은 매 페이지에서 반복되기 때문에 이를 건너뛸 수 있는 스킵 내비게이션 기능을 제공해 주어야 한다. 스킵 내비게이션은 HTML코드 상에 콘텐츠로의 앵커를 제공하고 CSS로 이를 감추어 줌으로써 구현할 수 있다.

가. HTML

<ul>

</ul>

</div>

나. CSS

#accessibility {

display: none;

}

2-5-2. 길이가 긴 콘텐츠를 효과적으로 이동할 수 있는 수단이 있는가?

길이가 긴 콘텐츠는 적절한 논리적 절로 나누어서 각 콘텐츠 절의 내용을 파악할 수 있게 하고, 각 절을 이동하는 데 있어서 불편함이 없게 해야 한다. 콘텐츠의 상단에 각 콘텐츠의 제목과 각 콘텐츠로 이동할 수 있는 페이지 내 링크를 제공하고, 각 절에는 콘텐츠 요약으로 이동할 수 있는 페이지 내 링크를 제공하는 방식으로 구현할 수 있다.

2-5-3. 사이트 맵(site map)을 제공하고 있는가?

사이트 맵은 웹 사이트의 전체의 콘텐츠 규모와 구성을 파악할 수 있는 좋은 정보가 된다. 사이트 맵을 제공할 때에는 사이트 전체의 내용을 일목요연하게 정리해서 사용자가 찾는 정보를 빠르게 찾을 수 있게 해 주는 것이 중요하다.

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

2-6-1. 이용에 시간제한이 있는 콘텐츠의 경우 경고 및 시간조절 기능을 제공하는가?

시간에 따라서 자동적으로 변하는 콘텐츠의 경우 이를 사용자에게 미리 알리고 이 시간제한 기능을 사용자가 스스로 제어할 수 있게 해 주어야 한다. 예를 들어, 팝업창으로 메시지를 제공하고 5초가 지난 후에 자동으로 닫히는 경우 메시지 내용을 사용자가 5초 안에 내용을 이해하지 못할 경우 사용자가 콘텐츠를 이해하지 못하게 되기 때문에 사용자가 시간을 제어할 수 있는 기능을 제공해 주어야 한다.

2-6-2. 팝업창이 불필요하게 사용되고 있지 않은가?

팝업창으로 구현하지 않아도 되는 콘텐츠를 불필요하게 팝업창으로 구현하는 경우를 피해야 한다. 그리고 웹사이트의 첫 페이지에서 사용자의 입력 없이 자동으로 발생하는 팝업을 사용하는 경우가 있는데, 이러한 팝업창의 사용도 피해야 한다.

3.3. 이해의 용이성

항목 3-1. 데이터 테이블 구성

3-1-1. 테이블에 summary 속성을 제공하고 있으며, summary 내용은 이해하기 쉬운가?

데이터 테이블(data table)이란 표로 나타내기에 적당한 논리적인 정보들(예를 들면 연도별 예산표 또는 일주일 식단표 등)을 머리글(header) 부분과 일반 내용 부분으로 나누어 표현한 표를 말하며, 배치용 테이블(layout table)과 대조된다.

데이터 테이블을 비시각적인 웹 표시 장치가 해석하기 위해서는 여러 가지 부가적인 내용을 제공해야 하는데 그 중에 하나가 표 전체 내용을 요약한 내용을 담는 summary 속성이다. 이 요약 내용은 특히 테이블이 복잡한 중첩 구조를 가지고 있어 비시각적으로 이해하기 어려울 때 칸들의 관계를 이해하는 데에 도움을 준다. 일반적인 브라우저에서 표현되지 않기 때문에 시각적으로는 아무런 영향을 주지 않는다.

</table>

3-1-2. 테이블의 제목을 효과적으로 제공하고 있는가?

데이터 테이블에 적절한 제목을 붙여줌으로써 앞으로 나올 정보가 무엇인지 예측할 수 있다. 테이블의 제목은 <caption> 요소 사이에 넣는다. 이 제목은 시각적인 브라우저에서도 보통 표 위쪽에 표시된다. <caption>을 통해 표현된 제목의 모양을 바꿀 때에는 스타일 시트를 이용한다.

</table>

표의 제목을 아래와 같이 title 속성이나 아예 표 바깥의 머리글(heading)을 이용해서 다른 방법으로 표현할 수도 있다.

</table>

<table>

</table>

3-1-3. 데이터 테이블의 구조를 표현하는 태그를 적절히 사용하고 있는가?

데이터 테이블 안의 내용들은 다른 칸의 제목을 나타내는 머리글 부분과 일반 내용 칸으로 나눌 수 있다. 머리글을 나타내기 위해 사용하는 요소로 <thead>, <tfoot>, <th>가 있다. 데이터 테이블의 가로줄(row)은 반복되는 머리글을 위한 <thead>, 반복되는 꼬리글을 위한 <tfoot>, 나머지 부분을 위한 <tbody>를 이용하여 다음과 같이 크게 세 개의 그룹으로 나눌 수 있다.

<table>

<thead>

</thead>

<tfoot>

</tfoot>

<tbody>

</tbody>

<tbody>

</tbody>

</table>

3-1-4. 테이블 내용에 있어 제목(헤더)과 데이터를 구조적으로 구분하고 있는가?

표의 머리글과 내용 칸을 바르게 짝지어야 한다. 이렇게 함으로써 비시각적인 방법으로 표를 읽어야 하는 사용자들이 표의 내용을 바르게 이해할 수 있다. 짝짓는 첫 번째 방법은 머리글에 해당하는 <td>나 <th> 요소에 그 머리글이 어디에 영향을 주는지 scope속성을 붙여서 표시하는 것이다. 두 번째 짝짓기 방법은 머리글을 나타내는 <td>나 <th>에 고유한 id 속성 값을 주고, 그 머리글과 짝지어지는 내용 칸을 나타내는 <td>에 id 속성 값과 동일한 headers 속성 값을 주는 것이다. 아래에는 동일한 표를 두 가지 짝짓기 방법으로 코딩한 사례이다.

구분	중간고사	기말고사
김철수	50	60
박영희	70	80

<thead>

<tr><th>구분

<th scope="col">중간고사

<th scope="col">기말고사

</thead>

<tbody>

<tr><th scope="row">김철수

<td>50

<td>60

<tr><th scope="row">박영희

<td>70

<td>80

</tbody>

</table>

<thead>

<tr><th>구분

<th id="midterm">중간고사

<th id="final">기말고사

</thead>

<tbody>

<tr><th id="kim">김철수

<td headers="midterm kim">50

<td headers="final kim">60

<tr><th id="park">박영희

<td headers="midterm park">70

<td headers="final park">80

</tbody>

</table>

3-2. 페이지의 논리적 구성

3-2-1. 의미에 맞는 적절한 HTML태그를 사용하고 있는가?

(1) 모든 문서마다 문서의 제목(<title>)이 존재하고, 문서의 제목은 문서의 특성을 잘 나타내도록 간단명료하게 기술되어야 한다.

웹 페이지를 구성하는 여러 페이지들이 각 페이지의 특성을 가장 잘 나타내는 고유한 제목을 가져야 한다. 상위 페이지와 하위 페이지, 또는 같은 수준의 하위 페이지들이 서로 다른 페이지인데 같은 제목을 가지고 있어서는 안 된다. 또, 제목에 들어가는 내용은 “####”, "≪≪≪≪" 문자와 같이 시각적인 꾸밈과 “~에 오신 것을 환영합니다.”와 같이 불필요한 말을 배제하고 간결하게 작성되어야 한다.

(2) 제목(<h1>~<h6>), 문단(<p>), 목록, (<ul>, <ol>, <dl>) 등을 나타내기 위한 적절한 HTML 태그를 사용해야 한다.

한 페이지 내에서 가장 큰 제목에 해당하는 글은 <h1>으로, 두 번째 수준의 제목은 <h2>로 나타내어 HTML 태그가 페이지의 구조를 잘 반영하도록 한다.

내용으로 구분되는 문단을 표현하기 위해서는 강제적인 줄바꿈(<br/>)을 사용하지 말고 문단의 시작에 <p>를 넣고 문단의 끝부분에 </p>를 넣어서 의미적으로 ‘문단’이라는 것을 표시해준다.

동일한 위계(hierarchy)를 갖는 여러 개의 요소가 연속해서 나올 때에 ‘’, ‘■’, ‘․’, ‘○’와 같은 임의의 문자나 그림을 불릿(bullet)을 표시하기 위해 본문에 넣는 대신 목록을 나타내는 HTML 마크업을 사용한다. 순서가 없는 목록에는 <ul>가 <li>를, 번호를 매겨야 하는 순서가 있는 목록에는 <ol>과 <li>를, 보통 두 개씩 짝지어지는 목록에는 <dl>과 <dt>, <dd>를 사용한다.

<ul>

</ul>

<ol>

<li>뒤로 밀려난 팩을 다시 엄지와 검지를 이용해 앞으로 잡아당긴다.</li>

<li>잡아당기면서 접착 부분이 뜯어지면 우유를 마실 수 있는 구멍이 생긴다.</li>

</ol>

<dl>

<dd>접근성은 일반적으로 장애인이 접근 가능한 정도를 지칭하는 말이다.</dd>

<dd>콘텐츠의 상호 운용성을 확보한다는 것은 하나의 콘텐츠가 여러 가지의 웹 표시 장치에 의해 콘텐츠가 원래 의도한 대로 동작하도록 만드는 것이다.</dd>

</dl>

(3) 디자인 요소를 CSS를 사용하여 분리해야 한다.

HTML에 표현 요소(예를 들어, <font>, <br>, 레이아웃용 <table>, <marquee> 등)를 섞어 쓸 경우 구조적인 것과 디자인이 섞이게 되어 제작과 유지 보수가 어려워지며, 비시각적인 웹 표시 장치를 사용할 때에 시각적인 요소들이 문서의 내용과 구조를 이해하는 데에 방해 요소가 된다. 따라서 문서의 순수한 구조와 의미를 나타내는 요소를 제외한 모든 꾸밈 요소(예를 들면, 색깔, 글꼴의 크기, 그림의 위치, 여백, 줄 간격, 음성의 크기, 빠르기, 문단의 들여쓰기 정도, 배경 그림, 상자의 크기, 선의 두께 등)는 별도의 스타일 시트(CSS, Cascading Style Sheet)로 분리해야 한다. 이렇게 함으로써 더 많은 사용자들과 더 많은 웹 표시 장치에서 웹에 접근하는 것이 쉬워진다. 또, 동일한 문서를 사용자의 장애나, 선호도에 따라 다른 모양, 디자인으로 전달하는 것이 가능해지고, 거꾸로 여러 문서에 걸쳐 동일한 디자인 유형을 일관되게 적용하는 것도 가능해진다.

(4) 스타일 시트 기능을 해제하여도 콘텐츠를 이해할 수 있어야 한다.

스타일 시트는 문서의 보이는 모양만을 결정하는 것이며, 이 문서의 모양에 의해 중요한 의미가 달라져서는 안 된다. 즉, 문서의 구조와 의미는 스타일 시트가 없어도 원래의 문서만으로 충분히 전달되어야 한다. 예를 들어, 특정한 단어를 강조해야 하는 경우 <strong>이라는 의미적으로 강조하는 HTML 마크업을 사용해야 하며, 이것을 사용하지 않고 <span>이나 <div>만으로 중요한 의미를 갖는 단어나 단락을 구분해서는 안 된다.

em {font-weight: bold;}

.bold {font-weight: bold;}

</style>

<ol>

<li><em>밤</em>이 되면 거리에 가로등불이 켜진다.</li>

</ol>

<ol>

<li><span class="bold">밤</span>이 되면 거리에 가로등불이 켜진다.</li>

</ol>

3-2-2. 콘텐츠의 내용은 선형화 했을 때에도 무리 없이 인식할 수 있는가?

테이블을 이용해서 내용물을 배치했다면, 테이블을 해체하고 순서대로 선형적으로 읽었을 때에 의미 전달이 되어야 한다. 마찬가지로 CSS로 요소들의 위치를 배치할 때에, 위치가 어디에 놓이느냐에 따라 문서의 구조나 중요한 의미가 바뀌지 않도록 해야 한다. 즉, 위치가 어디에 있느냐와 상관없이 문서의 의미적인 구조는 HTML 요소로 충분히 표현되어야 한다.

<tr>

</tr>

<tr>

</tr>

</table>

<dl>

</dl>

3-2-3. 배치용 테이블 작성에 테이블의 구조 정보를 정의하는 태그를 사용하고 있지 않은가?

데이터를 나타내기 위한 표가 아닌 내용물의 배치를 위한 표에는 의미적인 마크업 (<thead>, <tfoot>, <tbody>, <th>, scope, headers, id, summary, title 등)를 사용하지 않아야 한다. 의미적인 마크업이 사용되면, 비시각적인 웹 표시 장치에서 데이터를 나타내는 표로 잘못 인식하여 불필요하게 제목과 내용을 구분하여 사용자에게 전달할 수 있다. 단, 내용물의 배치를 위한 표라고 하더라도 다음과 같이 한 칸으로 이루어진 표의 경우 내용물의 제목을 <th>나 <caption>으로 표시하는 것은 허용된다.

<table>

<tr>

<td>

</td>

</tr>

</table>

<table>

<tr>

<td>

</td>

</tr>

</table>

3-2-4. 각 링크의 목표 위치를 명확히 하는가?

주변 맥락을 제거하고 링크만 독립적으로 떼어내도 링크의 목표 위치가 명확히 드러나도록 링크 텍스트를 만들거나, 부가적인 설명을 title 속성으로 제시해야 한다. 시각적인 브라우저에서는 전체 페이지를 한꺼번에 조망하면서 그 안에 있는 링크의 맥락을 파악해 그 링크의 목표 위치를 추측하기가 쉽지만, 비시각적인 브라우저에서는 선형적으로 페이지를 읽어나가다가 주변 맥락이 부족한 상태에서 링크의 목적지를 추측해야 한다. 또 비시각적인 웹 표시 장치를 쓸 때에 주변 텍스트를 건너뛰고 한 페이지 내에 있는 링크만을 모아서 열람하거나 링크 간에만 이동하는 경우도 자주 발생한다. 따라서 주변 맥락을 제거해도 링크 자체가 어디로 가는 것인지 목적지를 명확히 드러내도록 해야 한다.

<p>관리자 모드로 가서 추가 메뉴를 보시려면 <a href="admin.html">여기</a>를 누르십시오.</p>

<p><a href="admin.html">관리자 모드</a>로 이동하면 추가 메뉴가 나타납니다.</p>

<p><a href="result.html" title="검색 결과 현재창에서 보기“>검색 결과</a> |

3-3. 온라인 양식(form) 구성

양식을 통해 사용자로부터 데이터를 입력받음으로써 웹 페이지는 일방적인 전달에서 양방향 의사소통을 할 수 있게 된다. 그러나 양식을 주의 깊게 설계하지 않으면 장애인들에게는 웹을 이용하는 데에 커다란 장애물이 된다.

3-3-1. 각 양식(form) 제어 요소(control)를 설명하는 레이블(label)이 있는가?

(1) <label>태그를 이용하여 양식 제어 요소와 레이블이 서로 연결이 되어 있어야 한다.

모든 양식 제어 요소에는 그것의 이름에 해당하는 레이블을 붙여야 한다. 양식 요소에는 고유한 id 속성 값을 주어야 하고, <label> 요소에는 id 속성 값과 동일한 값을 for 속성 값으로 주어야 한다. 이렇게 함으로써 장애인들은 매우 많은 양식 제어 요소들이 어떤 레이블과 짝지어지는지 파악할 수 있다.

<p>

</p>

</fieldset>

(2) 전화번호, 우편번호와 같은 필드를 여러 개로 나누어 입력할 때에는 각 필드에 title 속성을 제공하여 필드에 어떤 값을 입력해야 하는지 알 수 있게 한다.

시각적으로는 전화번호가 여러 개의 필드에 나누어 입력해야 한다는 사실을 추측할 수 있지만, 내용을 순차적으로 읽게 되면 맨 앞에 있는 텍스트 필드에 전화 번호 전부를 넣어야 하는지 아니면 일부만 넣어야 하는지 알 수 없으므로 직접적인 텍스트를 이용하거나 title 속성을 이용해 설명을 붙여준다.

<p>

<label for="phone1">전화 번호</label>:

지역 번호 <input type="text" id="phone1" /> -

국번 <input type="text" id="phone2" title="국번“ /> -

전화번호 끝자리 <input type="text" id="phone3" title="전화번호 끝자리“ />

</p>

<p>

<label for="ssid1">주민등록번호</label>:

<input type="text" id="ssid1" title="주민등록번호 앞 6자리“ /> -

</p>

3-3-2. 키보드만으로도 온라인 양식 입력 및 서식간 이동이 가능한가?

(1) 키보드만으로 서식의 이용이 가능해야 한다.

접근성을 높이기 위해 모든 요소가 키보드로 동작 가능해야 하면 특히 온라인 양식에 데이터를 입력할 때에 마우스를 쓰지 않고도 데이터의 입력, 수정, 삭제, 취소, 최종 제출, 양식간의 이동 등이 모두 가능하도록 설계해야 한다.

다음의 예는 키보드로 양식을 이용할 수 없도록 잘못 설계한 사례들이다.

주민등록번호 앞자리 6글자가 채워지면 무조건 뒷자리 필드로 이동하게 해놓아 다시 앞자리 필드로 키보드를 이용해 되돌아가기가 힘들다.

<label for="ssid1">주민등록번호</label>

<input type="text" id="ssid1" maxlength="6" onkeyup="chk_move(this.form.ssid1, this.form.ssid2, 6);" title="앞자리“/> -

로그인 버튼이 일반적인 submit 유형의 입력 양식이 아닌 이미지로 되어 있고, 마우스 이벤트에 대해서만 처리하도록 되어 있어 양식에 특정한 입력값을 넣은 뒤에 키보드의 [Enter]키를 누름으로써 양식의 값을 서버에 전송할 수 없다.

목록 상자에서 항목을 선택한 다음에는 그 선택한 결과를 최종 반영하는 버튼 (예를 들면, [이동], [가기]와 같은 버튼)을 반드시 따로 두어야 한다. 목록 상자에 이동 버튼을 따로 두지 않고, 목록을 선택하자마자 바로 특정한 동작이 일어나도록 설계하여 키보드로 목록을 선택할 수 없게 만든 예이다.

</select>

</select>

</form>

(2) 키보드로 양식을 이용할 때 포커스의 이동 순서가 논리적이어야 한다.

예를 들어, 아이디와 비밀 번호를 입력한 후 로그인 버튼을 누르는 것이 일반적인 사이트에 로그인할 때의 순서이므로, 코드도 그 순서로 작성되어야 한다. 만약 코드가 그 순서로 작성되지 않았다면 tabindex 속성을 이용해 각 요소에 키보드 이동 순서를 지정해주어야 한다. 이렇게 함으로써 사용자는 탭 키(Tab) 등을 이용해 여러 개의 양식들 사이를 논리적인 순서로 이동 가능하게 된다.

아래는 표를 이용하여 배치를 하다가 논리적인 순서가 아이디 → 비밀번호 → 로그인 순서가 아닌 아이디 → 로그인 → 비밀번호 순으로 어긋난 잘못된 사례이다.

<table>

<tr>

</tr>

<tr>

</tr>

<table>

임시방편으로 이 같은 문제를 해결하기 위해서는 tabindex에 의해 순서를 지정해주면 된다.

<table>

<tr>

</tr>

<tr>

</tr>

<table>

그러나 아래와 같이 되도록 코드 내에서 각 요소들이 논리적인 순서로 나타나도록 해야 한다. 이 때 각 요소들의 시각적인 배치는 CSS를 이용해서 조정할 수 있다.

3.4. 신기술적 진보성

4-1. 신기술의 사용

4-1-1. 스크립트, 애플릿, 플러그인 등 부가 어플리케이션에 의한 콘텐츠는 자체적인 접근성을 지니고 있는가?

스크립트, 애플릿, 플러그인 등 HTML에 의해서 전달되는 콘텐츠 이외의 부가 애플리케이션을 이용하는 콘텐츠는 자체적으로 웹페이지가 제공하고 있는 것과 동일한 접근성을 지니고 있어야 한다.

자체적인 접근성을 가지고 있는 신기술 콘텐츠는 각 콘텐츠를 제작할 때에 저작도구에서 제공하는 방법을 이용하면 된다. 예를 들어, 플래시로 제작된 콘텐츠의 접근성을 보장하기 위해서는 플래시에서 제공하는 접근성 패널을 이용하여 무비클립이나 버튼에 대체 텍스트를 제공해 주고 탭 인덱스(tab index)를 입력한다. 이렇게 제작된 플래시 콘텐츠는 스크린리더로 접근을 할 때 대체 텍스트를 이용할 수 있고 키보드로 이용할 때에 입력된 탭 인덱스에 따라서 이용할 수 있기 때문에 높은 접근성을 갖게 된다. 다양한 콘텐츠에 대한 접근성 향상 방법은 아래의 링크에서 확인할 수 있다.

● Accessible DHTML:http://developer.mozilla.org/en/docs/Accessible_DHTML

● Microsoft Active Accessibility:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp

● Accessible Applications using 100% Pure Java: http://www-306.ibm.com/able/guidelines/java/snsjavag.html

● 플래시: http://www.adobe.com/resources/accessibility/flash8/

4-1-2. 부가 애플리케이션이 작동하지 않을 경우에도 동일한 내용을 전달할 수 있는 대체 콘텐츠를 제공하는가?

<p>Hello!</p>

</object>

브라우저가 <object>태그를 만나게 되면 해당 <object>의 type 속성을 참조하고 이에 해당하는 부가 애플리케이션의 로딩을 시도하게 된다. 이 단계에서 부가 애플리케이션을 성공적으로 로딩하게 되면 그 하위의 <object>들은 무시가 되고, 만약 로딩에 실패하게 되면 하위의 <object>에 대해서 위와 같이 부가 애플리케이션 로딩을 시도하게 된다. 위의 예시에서는 flash, png image, gif image 순으로 로딩을 시도하게 되고 최종적으로 gif image 로딩도 실패하게 되면 화면에 “Hello!”라는 텍스트가 출력되게 된다.

Javascript에 의존한 기능

자바스크립트의 기능을 이용하여 콘텐츠를 제공하는 경우 핵심 기능이나 콘텐츠 제공을 자바스크립트에 의존하면 안 된다. 핵심 기능이나 콘텐츠는 HTML만으로도 충분히 제공될 수 있어야 하며, javascript는 사용자 편의나 UI수준을 넘어서서는 안 된다. 핵심 기능이 HTML만으로도 작동할 수 있게 제작한 후에 자바스크립트로 추가 효과나 UI를 입히는 순서로 제작을 하는 것이 권장된다.

페이지를 이동할 때에는 스크립트를 이용하지 않고 <a>태그를 이용하여 페이지를 이동하며, <a>태그의 href 속성의 값으로 “javascripｔ:goPage()”와 같이 스크립트 구문을 사용하지 않도록 한다.

팝업창은 여는 기능의 경우 HTML만으로도 페이지 이동이 가능하게 <a>태그의 href속성에 팝업창의 파일경로를 적고 onclick 이벤트 핸들러에서 href속성을 this.href로 참조하는 방식을 이용하면 javascript가 작동하지 않는 환경에서도 페이지의 접근을 보장할 수 있다.

자료 : 웹접근성연구소

품질마크가이드.zip

0.3MB

'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글

웹 접근성 보장 의무화 시행 한달 남았는데 (0)	2009.03.15
웹 접근성 품질마크 인증사이트 현황 (0)	2009.01.09
Web Content Accessibility Guidelines (WCAG) 2.0 (0)	2009.01.05
“낡은 웹 접근성 표준지침 빨리 수정해야” (0)	2009.01.05
장애인 `웹 문턱` 낮추기 박차 (0)	2009.01.05

신망애(信望愛) 그 중에 제일은 사랑이니라!

웹 접근성 품질마크 인증제

'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글

티스토리툴바

웹 접근성 품질마크 인증제

'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글

'정보기술의 샘터........о♡/접근성과 사용성' Related Articles

티스토리툴바