제 4 장 평가결과 및 문제점 개선방안

제 1 절 평가결과

1. 자동평가 결과

가. kado-wah 평가결과

국내 지침인 한국형 웹 콘텐츠 접근성 지침(KWCAG)1.0의 중요도 1을 적용하여 100 페이지를 대상으로 대체 텍스트 준수율(지침1), 프레임 사용제한 준수율(지침5), 키보드만으로 운용가능 준수율(지침7) 등 3가지 지침에 대하여서 조사를 하였다. 조사 결과 각 지침별 평균은 대체 텍스트 준수율 72.88%, 프레임 사용제한 준수율 50.97%, 키보드만으로 운용 가능 준수율 42.59%로 대체 텍스트 준수율이 가장 높게 나타났으며 키보드만으로 운용 준수율이 가장 낮게 나타났다.

나. Bobby 평가결과

바비(watchfire bobby 5.3)를 이용하여 주요페이지 20페이지를 대상으로 국제지침인 WC3의 WCAG 1.0 중요도 1에 대한 자동평가를 실시한 결과 59개 중앙행정기관의 100페이지에 대한 평균 오류수는 24개, 평균기관 경고수는 215개로 나타났다.

2. 전문가평가 결과

가. 중앙행정기관 접근성 수준 비교

전문가 평가를 실시한 결과 중앙행정기관의 평균 점수는 81.7점 <표 4-3>으로 2005년보다 9.3점 향상되었으나 가중치 점수를 감안하면 보통 90점 이상 우수, 80~89점 보통, 80점 미만 미흡 정도의 수준으로 평가되었다. 2005년 실태조사 결과에서는 90점대의 우수한 기관이 전혀 없었으나 2006년 실태조사 결과에서는 비상기획위원회(94.1점), 국가인권위원회(92.88점), 기획예산처(90.03점) 등 3개의 기관이‘우수’수준으로 나타났다. 접근성 준수 점수를 2005년 실태조사 결과와 비교하여 볼 때 <그림 4-1>과 같이 2005년도에는 90점대의‘우수’사이트가 전혀 없었으나 2006년도에는 3개로 증가하였고, 80점대 ‘보통’ 수준의 사이트는 6개에서 28개 증가한 34개로 나타났다. 80점미만의‘미흡’수준의 사이트는 51개에서 22개로 29개 감소하였다.

나. 분야별 평균 비교

실태조사 결과 인식의 용이성, 운용의 용이성, 이해의 용이성, 기술적 진보성 등 4개 분야의 평균점수 결과를 2005년 실태조사 결과와 비교하였을 때 <그림 4-2>와 같이 인식의 용이성 분야는 86.4점에서 95.1점으로 8.7점 상승하였고, 운용의 용이성은 79.1점에서 87.9점으로 8.8점 상승한 것으로 나타났다. 그러나 이해의 용이성 분야는 80.1점에서 79.0점으로 1.1점 감소하였다. 기술적 진보성은 36.5점에서 38.5점으로 2점 상승한 것으로 나타났다.

<그림 4-2> 4개의 분야별 2005년과 비교

다. 중앙행정기관 직속기관, 부, 처, 청별 점수 비교

중앙행정기관을 <표 4-4>와 같이 직속기관, 부, 처, 청별로 분류하여 2005년 조사 결과와 비교하였을 때, 중앙행정기관의 전체 평균점수는 81.7점으로 2005년보다 9.3점 전체적으로 상승되었다. 중앙행정기관 가운데 처에 해당하는 기관들은 12.1점이 상승되어 가장 높은 상승세를 보이고 있다.

라. 13개 지침별 점수 비교

2005년 조사 결과에 비해 지침1, 지침7, 지침9, 지침12 순으로 점수가 크게 향상되었다. 좀더 면밀히 분석해보면 <그림 4-3>에서 보여주듯이 대체 텍스트(지침1) 제공 부분이 22.9점 증가하여 가장 높은 상승세를 보였으며, 키보드만으로 운용 가능(지침7) 부분 19.6점, 반응시간조절(지침9)의 부분 18.6점, 온라인서식(지침12) 부분 15.3점 순으로 모두 15점 이상이 상승하였다. 그러나 전체적인 상승세에 비해 영상매체(지침3), 이미지 맵(지침4), 데이터 테이블(지침10) 등의 점수가 하락한 것으로 나타났다. 특히 데이터테이블 점수가 크게 하락한 것으로 나타났다.

<그림 4-3>  2005년 실태조사와 지침별 비교

데이터 테이블이란 달력, 스프레드시트, 스케줄 등과 같이 행과 열로 구성된 표 형태의 데이터를 의미한다. 즉 레이아웃 테이블과는 달리 행과 열로 이루어진 표 안에 데이터를 담아 구별하기 쉽도록 표현한 것을 의미한다. 지침별 하락 원인을 살펴보면 예년에 비해 보다 엄중하고 면밀한 평가를 하였기 때문으로 판단된다. 주요 항목별 준수율을 비교하면 <그림 4-4>와 같이 13개의 지침 가운데 중요한 대체 텍스트(지침1) 준수와 프레임사용 제한(지침5), 콘텐츠의 모양이나 배치의 논리적 구성(지침11) 항목의 준수율은 양호하나 키보드로만 운용가능(지침7) 항목은 19.7점 상승했음에도 불구하고 여전히 60점대로 매우 미흡하게 나타났다.

<그림 4-4> 주요 항목별 비교

 

3. 이용자 웹 사용성 평가 결과

이용자 웹 사용성 평가결과 표본사이트의 웹 접근성 준수 점수대별로 시각장애인의 업무 수행 성공률과 수행시간 차이가 크게 나타났다. 상지장애 뇌성마비인의 경우는 업무 수행률이 낮고 업무 수행시간도 비장애인에 비해 2.9배 더 소요되었으며, 기타 1급 장애인의 경우는 1.5배 더 소요되는 것으로 나타났다. 시각장애인의 경우 업무 수행률이 비장애인에 비해 전맹일 경우 2.8배 더 소요 되었으며, 저시력일 경우도 2.7배 더 소요되어 업무 수행률이 매우 낮게 나타났다.

가. 점수대별 이용자 업무 수행시간 측정 결과

전맹일 경우 점수대별 주어진 업무(task) 수행시간은 70점대(1분27초), 80점대(1분17초), 90점대(1분6초)와 같이 차이가 크게 나타났다. 상지장애인 뇌성마비의 경우는 70점대(1분50초), 80점대(1분6초), 90점대(1분5초)와 같이 점수대별로 업무 수행시간의 차이가 나타났다.

<그림 4-5>는 주어진 업무 수행시간 평균을 초로 환산한 것으로 전맹(1분17초), 저시력(1분16초), 뇌성마비(1분20초), 상지장애 기타(41초), 비장애인(28초)가 소요되는 것으로 나타났다. 또한 표본사이트 각 점수대별 이용자 업무수행시간은 접근성 점수대별로 90점대, 80점대, 70점대 순으로 업무 수행 시간이 짧아지며 사용성이 높아지는 것으로 나타났다.

<그림 4-5>  접근성 점수대별 이용자 업무수행시간

 

나. 점수대별 이용자 업무 수행률 측정 결과

전맹일 경우 70점대(33%), 80점대(56%), 90점대(86%)와 같이 점수대별 업무 수행률 차이가 크게 나타났다. 뇌성마비의 경우는 70점대(88%), 80점대(90%), 90점대(100%)와 같이 점수대별로 업무 수행률의 차이가 크게 나타났다. <그림 4-6>은 주어진 업무를 수행한 정도를 나타내는 평균 업무수행률로서 비장애인(100%), 상지장애기타(97%), 뇌성마비(93%), 저시력(91%), 전맹(58%)로 순으로 나타났다. 따라서 표본사이트의 각 접근성 점수대별 이용자 업무수행률은 90점대, 80점대, 70점대 순으로 높게 나타났다.

<그림 4-6>  접근성 점수대별 이용자 업무수행률

주어진 업무를 수행한 정도를 나타내는 업무 수행률<그림 4-6>은 일반인(100%), 상지장애기타(97%), 뇌성마비(93%), 약시(92%), 전맹(59%)로 나타났다. 또한 표본사이트 각 접근성 점수대별 이용자 업무수행률은 90점대, 80점대, 70점대 순으로 업무 수행률이 높아지는 것으로 나타났다.

다. 웹 사용성 정성적 평가결과

웹 사용성 평가는 일반인, 시각장애인, 상지장애인들이 각 표본사이트의 체크리스트별 업무를 수행 후 사용 만족도를 정성적으로 평가한 것이다. <표 4-7>은 표본 사이트별 이용자들의 사용 만족도에 대하여 정성적으로 평가한 평가 결과표이다. 사이트 이용 만족도는 일반인과 상지장애인의 결과가 같게 나타났으나 시각장애인의 만족도는 접근성 점수가 낮을수록 더욱 낮아져 접근성의 영향을 가장 많이 받는 대상은 시각장애인들인 것으로 나타났다.
이용자 평가결과 접근성 점수가 낮은 표본 사이트들은 시각장애인들이 주 메뉴 네비게이션을 통한 접근이 불가능 하였다. 그럴 경우 시각장애인들은 주로 사이트맵을 이용하여 콘텐츠로 이동했으나 사이트맵 링크 자체의 글씨체가 작고 가독성이 떨어져 상지장애인 및 저시력 장애인들에게 불편을 가중 시켰다. 또한 시각장애인들은 논리적이지 못한 tabindex로 인해 키보드를 이용한 사이트맵 접근이 불가능하여 콘텐츠로의 접근이 어려웠다. 특히 시각장애인들은 전반적으로 시간초과 항목이 많았으며, 온라인서식 입력이나 게시판 등에 글을 올리는 일이 매우 어려운 것으로 나타났다.

 

제 2 절 중앙행정기관 웹 접근성 문제점 및 개선방안

중앙행정기관 실태조사 결과를 통하여 장애인 및 고령층의 웹사이트 접근이 불가능 하거나 어려움을 겪게 하는 전반적인 웹 접근성 저하 요인을 분석하고 접근성 지침 4개의 분야별로 해당 문제점을 분석하여 개선방안을 제시하고자 한다.

1. 인식의 용이성 접근성 문제

가. 대체텍스트 미 제공

각 기관별 대체 텍스트 제공 부분의 점수는 2005년 접근성 평균 63.3점에 비해 86.2점으로 22.9점이 대폭 상승 했음에도 불구하고 전체 기관 중 대체 텍스트를 100% 제공하는 기관은 11곳에 불과하여 아직 미흡한 수준에 머무르고 있는 것으로 나타났다. 대체 텍스트 제공은 접근성 준수 사항 중 가장 중요도가 높으며 최우선 적으로 실천 되어야 한다.
<그림 4-7>, <그림 4-8>, <그림 4-9>는 대체 텍스트 미제공, 잘못된 대체 텍스트 제공, 올바른 대체 텍스트 제공 예이다. 대체 텍스트를 제공하지 않았을 경우 시각장애인들에게 접근성 문제가 발생했지만 영어파일명을 그대로 대체 텍스트로 제공하거나 이미지와 동떨어진 잘못된 대체 텍스트를 제공하였을 경우 시각장애인들이 이용하는 화면 낭독 프로그램인 ‘스크린 리더’가 알 수 없는 단어들을 낭독하여 시각장애인들을 더욱 혼란스럽게 만들었다. 아울러 반드시 긴 설명이 필요한 것이 아니라면 대체 텍스트 내용은 간결하게 사용하는 것이 바람직하다. 따라서 개발자들은 대체 텍스트 제공의 중요성을 인식하고 적재적소에 올바른 대체 텍스트를 제공하여야함을 간과해서는 안 될 것이다.

<그림 4-7> 대체텍스트가 제공 되지 않은 모습

 

<그림 4-8 > 잘못된 대체텍스트 제공 모습(파일명사용)

 

<그림 4-9> 올바른 대체텍스트 제공 모습

나. 텍스트이미지 대체텍스트 미 제공

<그림 4-10> 텍스트이미지 대체텍스트 미제공
자료 : 감사원 웹사이트

<그림 4-10>은 Copyright 부분의 주소를 텍스트이미지로 제공한 예이다. A 부분은 텍스트로 보이지만 실은 텍스트이미지이다. 그러나 A부분 주소에 대한 대체 텍스트를 제공하지 않았을 경우 장애인들의 접근성이 크게 저하된다. 따라서 Alt 태그를 이용한 대체 텍스트를 제공해야 하며 텍스트 내용이 75자(150Byte)를 초과할 시는 Alt 속성 보다는 longdesc와 d-link 속성을 사용하여 자세히 설명해야 한다. 중앙행정기관들 가운데 상당 기관들이 Copyright 부분의 정보를 텍스트가 아닌 텍스트이미지를 사용하는 경우가 많았다. 그러나 Alt 태그를 이용한 대체 텍스트를 제공하거나 longdesc와 d링크 속성을 사용한 사이트는 거의 찾아볼 수 없었다. 텍스트이미지를 설명하는 별도의 텍스트파일을 만들어 저장 후 텍스트이미지를 <그림 4-11>과 같이 longdesc 속성으로 저장된 텍스트파일명을 지정하고 d링크 속성을 이용하여 d를 통한 링크를 설정해준다. 또한 longdesc를 활용하더라도 alt와 title을 제공해야 하며, alt에는 간단한 제목만 넣고, title에는 alt보다 좀더 자세한 설명을 제공하며, longdesc를 이용하여 별도의 파일에 매우 자세한 설명을 제공해야 한다. alt로 title을 동시에 제공했을 때 마우스 오버시 title이 제공되나 이미지가 제공되지 않을 시는 alt로 지정한 텍스트가 화면에 제공되는 것이다.
 [예] <img src="파일명" alt="대체텍스트" title="좀더 자세한 설명" longdesc="상세한 설명이 담긴 문서의 주소" />

<img src="img/greeting.gif" width="450" height="450" border="0" alt="인사말" title=“MoonTe.kr 사이트에 오신 것을 환영합니다." longdesc="greeting.txt" /><a href="greeting.txt" title="설명 파일로 링크">d</a>

<그림 4-11> longdesc와 d-link 사용 예

 

다. 영상매체의 동기화된 자막 미 제공

시각장애인의 경우는 기본적으로 웹사이트에서 제공되는 콘텐츠를 볼 수 없다. 때문에 스크린리더(screen reader)라는 컴퓨터 화면을 읽어주는 소프트웨어를 사용하여 웹사이트의 내용을 듣게 된다. 비장애인만큼 원활히 사용할 수는 없지만 시각장애인들도 웹사이트가 접근성만 잘 준수한다면 스크린 리더를 통하여 웹사이트를 편리하게 이용할 수 있다.
중앙행정기관 사이트가 제공하는 동영상과 오디오 자료 중 접근성을 높이기 위해 캡션을 동기화해서 제공하는 경우는 거의 볼 수 없었다. 청각장애인의 경우는 사이트 내에서 음성으로 제공되는 내용을 인지할 수 없으므로 문자로 된 자막 등 텍스트로 된 정보를 제공하여 청각 장애인이 해당 정보를 습득하도록 해야 한다.  따라서 장애 유무에 관계없이 동영상, 멀티미디어 객체에 접근할 수 있도록 해야 하며, 동영상을 볼 수 없는 사용 환경을 고려해야 한다.

오디오가 나오는 시간에 맞추어 거의 동시에 텍스트가 제공되어야하며, 오디오에서 제공되는 음성정보와 동일한 내용을 텍스트로도 제공하여야한다. 또한 사용자가 필요에 따라 캡션을 끄거나 켤 수 있고 사용자의 선호도에 따라 위치, 글자 크기, 색깔 속도 등도 조절 할 수 있으며, 캡션의 텍스트 내용을 별도의 데이터로 추출하여 다른 형식의 데이터로 변환이 가능한 캡션을 제공하여 보다 많은 사람들이 정보에 접근할 수 있게 하여야 한다.
동영상 뉴스의 경우, 캡션 제공을 하는 것이 원칙이나 캡션을 대체 할 수 있는 대본을 제공함으로서 청각 장애인, 시각 장애인의 경우 점자로 변환이 가능하여 접근성을 높일 수 있다. 아울러 비디오나 오디오의 음성 부분을 별도의 텍스트로 제공하면 읽는 속도가 느리거나 이해력이 떨어지는 사람들의 접근성을 향상 시킬 수 있다.

<그림 4-12> 네이버 뉴스

라. 대체 텍스트 없는 이미지 맵(image map) 제공

이용자 평가결과 사이트 맵(site map)은 시각장애인들이 원하는 콘텐츠에 손쉽게 접근하는데 중요한 길잡이가 되는 것으로 나타났다. 주메뉴 접근이 불가능 할 경우 시각장애인들은 사이트 맵을 먼저 찾아 콘텐츠에 접근하였다. 따라서 사이트 맵은 주메뉴 다음으로 매우 중요한 사이트 이동 수단이 되기 때문에 좀더 세심한 배려가 요구된다. 그러나 사이트 맵 자체를 플래시나 하나의 이미지로서 대체 텍스트 없이 이미지 맵으로 제공하는 경우도 있었다.
대체 텍스트 미제공 및 논리적이지 못한 구성 등으로 처음부터 사이트 맵으로 접근이 불가능 한 경우 등이 문제점으로 나타났다. 그러므로 사이트 맵은 되도록이면 텍스트로 제공하는 것이 바람직하고 이미지 맵으로 구현 시는 클라이언트 이미지 맵을 사용하여 <그림 4-13>과 같이 대체 텍스트를 제공하여야 하며, 각 링크별로 논리적인 tabindex 속성을 부여하여 접근성을 높여야 할 것이다.

<img src="/images/title/title_sub_0103.gif" usemap="map1" alt="조직도"> <area shape="rect" coords="160, 22, 354, 73" href="#" alt="경호실장" tabindex="1">
<area shape="rect" coords="33, 103, 171, 149" href="#" alt="감사관" tabindex="2"> <area shape="rect" coords="403, 85, 527, 123" href="#" alt="경호안전교육원" tabindex="3">

<그림 4-13>클라이언트 이미지 맵 사용시 tabindex 사용예

 

2. 운용의 용이성 접근성 문제

가. 다수 프레임 사용

콘텐츠를 구성하는 프레임은 최소한으로 하여야 하나 중앙행정기관 웹사이트 중에는 프레임을 20개 이상 사용하는 기관들도 다수 있었으며 대부분의 기관들이 다수의 프레임을 사용하고 있었다. 장애인 웹 사용성 평가시 화면을 보지 못하는 시각장애인들의 경우 프레임명을 통하여 현재의 가상 커서의 위치가 어느 위치에 있는지 파악할 수 있었다.
따라서 프레임은 사용하지 않는 것이 바람직하나 사용시는 최소로 사용하여야하며, 헤더(header)와 콘텐츠(contents), 사이드바(sidebar), 푸터(footer)등 각 프레임별 알맞은 프레임 명을 부여하여 주메뉴, 서브메뉴, 본문 등의 위치를 인식할 수 있도록 프레임별 title을 반드시 제공하여 접근성을 높여야 한다. 또한 프레임을 지원하지 않는 브라우저를 위해 noframe 태그를 사용하여야 한다.

나. 키보드만으로 운용이 불가능

웹사이트 내의 모든 콘텐츠에는 마우스뿐만 아니라 키보드의 Tab키 또는 방향키로 이동이 가능하여야 한다. 그러나 중앙행정기관의 지침7은 67.6점으로 2005년보다 19.6점 상승했으나 여전히 매우 미흡한 수준이다. 플래시나 스크립트 등을 이용한 주메뉴 및 콘텐츠들을 제공함으로써 키보만으로 접근이 불가능한 경우가 많았다. 사이트에서 제공하는 모든 콘텐츠들을 tabindex, accesskey, onkeypress, onkeyup 등의 속성을 이용하여 마우스가 아닌 키보드만으로도 메뉴 선택과 링크 선택 등 웹페이지 내의 상호작용이 가능하도록 하여야 한다.
tabindex 속성은 페이지 내의 선택 가능한 요소들 사이를 이동할 때는 Tab키(전진), Shift+Tab(후진)을 이용한다. 만일 소스상의 순서와 다르게 이동하는 것이 논리적으로 더 타당하거나 명확히 순서를 지정하고자 할 때는 tabindex 값을 넣어주어 요소들 간의 이동을 정할 수 있다. 중요한 요소에는 accesskey 속성을 이용하여 직접 접근 가능한 단축키를 넣어 줌으로써 Tab키를 이용한 순차적인 접근에 대해서는 보완할 수 있다. accesskey는 브라우저에서 기본적으로 제공하는 단축키와 충돌을 일으킬 수 있으므로, 사용시 주의가 요구되며, 반드시 필요한 경우가 아니라면 tabindex를 활용하는 것이 바람직하다(KWCAG 1.0, 2004).

다. 논리적이지 못한 tabindex

장애인들은 화면낭독 프로그램을 통해 가상 커서를 이용하여 콘텐츠의 논리적 배열순서인 상, 하, 좌, 우 순으로 이동하면서 콘텐츠를 인식한다. 그러나 중앙행정기관 중 다수 기관들의 논리적 순차적 tabindex 구현이 제대로 되어있지 않아서 장애인들이 키보드만으로 콘텐츠 접근이 불가능한 경우가 많았다. 따라서 tabindex 속성을 이용하여 원하는 콘텐츠에 논리적 접근이 가능하도 제공하여야만 한다. tabindex는 html code에서 폼 요소를 이동할 때 키보드 탭(tab)키를 눌러 이동 순서를 정의하는데 사용되는 속성이다. 사용할 수 있는 html 태그는 a, area, button, input, object, select, textarea 등이 있다. tabindex 값은 1부터 시작 -1일 경우 포커스가 위치하지 않는다.

 <p>성명 : <input tabindex="1" name="a" type="text" size="8" style="" value=""></p>
<p>주소 : <input tabindex="2" name="b" type="text" size="5" style="" value=""></p> 
<p>전화 : <input tabindex="3" name="c" type="text" size="13" style="" value=""> 
                               :   이하 생략
a에서 탭키를 눌렀을 때 두 번째 tabindex인 b로 이동한다.

<그림 4-14 > form에서 tabindex 사용 예

라. 제목 표시줄의 동일한 타이틀 사용

장애인 이용자 평가시 페이지가 바뀔 때마다 제목 표시줄에 <그림 4-15>와 같이 동일한 페이지 타이틀을 부여함으로써 스크린리더를 이용하는 시각장애인들은 현재 페이지가 어디인지 구분하지 못하여 매우 혼란스러워 하였다. 따라서 title 태그를 이용하여 매 페이지마다 해당 페이지에 관하여 쉽게 이해 할 수 있는 타이틀을 부여하여 접근성을 높여야만 할 것이다.

  <그림 4-15> 동일한 타이틀 사용

3. 이해의 용이성 접근성 문제

가. 테이블의 잘못된 사용

데이터 테이블 부문의 점수는 2005년보다 24.8점 감소된 것으로 나타났다. 그것은 예년에 비해 보다 엄중하고 견고하게 평가를 진행하였기 때문인 것으로 판단된다. 데이터 테이블과 레이아웃 테이블을 혼돈하여 사용하는 경우가 많았는데 데이터 테이블은 표로 나타내기에 적당한 논리적인 정보들을 머리글(header) 부분과 일반 부분으로 나누어 숫자나 문자 데이터를 행과 열로 일목요연하게 표로 표현하고자 할 때 사용한다.
레이아웃 테이블은 화면을 보기 좋게 정렬하기 위한 레이아웃용으로 사용하는 테이블을 말한다. 원래 데이터를 표시하기 위한 목적의 테이블을 레이아웃을 잡는데 사용하고 보통 테이블이 테이블을 세 번 이상 포함시켜 사용하는게 일반적인 형태가 되어 있다. 특히 웹 개발자들은 드림위버와 같은 웹 개발 에디터 프로그램을 이용하여 개발자 편의대로 레이아웃 테이블을 만들어 사용하고 있다. HTML은 원래 단순하면서 이해하기 쉬운 마크업 언어로 사용할 목적으로 만들어졌으나 웹 페이지의 표현수단의 중요성이 대두되면서 불필요하고 의미 없는 태그가 남발되었고 점점 코드의 분량이 방대해져서 코드만 보고 전체 내용을 이해하기란 거의 불가능 한 일이 되었다. 따라서 본래의 개발 목적에 맞게 코드를 사용하는 것이 웹 표준을 준수하는 것이라 판단된다.
반드시 필요한 경우가 아니라면 에디터를 이용한 레이아웃 테이블 사용 보다는 CSS를 이용한 레이아웃을 통하여 문서와 디자인의 분리하여 디자인하는 것이 바람직하며 데이터 테이블을 사용할 경우 행과 열의 헤더를 제공하여 테이블을 구성함으로써 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있도록 해야 한다. 아울러 반복적인 머리글과 바닥글에는 thead, tfoot을 사용, 행의 그룹화에는 tbody 사용, 열의 그룹화에는 col 및 colgroup 등을 사용해야 하고 머릿글 사용시 TABLE 요소에 레이블을 지정해 주어야 한다.

나. 온라인 서식 레이블 미 제공

이용자 웹 사용성 평가시 장애인들이 가장 어려움을 겪었고 사용이 불가능하였던 부분이 온라인 서식(게시판, 민원신청) 등 이었다. 그것은 중앙행정기관 중 상당수가 글쓰기 버튼을 대체 텍스트 없는 이미지로 제공하거나 스크립트로 링크된 버튼을 사용하였기 때문이다. 장애인들은 글쓰기 버튼에 접근하는 것 자체가 어렵고 글쓰기 형식에서 각 항목의 구분이 힘든 것으로 나타났다. 따라서 글쓰기 버튼뿐만이 아니라 온라인 서식의 주요 버튼들은 폼 버튼을 이용하는 것이 바람직하며 이미지버튼 사용시는 반드시 적당한(글쓰기, 글 올리기, 취소하기, 수정, 삭제) 대체 텍스트를 제공해 주어야 한다. 또한 스크립트 링크 방식보다는 A태그를 이용한 보편적인 링크방식을 사용하는 것이 바람직하다.

 

4. 기술적 진보성의 접근성 문제

가. 신기술 사용의 대체콘텐츠 미 제공

신기술 부분의 점수는 전체 평균 점수가 38.5점으로 13개 지침 중 가장 낮게 평가되었다. 특히 각 기관별 액티브엑스(activeX)를 설치하는 경우 많아서 액티브엑스를 지원하지 않는 브라우저에서는 원활한 사이트 이용이 불가능 하였다. 웹 접근성은 신기술 사용을 금지하는 것이 아니라 신기술을 지원하지 않을 경우를 대비해 원래 제공된 콘텐츠 목적에 부합하는 대체 콘텐츠를 제공하여야 한다는 것이다. 신기술(activeX, flash, java, javascript, applet, plug-in)은 사이트 개발자 특성에 따라 더 많이 사용하는 개발자가 있다.
그러나 신기술 사용은 항상 이용 불가능 한 상황을 고려하여 본래의 목적에 부합하는 대체콘텐츠 제공과 함께 사용되어야 한다는 점을 간과해서는 안되며, 접근성을 고려한 신기술 개발 연구에 더 많은 시간과 노력을 기울여야 할 것이다.

나. 플래시나 스크립트로 제공하는 주 메뉴

전반적인 웹사이트에서 주 메뉴 및 콘텐츠를 대체 텍스트가 없는 이미지나 플래시 또는 레이어와 스크립트로 구현하여 제공하고 있었다. 따라서 화면낭독 프로그램(screen reader)로 사이트를 이용하는 장애인들은 이용에 상당한 어려움이 있는 것으로 나타났다. 뿐만 아니라 스크립트 제거시 일반인들도 주 메뉴를 통한 이동이 전혀 불가능 한 경우가 많았고 스크립트나 플래시로 제공하는 콘텐츠를 전혀 사용 할 수 없는 경우들이 빈번하였다.

특히 주메뉴에서 마우스 오버시 서브메뉴가 펼쳐지는 펼침 목록은 키보드로만 운용이 불가능하여 장애인들이 접근하기 매우 어려운 것으로 나타났다. 따라서 마우스를 사용할 수 없는 사용자를 고려하여 onmousedown→onkeypress, onmouseup→onkeyup, onclick→ onkeypress 명령을 이용한 장치 독립적인 이벤트를 사용하는 것이 바람직하다. 또한 스크립트를 지원하지 않을 경우를 대비해서 noscript 태그를 이용하여 별도의 페이지를 제공하거나 원본과 동일한 대체 콘텐츠를 제공하여야 한다. 아울러 접근성이 낮은 스크립트나 플래시로 구현한 주메뉴 보다는 CSS를 이용한 주메뉴 제공을 통하여 접근성을 높이는 것이 바람직 할 것이다. 이상과 같이 CSS를 활용하여 문서구조와 표현을 분리하고, 표 작성 시에는 가능한 단순한 구조로 만들며 적절한 기호(caption, scope, th 등)를 사용하고 layout용 테이블을 가급적 배제하여야 한다. 또한 페이지 타이틀은 이용자가 페이지 내용을 식별할 수 있는 명칭을 제공하여야 하며, 프레임 사용을 최소한으로 하고, 사용시에는 프레임 명을 주어서 역할이 명확히 드러나도록 해야 한다.

다. Noscript 활용의 미흡

noscript는 스크립트를 사용할 수 없는 상황에서도 콘텐츠에 대한 접근과 이용이 용이하도록 대체 콘텐츠를 제공하기 위해 사용하는 태그이다. 그러나 중앙행정기관 대부분의 사이트들이 noscript 태그를 제대로 활용하지 못하고 있는 것으로 나타났다. 중앙행정기관 웹사이트들 중에는 noscript 개수로 점수를 부여한다고 판단하여 무의미한 빈 noscript 태그를 넣거나 무의미한 텍스트만을 넣은 경우들이 속출되었다.

<그림 4-16> 잘못된 noscript 사용 사례

<그림 4-16>은 noscript의 잘못된 사용 사례로서 A영역에서 보여주는 바와 같이 noscript 태그를 이용하여 무의미한 텍스트를 반복적으로 나타고 있다. 때문에 스크립트가 지원되지 않을 때에는 <그림 4-17>과 같이 화면에 나타난 ‘스크립트입니다’라는 문구를 스크린리더가 반복적으로 읽게 되어 시각장애인들에게 오히려 불편만 가중시키게 된다.

<그림 4-17> 잘못된 noscript 사용시 브라우저 모습

<그림 4-18> 올바른 noscript 사용 사례

noscript를 활용한 사례로 재정경제부 웹사이트를 들 수 있다. 위의 <그림 4-18>은 재정경제부 사이트의 noscript 사용 사례이다. 로그분석을 위하여 스크립트를 사용하고 있으나 스크립트 중지시 noscript 태그를 이용하여 로그분석을 대체하도록 하였다. 물론 일반 사용자들에게는 대체콘텐츠로서의 역할 수행을 하는 것은 아니지만 noscript를 활용했다는데 의의가 있다.
이처럼 스크립트 중지시 원래 제공하고자 하는 내용과 동일한 역할을 하는 대체 콘텐츠와 연결시켜 주는 것이 바람직하다. 대체 콘텐츠는 이미지, 동영상, 사운드, 텍스트 등 어떠한 방법으로도 제공이 가능하다. 만일 동일한 내용의 콘텐츠 제공이 불가능 할 때는 텍스트만으로 만들어진 대체 콘텐츠와 연결시켜 주도록 하여 접근성을 높여야 할 것이다.

제 3 절 CSS이용 사례를 통한 개선방안 제언

본 연구에서는 중앙행정기관 웹사이트의 접근성 향상을 위한 문제점 개선방안으로 가장 우선시 되어야 할 웹 표준 준수에 대하여 연구하고자 HTML과 XHTML, CSS를 이용한 웹사이트 http://MoonTe.kr를 제작하였다. 이로서 중앙행정기관 전반적인 주요 문제점 해결방안으로 CSS를 이용한 사례를 통한 개선 방안을 제안하고자 한다.

1. CSS를 이용한 레이아웃

중앙행정 기관 사이트들 중에는 상당히 많은 기관들이 지나치게 많은 프레임을 사용하고 있는 것으로 나타났다. 그러나 프레임을 반드시 사용하여야만 레이아웃이 설정이 가능한 것이 아니며 프레임을 사용하지 않는 것이 장애인들의 접근성을 더 높여준다는 것을 간과해서는 안 된다. CSS를 사용하여 프레임을 전혀 사용하지 않고도 얼마든지 레이아웃 설정이 가능하다. MoonTe.kr 사이트는 테이블이나 프레임을 사용하지 않고 CSS만을 이용한 레이아웃 방식으로 제작되었다.  CSS를 기반으로 레이아웃을 만드는 방법은 플로트(float) 기반의 레이아웃과 절대위치 지정방식이나 음수 마진 값 사용방식 등 여러 방법이 있다.  플로트는 속성이 적용된 요소의 위치를 좌우측으로 정렬시키는 역할을 한다. 요소를 좌측으로 정렬하고 다음에 오는 요소를 우측으로 정렬할 경우에는 속성 값을 left로 입력하고, 요소를 우측으로 정렬하고 다음에 오는 요소를 좌측으로 정렬할 경우에는 속성 값을 right로 입력한다. 그 중 본 사이트는 보편적으로 많이 사용하는 플로트 기반의 레이아웃으로 <그림 4-19>와 같이 4개의 영역으로 나누었다.

<그림 4-19> CSS를 이용한 레이아웃

A영역은 header 부분으로 head title과 로고, 내비게이션이 고정적으로 배치되는 영역이다. B의 영역은 페이지의 중심부분으로서 주된 contents를 포함하는 영역이다. C영역은 sidebar로서 부가적인 사이트 링크와 정보를 포함하는 영역이다. D영역은 footer 영역으로서 고정적으로 저작권, 만든이의 정보, 기타 부수적인 링크 등을 포함하는 copyright 영역이다. 이상과 같은 레이아웃은 XHTML 파일 내에서 link 속성 <link rel="stylesheet" type="text/css" href="main1.css" />을 통해 main1.css 외부 CSS 파일을 로딩(loading)하여 콘텐츠에 스타일을 입히도록 하였다. 본 논문에서는 CSS에 관한 사이트 구축 방법을 설명하고자 하는 것이 아니라 CSS를 유용성과 편리성 및 웹 표준 준수의 중요성을 부각 시키고자 한 것이다. 따라서 웹사이트 구축시 CSS를 적절히 기존 기술들과 혼용하여 현존하는 웹사이트들 보다 더욱 접근성 높은 웹사이트로 방향전환의 동기를 부여하고자 하는 것이다. MoonTe.kr 사이트는 <그림 4-20>과 같이 W3C XHTML과 CSS Validator를 모두 통과 하였으며 <표 4-8> <표 4-9>는 XHTML 및 CSS 코드이다.

<그림 4-20> W3C XHTML & CSS Validator Results

<표 4-8> MoonTe.kr 사이트의 XHTML 코드(index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset =utf-8"/>
<meta name="keywords" content="disabilities, interoperability, activity limitations, disability taxonomy, participation restrictions, standards, guidelines, accessibility, information technology, assistive technologies, usability, evaluation" />
<meta name="description" content="the taeun's master degree website - i made this site to prove web standards which related with my paper." />
<title>mTe's Master Degree Website</title>
<link rel="stylesheet" type="text/css" href="main1.css" media="all" />
<link rel="shortcut icon" href="img/mteicon.ico" />
<link rel="icon" href="img/head_left.gif" type="image/gif" /></head>
<body id="intro"><div id="skip2main">
<ul><li><a href="#skip1">본문으로 바로가기</a></li></ul></div>
<div id="wrap"> <-- header -->

<div id="header">
<h1><a href="http://moonte.kr"><img src="img/head_left.gif" width="92" height="95" border="0" alt="사이트로고" align="middle" /></a>&nbsp;&nbsp;&nbsp;&nbsp;mTe's Master Degree Website</h1> <--navigation -->
<div id="nav">
<ul>
<li id="abstract"><a href="index.html">Home</a></li>
<li id="chapter1"><a href="chapter1.htm">Chapter1</a></li>
<li id="chapter2"><a href="chapter2.htm">Chapter2</a></li>
<li id="chapter3"><a href="chapter3.htm">Chapter3</a></li>
<li id="chapter4"><a href="chapter4.htm">Chapter4</a></li>
<li id="chapter5"><a href="chapter5.htm">Chapter5</a></li>
<li id="references"><a href="references.htm">References</a>
<li id="greeting"><a href="greeting.htm">Greeting</a></li>
</ul></div></div> <-- contents -->

<div id="content"><div class="gutter">
<h1><a name="skip1" id="skip1">Abstract</a></h1>
<dl class="feature"><dt>국내 중앙행정기관 웹사이트의 접근성과 사용성 평가 및 개선방안 연구</dt>
<dd><span class="drop">21</span>세기 지식기반사회(knowledge based society)에서 웹은 지식획득을 통한 부를 창출하고 미래를 이끄는 큰 원동력으로 자리 잡아 가고 있다.
  :               중간생략            : <-- sidebar -->
<div class="box">
<h3>웹 접근성 관련</h3>
<ul><li><a href="http://www.section508.gov/" title="재활법 508조 포털 사이트">재활법 508조 포털사이트</a></li>
<li><a href="http://www.accessibilityforum.org/" target="_blank" title="웹 접근성 포럼">Accessibility forum</a></li>
<li><a href="http://www.kado.or.kr" title="한국정보문화진흥원">한국정보문화진흥원</a></li>
      :               중간생략            : <-- footer -->

<div id="footer">
<p>Graduate School of Public Policy and Industy(Business) Sookmyung Women's University U-Biz/U-Gov Lab. <br />Copyrightⓒ 2007-2010 by mTe all rights reserved. ☏ 02-710-9685 email:moonte@smookmyung.ac.kr</p>
</div></div>
</body>
</html>

<표 4-9> MoonTe.kr 사이트의 CSS 코드

/* Copyright 2007-1010 by Moon TaeEun. All Right Reserved. */
/* Graduate School of Public Policy and Industry(Business)  Sookmyung Women's University Ubiz/U-Gov Lab*/
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover { text-decoration: none;}

body{   margin: 0; padding:0; font-family:Georgia, Times, Verdana, sans-serif; font-size:small;}
#skip2main{height:0; overflow: hidden;}
#skip1{background: transparent; padding: 0;}
#wrap{min-width: 500px; max-width: 1400px; background:#F0FED5 url(img/back1.gif) repeat-y 68% 0; }

#content{float:left; width:70%; font-size:95%; }
.gutter h1{text-align:center; font-size:120%; }
.gutter{Margin:10px;    font-family:Georgia, serif; }
#content.gutter{padding:10Px;   margin:0;}  
#sidebar{float:right; width:28%; }  

/* header */
#header{float:left; border-left:10px; padding:0;   margin:0;width:100%; background:#228b22 url(img/head.jpg)repeat-x top left;}
#header h1{margin-left:10px; padding:25px 25px;           line-height:1.5em; font-family:Georigia, erif;font-size:200%; font-style:italic; color:#fff;}

/* navigation */    
#nav {  width:100%; font-size:110%; margin:0; padding:0; list-style:none; font-weight:bold; }
#nav a{display:block; margin:0 1px 0 3px; padding:2px 2px 5px 3px; color:#343A21; text-decoration:none;     font-style:italic; border-color:#F2D14A;    border-style:groove; border-bottom:none;    font-family:Georgia, serif,Times; background:#ffd700 url(img/on.gif) repeat-x top left}
#nav a:hover, body#intro #hidden a{color:#343A21;
padding:3px 3px 4px 3px; border-color:#D3E4B4;
border-bottom:none; font-weight:bold;
font-style:italic; background:#F0FED5 ; }
#nav ul{list-style-type:none;}
#nav li{float:left; margin:0; padding:0; font-family:"Lucida Grande", sans-serif; font-size:100%; }

/* sidebar */   
.box{margin:5px 5px 0px 15px; font-size:90%;    line-height:1.5em; display:block; border-style:ridge;   border-width:3px; border-color:#9acd32; color:#fff;     background:#6b8e23; }
.box ul li a:link{color:#fff;}
.box ul li a:hover{color: #ffa500 ; font-weight:bold;}
.box ul li a:visited{color:#fff;}
.box ul li a:active{color:#ffff00;}
.box h3{display:block; border-top:none; border-left:none;   border-right:none; border-width:3px; margin:10px 10px 5px 10px; padding:5px 10px; border-color:#ffa500;     font-family:"Lucida Grande", sans-serif; font-weight:bold; font-size:130%; padding-left:25px; background:url(img/cup.gif) no-repeat 0 50%;}
.box p, .box ul{padding:10px 15px; margin:10px 10px;    list-style-image: url(img/icon_year.gif); }
.box ul li{margin-left:10px; line-height:2em;}

/* contents */          
#content h1{margin:0 0 0 15px; padding-top:15px; font-family:Georgia, serif; font-size:180%; font-weight:bold;}
#content h2{margin:0 0 0 15Px; line-height:2em; padding-top:15px; font-family:Georgia, serif; font-size:130%; font-weight:bold; }
#content h3{margin:0 0 0 0; line-height:2em;    padding-top:15px; font-family:Georgia, serif; font-size:120%;   font-style:italic;}
.drop { float: left; font-size:200%; line-height:1em; margin:4px 10px 10px 0; border:2px solid #ccc; background:#D2E599;
.drop2{ float: left; font-size:200%; line-height:1em; border:2px solid #ccc; background:#ffcc33;    color:#556b2f;}
dl.feature{line-height:2em; border-top:2px dotted #ccc; border-bottom:2px dotted #ccc; font-size:105%;}
dl.feature dt{display:block; margin:10px; padding-left:10px;    font-family:Georgia,Arial, sans-serif; font-size:130%;  font-weight:bold; background:#D2E599;}
dd{margin:20px;}
dd.sub1{display:block; margin:5px 5px 10px 10px;    padding-left:10px;  font-size:100%; font-weight:bold;   background:#D9E6B2;}
dd.element{display:block;font-style:italic;font-size:90%;   font-weight:bold;   margin-top:5px; margin-bottom:5px;}
.feature dd.image{margin-top:10px; margin-left:40px; padding:0; }
dl.feature:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.imgcaption{margin-left:40px;   line-height:1.3em;  margin-bottom:20px;}
#introduction{  display:block;  padding:10px; border-style:ridge;background:#6b8e23; color:#fff; }
table{  border-color:#343A21;   border-collapse:collapse;}  
.pyo td {margin-left:50px;}
th, td {padding:5px; border-right:1px solid #999;   border-bottom:1px solid #999;}
.pyo caption.cap{font-weight:bold;font-family:Arial, sans-serif;
font-size:120%; padding-bottom:6px;}
.references{margin:20px;}

/* footer */
#footer{clear:both; height:1%;  font-size:100%;     background:#808000; margin:0; line-height:1.5em;    padding:1em; border-bottom: 3px solid #DEDEDE; color:#fff;  text-align:center; }

기존 테이블 방식의 레이아웃은 구조적 XHTML을 작성하기 어렵다. 그러나 CSS를 이용한 레이아웃은 문서와 디자인의 분리가 가능하여 문서의 구조를 깨뜨리지 않아도 디자인이 가능하게 해주므로 테이블 방식보다 더욱 섬세한 디자인이 가능하다. 사이트의 페이지수가 수백에서 수천수만 페이지가 될 경우 업데이트시 CSS 파일만 수정하고일일이 모든 페이지를 수정하지 않게 되어 유지관리가 매우 편리하므로 얼마나 큰 비용 절감 효과를 가져 올 지 예측 할 수 있다.

2. CSS를 이용한 주 메뉴 네비게이션

주메뉴는 웹사이트 이동의 가장 중요한 수단이므로 사용하기 편리하게 제공되어야 함에도 불구하고 중앙행정기관 웹사이트 대부분이 플래시나 스크립트를 이용한 주메뉴 내비게이션을 제공하고 있었다. 따라서 플래시나 스크립트를 지원하지 않았을 경우 주메뉴를 이용한 모든 콘텐츠 접근이 불가능하였다. <그림 4-21> 중앙행정기관 주메뉴 제공형태별 기관수 <그림 4-21>은 중앙행정기관 웹사이트의 주메뉴 제공 형식 별 분류해 보았을 때 기관수이다. 스크립트로 제공하는 기관(18), 플래시(34), CSS(6), 텍스트이미지(1) 등이었다. 그러나 플래시로 제공하였을 주메뉴는 웹사이트 이동의 가장 중요한 수단이므로 사용하기 편리하게 제공되어야 함에도 불구하고 중앙행정기관 웹사이트 대부분이 플래시나 스크립트를 이용한 주메뉴 내비게이션을 제공하고 있었다. 따라서 플래시나 스크립트를 지원하지 않았을 경우 주메뉴를 이용한 모든 콘텐츠 접근이 불가능하였다. <그림 4-21> 중앙행정기관 주메뉴 제공형태별 기관수 <그림 4-21>은 중앙행정기관 웹사이트의 주메뉴 제공 형식 별 분류해 보았을 때 기관수이다. 스크립트로 제공하는 기관(18), 플래시(34), CSS(6), 텍스트이미지(1) 등이었다.

<그림 4-21> 중앙행정기관 주 메뉴 제공형태별 기관수

그러나 플래시로 제공하였을 경우도 스크립트와 연동한 경우가 많아 결국 59개 중 52개 사이트가 플래시와 스크립트로 주메뉴를 제공하고 있었으며 스크립트나 플래시가 제대로 동작하지 못할 경우를 대비한 대체기능은 제대로 제공하고 있지 않은 것으로 나타났다. 접근성 준수에서 플래시나 스크립트를 사용해서는 안 된다는 제약이 아니라 사용시 사용자 환경을 고려하여 상황적 제약이 발생하더라도 본래의 역할을 할 수 있는 기능을 제공하라는 것이다. 만약 대체 기능을 제공하지 못할 경우는 처음부터 플래시나 스크립트를 이용한 내비게이션을 구현하지 않는 것이 바람직할 것이다.
따라서 이와 같은 문제점을 해결하기 위해서는 CSS를 이용한 접근성 높은 내비게이션 제공이 절실히 요구된다.

<그림 4-22>에서 보여주듯이 CSS를 사용할 경우 내비게이션이 구조화 되어 CSS를 제거하였을 경우에도 본래 제공하고자 하는 의도와 동일한 서비스를 제공할 수 있다.

<그림 4-22> CSS 미 적용시 모습

<그림 4-23>는 MoonTe.kr 사이트 헤더 영역의 내비게이션 모습이다. 마우스 롤오버(rollover) 효과는 보통 스크립트로 구현하나 CSS를 이용하면 스크립트를 전혀 사용하지 않고도 구현이 가능하다. 또한 이미지 보기 기능을 중지하였을 때 흰 글씨가 보이지 않을 것을 대비하여 헤더 영역에 {background:#228b22 url(img/head.jpg) repeat-x top left;}로 녹색 배경색을 설정하여 접근성을 높였다

<그림 4-23> MoonTe.kr CSS 주 메뉴 네비게이션

<-- 주 메뉴 네비게이션 XHTML 코드>
<body id="intro">
<div id="wrap">
<div id="header">
<h1><img src="img/head_left.gif" width="92" height="95" border="0" alt="사이트로고" align="middle" />Taeeun's a Masters Degree Website</h1>
<div id="nav">
<ul>
<li id="abstract"><a href="index.html">Home</a></li>
<li id="chapter1"><a href="chapter1.htm">Chapter1</a></li>
<li id="chapter2"><a href="chapter2.htm">Chapter2</a></li>
<li id="chapter3"><a href="chapter3.htm">Chapter3</a></li>
<li id="chapter4"><a href="chapter4.htm">Chapter4</a></li>
<li id="chapter5"><a href="chapter5.htm">Chapter5</a></li>
<li id="reference"><a href="reference.htm">Reference</a></li>
 <li id="greeting"><a href="greeting.htm">Greeting</a></li>
</ul> </div> </div>

*/ 주 메뉴 네비게이션 CSS 코드 /*
/* navigation CSS code */   
#nav {width:100%; font-size:110%;margin:0; padding:0; list-style:none; font-weight:bold; }
#nav a{display:block;margin:0 1px 0 3px; padding:2px 2px 5px 3px; color:#343A21;text-decoration:none;font-style:italic;border-color:#F2D14A;border-style:groove; border-bottom:none;font-family:Georgia, serif,Times;background:#ffd700 url(img/on.gif) repeat-x top left; }
#nav ul{list-style-type:none;}
#nav li{float:left; margin:0; padding:0; font-family:"Lucida Grande", sans-serif; font-size:100%; }

일본의 경우는 웹 접근성 관련 표준 JIS X8341-3에서 Style Sheet를 활용하여 문서구조와 표현을 분리하도록 규정하고 있다. 이미 선진국들은 웹 접근성 준수가 이미 법제화 되어 있어 CSS 사용이 보편화 되어있다. CSS를 이용한 사이트 구축이 일반화되고 있으며 구축 사례를 쉽게 확인 할 수 있다. 해외 사례를 들면 다음 그림 예에서 볼 수 있듯이 W3C, 백악관, 미국정부 포탈사이트, 모질라 웹사이트 등 우리가 익히 알고 있는 사이트들도 이미 CSS를 이용한 레이아웃 및 네비게이션을 제공하고 있다.

<그림 4-24 > W3C 웹사이트
자료 : http://www.w3c.org

<그림 4-25> 미국 백악관 웹사이트
자료 : http://www.whitehouse.gov

<그림 4-26>미국정부 포털 사이트
자료 : http://www.usa.gov/index.shtml

<그림 4-27> 모질라 웹사이트
자료 : http://www.mozilla.com/en-US

국내 중앙행정기관 웹사이트 중 비교적 CSS 이용 우수 사례기관으로 재정경제부 웹사이트 들 수 있다. 이 사이트는 프레임이나 레이아웃 테이블 사용 보다는 CSS를 이용한 레이아웃 및 주메뉴를 제공함으로서 접근성을 높였다.

<그림 4-28> 재정경제부 웹사이트
자료 : http://www.mofe.go.kr

다음 <표 4-11>, <표 4-12>는 재정경제부 웹사이트의 XHTML 및 CSS 코드이다. 학술적인 목적으로 본 논문에 게제해도 좋다는 재정경제부 관계자의 동의로 주메뉴 내비게이션의 XHTML 및 CSS 코드를 소개하고자 한다. 먼저 주메뉴 내비게이션 XHTML 코드를 살펴보면 DIV ID로 “top-navigation”을 지정하였다. DIV는 블록 레벨 엘리먼트(element)를 묶을 때 사용하며 문서의 구조화를 도와주는 엘리먼트이다. ID 이름은 한 페이지 내에서 유일한 특정 항목을 지정하고자할 때 사용하며 한 페이지당 한 엘리먼트에만 지정할 수 있으나 CLASS 이름은 한 페이지 내에서 다수의 엘리먼트에 지정할 수 있다. 따라서 CSS와 연결시키기 위한 CLASS 이름을 “depth1”로 지정하였고, 서브메뉴를 연결시키기 위한 CLASS 이름을 “depth2”로 지정하였다. 주메뉴 엘리먼트(element)들은 “menu-1”, “menu-2”, ...순으로 지정하였고 서브메뉴로서 “menu-1-1”, “menu-1-2”, ..., “menu-2-1”, “menu-2-2”, ...순으로 지정하여 share/css/ 디렉토리의 “07main.css” 외부 CSS 파일을 불러들이도록 하였다. 이 사이트 역시 스크립트를 사용하였으나 스크립트를 중지했을 경우 <그림 4-29>와 같이 CSS로 구현된 텍스트 주메뉴를 제공하여 해당 콘텐츠로 이동이 가능하도록 제공하고 있다.

<그림 4-29> 스크립트 중지시 텍스트로 제공되는 주메뉴

<표 4-11> 재정경제부 웹사이트 내비게이션 XHTML 코드

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; harset=euc-kr">
<title>재정경제부에 오신 것을 환영합니다.</title>
<link rel="shortcut icon" href="/images/icon.png" type="image/png">
<script type="text/javascript" src="/share/js/lib.js"></script>
<script src="/common/js/poll_contents.js" type="text/javascript"></script>

<-- 외부 CSS파일인 07main.css 파일을 불러들이는 부분 -->
<link rel="stylesheet" type="text/css" href="/share/css/07main.css">
<script type="text/javascript" src="/share/js/07main.js"></script>
<script type="text/javascript" src="/share/js/ticker.js"></script>
<script type="text/javascript">
         :  중간 생략
<div id="top-navigation"><ul class="depth1">
<li class="menu-1"><a href="/news/news_01_latest.php">재경부뉴스 </a>
<ul class="depth2"><li class="menu-1-1"> <a href="http://mofe.news.go.kr/" target="_blank">경제통뉴스 </a></li>
<li class="menu-1-2"><a href="/news/news_01_latest.php">보도자료 </a></li>
<li class="menu-1-3"><a href="/news/news_03.php?action=list">언론보도해명</a></li>
<li class="menu-1-4"><a href="/news/word_new.php">시사경제용어사전</a></li>
<li class="menu-1-5"><a href="/news/news_05_bbs.php">일일경제지표</a></li>
<li class="menu-1-6"><a href="http://mofe.korea.kr/mofe/jsp/main/MU_news_list.jsp?_
action=news_list&_property=a8_sec_1&_xcode=207" target="new">국내언론동향</a></li>
<li class="menu-1-7"><a href="http://mofe.korea.kr/mofe/jsp/main/MU_news_list.jsp?_
action=news_list&_property=a9_sec_1&_xcode=208" target="new">최근외신동향</a></li></ul></li>
<li class="menu-2"><a href="/lib/">경제정보</a>
<ul class="depth2">     
<li class="menu-2-2"><a href="/lib/lib_02.php?action=list">함께읽고싶은보고서</a></li>
<li class="menu-2-1"><a href="/lib/lib_01_01.php">간행물</a></li>
<li class="menu-2-3"><a href="/lib/lib_11.php">미디어경제이슈</a></li>
<li class="menu-2-4"><a href="/lib/lib_06_12.php">주요경제동향</a>
 :                이하 생략

<표 4-12> 재정경제부 웹사이트 내비게이션 CSS 코드

#top-navigation {
position: relative; width: 950px; height: 90px;
background:url(/images/07bg_top1.gif) no-repeat 0 top;}
#top-navigation ul.depth1 {position: absolute; top: 22px; left: 251px; margin: 0;
padding: 0; list-style: none; z-index: 2; height: 40px;width: 702px; }
#top-navigation li {float: left;}
#top-navigation ul.depth2 {margin: 0; padding: 0;
list-style: none; position: absolute; left: 0;
width: 800px; bottom: -27px; display: none;}
#top-navigation ul ul.depth2 li {
background: url(/images/07menu/top.gif) no-repeat;
padding-left: 6px;}
#top-navigation li.menu-1 ul.depth2 {}
#top-navigation li.menu-2 ul.depth2 {}
#top-navigation li.menu-3 ul.depth2 {left: 100px;}
#top-navigation li.menu-4 ul.depth2 {left: -65px;}
#top-navigation li.menu-5 ul.depth2 {}
#top-navigation li.menu-6 ul.depth2 {left: -65px;  width: 1040px;}
#top-navigation li.menu-7 ul.depth2 {left: 130px;}
        :        이하 생략

자료 : http://www.mofe.go.kr/share/css/07main.css

이상과 같이 해외 및 국내 주요 기관들의 CSS 활용 사례처럼 접근성 향상에 있어서 CSS 활용이 매우 중요한 역할을 하므로 중앙 행정기관 웹사이트들은 보다 폭넓게 CSS를 활용한 접근성 향상에 더욱 관심과 노력을 기울여야만 할 것이다.

 

3. CSS를 이용한 유동 폰트크기 제공

중앙행정기관 사이트들 중 다수 기관들이 글자 크기를 CSS를 이용한 픽셀(pixel) 단위의 고정 크기로 제공하고 있어 브라우저 상에서 이용자가 글자 크기를 조절하기 어려운 경우가 많았다. 글자 크기 조절 서비스를 하는 기관들도 대부분 스크립트를 이용하여 구현하고 있어 스크립트가 제공되지 않을시 이용할 수 없게 된다. 픽셀 단위의 고정 글자크기를 사용하면 저시력이나 고령층 사람들이 사이트의 내용을 가독할 수 없으므로 접근성이 떨어지게 된다. 따라서 글자 크기를 사용자가 임의로 조절 할 수 있도록 처음 사이트 개발 단계에서부터 세심한 배려가 필요하다. 또한 개발자들은 이용자들이 환경에 따라 글자크기를 유동적으로 조절 할 수 있도록 글자 크기 지정을 픽셀 단위가 아닌 퍼센트 단위로 사용하고 줄 간격도 em 단위를 사용하여 접근성을 높여야 할 것이다. 다음 <표 4-13>은 MoonTe.kr 사이트 유동글자크기 CSS 예이다.

<표 4-13> 글자크기 지정 예

body {
margin:0; padding:0;
font-family:Georgia, Times, Verdana, sans-serif;
font-size:small;
background:#f0fed5;}
#content{float:left;
width:70%;
font-size:90%;
color:#333;}

<그림 4-30> 퍼센트 값을 이용한 글자크기 지정 예

MoonTe.kr 사이트는 글자 크기와 레이아웃을 사용자의 환경에 따라 유동적으로 변하도록 구현하였다. CSS에서 전반적으로 지정해야 할 속성들은 body 안에 넣어주는데 <그림 4-30>과 같이 font-size:small 기본 크기로 지정해 놓고 각 콘텐츠에서 필요한 글자 크기는 별도로 퍼센트 단위로 증감하여 사용하였다. <그림 4-32>는 브라우저상에서 글자크기를 확대시킨 후 모습이다.

    

<그림 4-31> 기본 글자크기                                  <그림 4-32> 글자 확대 후

이와 같은 유동 폰트 사용 예는 선진국 사이트에서는 흔하게 볼 수 있다. 다음은 <그림 4-33>, <그림 4-34>는 W3C 웹사이트의 유동 글자크기 사용 사례이다.

     

<그림 4-33> W3C 웹사이트 글자크기 확대 전           <그림 4-34> W3C 웹사이트 글자크기 확대 후

 

4. 유동적 레이아웃

유동 레이아웃과 고정 레이아웃의 가장 큰 차이점은 유동 레이아웃은 브라우저 창의 크기에 따라 스크린 내용이 전체적으로 늘어났다 줄어들었다 한다는 것이다. 그래서 사용자들이 원하는 창의 크기로 읽을 수 있게 해준다. 그러나 아직 많은 사이트들이 테이블과 프레임을 이용한 고정된 레이아웃형식을 이용하고 있다. 고정 레이아웃 형식을 사용할 경우 개발 환경과 다른 사용자 인터넷 환경에서는 원래 제공하고자 하는 모습과 동일한 화면으로 볼 수 없다. 또한 창의 크기를 축소할 경우 원래 화면과 달라져 불편을 겪을 수 있다. 이러한 경우는 장애인 뿐 만이 아닌 누구나 겪을 수 있는 상황적 제약으로서 개인별 어떠한 디바이스 환경에서도 본래의 제공하고자하는 의도대로 제공 되도록 구현하여야 한다. 따라서 사용자의 스크린 해상도나 창의 크기에 따라 자동 조절 되도록 유동적 레이아웃을 사용하는 것이 바람직하다. 유동 레이아웃은 고정 레이아웃보다 디자인 면에서 구현이 까다로우나 레이아웃 설정시 퍼센트 단위로 지정하면 해상도에 따라 화면의 크기를 유동적으로 조절 할 수 있다.

<그림 4-35> 1280×768 해상도

<그림 4-36> 1024×768 해상도

<그림 4-37> 800×600 해상도

<그림 4-38> 창의 크기에 따라 조절되는 레이아웃

<그림 4-39> 창의 크기에 따라 조절되는 미국정부 포털사이트

MoonTe.kr 사이트는 <그림 4-36>과 같이 1024×768 해상도에 최적화 되어 제작되었다. 그러나 제작시부터 사용자 해상도를 고려한 유동 레이아웃으로 제작하였기 때문에 다양한 해상도와 스크린 크기에 구애 받지 않고 원래 제공하고자 하는 의도대로 제공되고 있다. 높은 해상도<그림 4-35>나 낮은 해상도<그림 4-36>에서도 큰 변화 없이 제공되는 것을 볼 수 있다.
또한 <그림 4-38>과 같이 창의 크기를 축소하였을 때에도 전반적인 레이아웃이 동시에 축소되어 본래의 모습과 동일하게 제공되고 있다. 미국정부 포털 사이트도 <그림 4-39>과 같이 창의 크기를 축소하여도 레이아웃이 깨지지 않고 본래 모습과 동일하게 제공되는 것을 볼 수 있다. 이와 같이 유동 레이아웃은 화면 비례형 레이아웃으로서 사용자의 브라우저 창의 크기에 따라서 너비 폭이 변한다. 모바일이나 PDA 및 다양한 환경에 적응된 웹사이트를 제공하기 위해서는 이와 같이 유동 레이아웃을 사용하도록 하는 것이 바람직할 것이다.

 

5. 크로스 브라우징(cross browsing)지원

중앙행정기관 사이트 중 다수 기관들이 브라우저간의 호환성(cross browsing) 을 고려하여 제작되지 않고 있는 것으로 나타났다. 크로스브라우징이란 모든 브라우저 간의 상호 호환성을 의미한다. 웹 접근성은 웹 표준의 상위목적이며 크로스 브라우징은 웹 접근성 가운데 호환성을 충족하는 기술이다. 따라서 여러 브라우저에서 동일한 결과물을 얻을 수 있도록 고려하는 것을 뜻한다. 웹 접근성은 웹 표준의 상위목적이며 크로스 브라우징은 웹 접근성 가운데 호환성을 충족하는 기술이라 할 수 있다.

웹 표준을 잘 지킨다고 크로스 브라우징이 저절로 이루어지는 것은 아니다. 크로스 브라우징은 브라우저마다의 일부 표현방식의 상이함(bug)을 극복하여 모든 브라우저에서 호환성을 갖도록 구현해야 하기 때문에 어렵고 여러 가지 문제점에 부딪힐 수 있다. MoonTe.kr 사이트는 코딩 단계부터 4개(firefox, opera, netscape, explorer)의 브라우저를 모두 구동하여 비교해가면서 서로 동일한 화면과 기능을 제공하도록 보완하여 최대한 크로스 브라우징(cross browsing) 지원을 하였다. 사실 웹 표준을 무시하고 사이트를 만들 때 보다 훨씬 더 많은 시간과 노력이 소요되었다. 정확히 말하면 웹 표준 때문에 시간 소요가 많이 되는 것이 아니라 브라우저 제품의 버그를 극복하는 과정인 크로스 브라우징이 가장 어렵고 까다롭기 때문이다. 다음은 4개의 브라우저에서 MoonTe.kr 사이트 모습이 동일하게 나타나는 것을 볼 수 있다.

<그림 4-40> Internet Explorer 사용시

<그림 4-41> Netscape 사용시

<그림 4-42> Mozilla Firefox 사용시

<그림 4-43> Opera 사용시

MoonTe.kr 사이트는 CSS를 이용한 레이아웃 및 내비게이션의 실증적 예를 제시하기 위하여 제작된 사이트로서 스크립트나 플래시를 사용하지 않고 CSS만을 이용하여 주메뉴 내비게이션 및 레이아웃을 구현하였다는데 큰 의의가 있다. 중앙행정기관 웹사이트들 상당수가 CSS를 이용한 고정크기 폰트, 여백설정, 링크 롤오버효과, 테이블 등 다양하게 이용을 하고 있었으나 레이아웃이나 주메뉴 내비게이션 구현 등에는 활용하지 않고 있었다. 따라서 개발자들은 기존에 숙련된 기술의 편리성 때문에 프레임을 남용하거나 플래시와 스크립트만 고수할 것이 아니라 이미 부분적으로 사용하고 있는 CSS를 더욱 폭넓게 활용하여 웹사이트의 접근성을 높이기 위한 많은 노력과 연구가 필요할 것이다.