4. 그래픽

4. 그래픽

가. In-line 그래픽

<문제점>

● 시각장애인들은 그래픽만으로 되어 있는 경우, 정보를 사용할 수 없게 된다.

● 모뎀과 같이 느린 네트워크 연결망을 사용하여 정보에 접근하는 사람들은 Autoload 기능이 작동할 때만 그래픽 정보에 대해 느리나마 접근이 가능하며, Autoload 기능이 작동하지 않으면 그래픽 정보에 대한 접근이 불가능하다.

● 만일, Web 문서나 그 파생물이 전화나 다른 청각적 수단을 통해 사용이 가능하도록 되어야 한다면, 그래픽 정보를 제시할 수 있는 대안이 마련되어야 할 것이다.

● Lynx와 같이 Text 위주의 Browser를 사용하여 정보에 접근하는 장애인들의 경우, 그래픽에 대한 접근은 불가능하다. 혹자는 그래픽을 보고자 희망하지만, 다른 이들은 그래픽에 접근할 수도 없다. 인지적 장애나 독서 장애 등의 경우는 Text 양식으로만 구현되는 정보에 대한 이해와 상호작용에 매우 큰 어려움을 갖게 될 것이다.

<현재의 해결 전략>

접근 1. ALT-Text

Text 기반의 Browser로 보거나 Autoload 기능이 작동하지 않는 경우, Image 대신에 디스플레이 될 수 있는 대안적인 Text 설명(ALT-Text)를 제공해 주어야 한다. 그 양식은 다음과 같다.

<IMG SRC="http://WWW.Your.host/filepath/filename.gif"

ALT="Alternate Text describing the picture.">

ALT-Text의 힌트와 비결

(1) 내용을 간략히 하라. 차트나 다이어그램에 대한 서술에 관해서는 아래의 두 가지 방법을 참고하라.

(2) 그래픽이 무엇이며 어떤 모양인가를 기술하는 것보다 그것의 기능을 기술하는 것이 훨씬 쉽다.

(3) Image에 대한 Height 및 Width tag를 사용하면 ALT-Text의 줄이 바뀌게 되어 LYNX 사용자 외에는 읽을 수 없게 만드는 문제를 야기할 수도 있다. 몇몇 Browser들은 폰트 크기에 대한 태그도 지원하게 될 것이다. 폰트의 크기를 줄임으로서 Text는 특정 부분에 맞도록 만들어질 수 있다.

(4) 링크로 사용되는 Text의 끝에 구둣점이나 스페이스를 포함하여 여러 개의 링크 어구들이 섞이지 않도록 한다. 이에 관한 자세한 것은 Text Anchor를 참조하라.

(5) 그래픽 상에서 문맥상의 변화에 대한 시각적 단서가 주어지면, 이것은 ALT-Text에도 반영되어야 한다. 예를 들어, Graphic Line에 대한 ALT-Text가 "Section 2: 오늘의 날씨"라는 Text가 있다고 하자. 그런데, 그 새로운 Section에 이미 Bold Text로 제목이 붙어 있다면 그냥 "Section 2"라고만 표기한다. 또한 그것이 Section의 제목에도 들어 있다면 단지 '----' 이나 '---2---', 또는 수평선을 사용할 수도 있을 것이다.

(6) 문맥 변화를 위한 시각적 화면구성을 위해 수평선을 사용하려 한다면, <HR> 태그보다는 Graphic line을 사용하길 권한다. 이렇게 하면 Image는 ALT-Text를 가질 수 있다. 이 때, Text 설명은 각 행의 기능을 나타내야 한다. 사용되는 ALT-Text는 또한 정안인 사용자들에게 Dash를 사용하여 수평선을 나타낸다.

<IMG SRC="http://www.your.host/filepaffiAiorizontalrule.gif"

ALT="-------------Section 2--------------">

(7) 중요한 Bullet들에 대해서는 ALT-Text로 숫자 또는 글자를 사용하여 그것들이 음성으로 출력되도록 한다.

(8) Site에서 첫번째로 나타나는 항목들 중의 하나는 사용되는 통신 규약에 대한 설명이어야 한다. 예를들어, ALT-Text 없는 Image가 Web 페이지의 문맥을 이해하는데에 영향을 주지 않는다는 점을 분명히 해야 한다. 이렇게 되면 혹자는 ALT-Text를 다움과 같은 용도로 밖에는 사용하지 않게 된다.

Text 기반의 Browser나 화면 읽기 프로그램을 사용하는 경우, Image는 나타나지 않는다는 점을 기억해야 한다.

접근 2. 보다 긴 서술(각주나 별도의 페이지에 대한 서술)

ALT-Text 설명은 본질적으로 대개 간략하고, 그래픽 요소들의 기본적인 목적을 정의한다. 가령, "XYZ사의 로고"나 "ZZZ Center Building의 사진" 등이다. 이들은 유익하기는 하지만 많은 정보를 제공하지는 못한다.

방법 2-1 D-Links

보다 상세한 정보를 제공하기 위해 WGBH는 대문자 'D' Text Anchor를 그림이나 그래픽 옆에 위치시켜 그것들이 그래픽에 대한 더욱 상세한 설명에 연결되도록 하는 방법을 주창해 왔다. D-Links에 관한 보다 상세한 정보를 알려면 WGBH 홈페이지(http://www.boston.com/wgbh/pages/access/accessinst

ructions.html)를 참조하라.

예를 들어 위의 예에서 "XYZ사의 로고"는 전 세계에 사는 여러 민족들이 손을 잡고 태양을 등지면서 서 있는 모습들로 구성되어 있다. 여기서 지구는 특정 대륙이 중심이 가지 않도록 위치하고 있다. 이와 같이, ALT-Text의 설명보다 훨씬 긴 설명이 제공될 수 있는데, 그럼에도 불구하고 그것은 본래의 그래픽 페이지를 혼란하게 만들지는 않는다.

D-Link는 그리 설명이 자세하지 않은 링크이기 때문에, 이 방법을 사용할 때에는 어떤 접근적 특징이 포함되어 있는지에 대한 언급이 어딘가에 있어야 하며, 그럼으로써 대문자 'D'가 Image에 대한 설명으로 연결시켜 줄 것임을 알 수 있도록 해야 한다.

다른 방법으로는 "D-Link에 관한 사례와 논의를 보려면 이곳을 클릭하시요"와 같이 설명이 자세한 Text Anchor를 사용하는 것이다.

방법 2-2 설명에 연결되는 투명한(Transparent) Image

또 다른 방법으로는 Image의 Text 설명에 연결되거나 각주처럼 현재 페이지의 하단에 있는 Text 설명에 연결되는 투명한 Image를 만드는 것이다. 전자의 예제로는 WINGS Site(http://www.wings.usps.gov)를, 후자의 예제로는 John Gill의 The Smart Card and Missing Link Pamphlets Site(http://trace.wisc.edu/Text/ext_docs/rnib/missLink/mlhome.html)를 참조하라.

Smart Card의 예에서처럼 페이지의 맨 위쪽 첫 번째 Image의 ALT-Text는 페이지의 형식에 대한 설명에 연결되는 링크이다. Image가 화면에 띄워질(load) 때 이 그래픽은 배경과 색상이 같기 때문에 보이지 않는다. 이런 경우에 보이지 않는 Image는 그래픽을 띄우지 않는 사용자들에게 모든 종류의 맥락 단서를 제공해 주고, 그래픽을 띄우는 사용자들에게는 혼란을 일으키지 않는다.

접근 3. 대체 페이지

장식 또는 Anchor를 위해 in-line 그림을 담지 않는 대체 버전을 제공한다. 대신, Text를 통한 서술을 포함하는 것이다. 이렇게 되면 홈페이지는 사용자가 그래픽 버전과 Text 버전 사이를 자유롭게 옮겨 다닐 수 있도록 한다는 내용을 홈페이지의 정상에 삽입해야 한다. 목록에 몇개의 항목이 있는지를 명시하는 것도 유익할 것이다. 즉, 여섯개의 항목을 가진 목록이 있다면, 사전에 "여기에는 6개의 항목이 있음"이라고 명시하는 것이다. 보다 자세한 내용은 Jan Richard의 논문 Site(http://www.utirc.utoronto.ca/AdTech/rd/html/htmlte

xt.html)이나 이 글의 "목록(List)" 부분을 참조하라.

또한 그래픽 버전에 위의 접근 1에서 지적한 Alt-Text 태그를 붙이는 것도 좋다. 방법 2에서 말한 대체 페이지로의 링크도 좋은 방법이다. 각각의 그래픽 홈페이지에 대한 Text 페이지를 만드는 것은 관리해야 할 페이지를 두배로 늘린다는 것을 쉽게 알 수 있다. Text 버전으로 된 페이지를 유지하고 생성하는 데에는 다음의 세 가지 방법이 있다.

방법 3-1 손으로 하는 방법

이따금 접근할 수 없는 출력 양식에 대해 Text 버전을 만들 필요가 발생하는 수가 있다. 이런 경우는 단지 몇개의 페이지만을 포함하면 된다.

방법 3-2 데이타베이스

사용자가 요구하는 HTML을 생성할 수 있는 데이타베이스로 구축된 Server를 만든다. 이 방법으로는 그래픽을 포함할 수도 있고, 그렇지 않을 수도 있다. CommerceNet Server(http://www.commerce.net)가 이것의 좋은 예이다.

방법 3-3 필터

이 방법은 위의 방법 3-2와 흡사하나, Server 내에 CGI(Common Gateway Interface)로 존재하는 필터를 담고 있다는 점에서 다르다. 홈페이지는 ALT-Text나 대체 페이지로 구성되며, 사용자에게는 그래픽이나 Text로 번역되어 제공된다. 그러나 이 방법은 몇가지 단점을 가지고 있기도 하다. 모든 홈페이지가 데이타베이스 방법과 같이 즉각 제공되어야 하므로 필터 프로그램이 사전에 Text 버전을 만들기 위해 off-line으로 사용되지 않는다면 작동이 중단될 수도 있다. 다음으로 이 방법은 AltPage CGI를 가진 Server에서만 작동한다. 다른 Server에서 다른 페이지에 대한 Reference를 만들 때마다 필터는 동작하지 않을 것이다. 다른 Server의 Image Map은 Client 쪽의 Image Map을 사용하지 않는 한 특별한 문제가 될 것이다. 끝으로 이러한 필터가 Text 페이지 버전을 만들 수 있으나, 이는 공식에 의해 이루어지기 때문에 좋은 양식으로 제공되지 않거나 해석하기에 용이하지 않을 수 있다. Text 형식 하에서 이해될 수 있도록 대체 페이지를 제공하거나, 방법 3-1에서처럼 각 Image Map에 대한 ALT-Text를 제공하는 것이 매우 효과적일 것이다.

<장래의 해결 전략>

● 모든 그래픽 인자들은 데이타 구조의 일부로 Text 서술에 관한 부분을 포함하게 되는데, 이는 그래픽 내에서 그래픽을 대신해서 구현될 것이다. 이의 좋은 예가 휴대용 네트워크 그래픽(Portable Network Graphic) 데이타 형식이다.

● 모든 Browser는 그래픽, Text, 혹은 양자 모두를 선택할 수 있는 옵션을 포함하게 될 것이고, 이는 사용자 세팅 내에서 조정이 가능해져야 한다.

나. 별개의 Viewer에 기초를 둔 그래픽

<문제점>

종종 HTML 페이지를 볼 때, 사용자들은 큰 규모의 그래픽 Image를 불러내어 보여주는 Image나 Anchor 어구들을 만나게 된다. 이들은 대개 화면상에 분리된 각각의 윈도우에서 다른 Viewer를 사용하여 나타낸다.

● 시각장애인들, 특히, 전맹의 경우에는 이 부분에 대한 정보에 전혀 접근할 수 없게 된다.

● 속도가 느린 네트워크를 사용하는 경우에는 그래픽을 담고 있는 정보가 자신에게 필요한 내용인지의 유무를 알려고 전송을 받는데 상당히 오랜 시간이 소요된다는 불편함이 있다.

● 적절한 지원 프로그램이 없다면 사용자들은 정보를 볼 수 없다.

<현재의 해결 전략>

이와 같은 그래픽 형식에 대해 ALT-Text를 제공하는 유일한 방법은 그래픽에 대한 Text 서술을 포함하는 데이타 파일을 제공해 주는 것이다. 비록 그래픽 저장 양식들이 데이타 구조내에 Text의 저장을 허용하기는 하지만 Server, Browser, Viewer는 이에 대한 접근을 허용하지 않는다.

접근 1(일반적으로 권장)

Text 설명이 포함되어 있는 별도의 페이지로 연결되는 Anchor를 그림을 불러내는 Anchor 바로 옆에 위치시킨다. 앞 장에서 논의한 바와 같이, WGBH는 문서 내에서 그래픽이나 그림 바로 다음에 대문자 D를 사용하기로 하였다. 큰 그림에 대한 Anchor로서 Thumbnail 버전의 그림을 사용하고 있다면 그림 설명에 대한 Anchor를 위해 대문자 D-Link를 매우 효과적으로 사용할 수 있을 것이다.

접근 2

그래픽을 설명하는 페이지에 대해 설명하는 Text Anchor를 포함한다. 예를 들어, "xxx에 대한 설명"이라는 내용의 Text Anchor를 포함시킨다.

접근 3

만약 사용자가 Text로만 된 페이지를 요청하면 그래픽에 관련된 페이지의 내용을 Text 페이지의 그것으로 대치해 준다.

일반적으로 많은 사용자들이 속도 때문에 Text로만 된 버전을 선호하고, 때때로 흥미 있는 그림을 보기 원할 수 있기 때문에 '접근 1'이 선호되고 있다. 또 시각장애 사용자들도 다른 사람에게 보여주거나, 다른 사람으로 하여금 자세한 설명을 할 수 있도록 하기 위해 그림을 원하기도 한다. 두 가지 모두는 '접근 3'에서 보다는 '접근 1'에서 훨씬 쉽다.

<미래의 개선 방안>

언젠가는 TIFF, JPEG, PICT 혹은 그 밖의 다른 그래픽 파일 형식들이 그림을 설명하는 Text의 사용을 가능케 하도록 발전할 것이다. 이것은 PNG에서와 같이 그림에 대한 검색, 색인, 접근에 있어 매우 유익할 것이다. 이렇게 되면 외장형 또는 Helper Viewer는 그래픽이나 이에 관련된 Text 혹은 이 두 가지 모두를 화면에 표시해 줄 것이다. Server 역시 Browser의 요구에 따라 그래픽, Text 혹은 두 가지 모두를 전송할 수 있게 될 것이다. 자바 애플릿은 현재 위의 기능이 가능하도록 되어 있으나, 아직 미숙한 것으로 알려져 있다.

다. Image Map

<문제점>

Image Map은 사용자들에게 Web 페이지에서 중요한 부분을 클릭할 수 있도록 해준다. 시각적 능력과 그래픽 Image의 특별한 부분을 클릭할 수 있는 능력을 요하는 이런 유형은 시각장애인들의 접근을 완벽하게 차단하고 있다. 그림이 Text로 설명되어 있어도 시각장애인들은 어떤 곳을 클릭해야 할 지를 알 수 없는 것이다. 페이지에서 활성화되어 있는 대상에 탭 키로 이동할 수 있는 Microsoft Internet Explorer 같은 Browser를 사용하지 않고는 불가능하다.

Image Map은 매우 폭넓은 분야에서 사용된다. 어떤 경우에는 메뉴를 멋있게 만들기 위한 목적과 같이 간단히 사용되기도 하며, 도표나 그림의 재현과 같이 복잡한 용도로 사용되기도 한다.

<현재의 해결 전략>

현재 접근을 제공하는 다섯가지의 전략이 있다. 이들 대부분은 Image Map에 대해 ALT-Text를 제공하는 방법을 포함하고 있다.

접근 1(권장)

각각의 링크들에 대해 ALT-Text를 사용하여 사용자측 Image Map를 만든다.

Lynx, Microsoft Internet Explorer, Netscape Navigator와 Communicator 등은 사용자측 Image Map를 지원하고 있다. 사용자측 Image Map과 Server측 Image Map은, Image 상에 있는 모든 링크 또는 "Hot Spot"에 관한 정보가 Image Map 그림과 함께 Browser에 보내진다는 점을 제외하고는 유사하다. 일종의 Image Map Line을 위한 ALT-Text로 설명이 URL과 함께 제공된다면, Browser는 Image Map 링크들과 관련된 Text를 화면에 표시할 수 있다. Image Map에 Text를 포함시키기 위한 방법은 다음과 같다.

<IMG SRC="welcome.gif" ALT="Image Map of Trace Documents"

USEMAP="#map1" BORDER=0>

</MAP>

접근 2(권장)

전체 페이지의 대안적 형식으로 Text로만 된 페이지에 대한 Anchor를 만든다. Image Map 대신에 그것을 통해 연결 가능한 URL을 Text Anchor 목록으로 만들어서 제공한다.

접근 3(혼란을 피하기 위해 매우 좋은 방법일 수 있음)

Image Map 바로 아래에 Text Anchor 목록을 만들어서 Image Map의 선택 목록을 알려 준다. 이는 때때로 혼란을 야기할 우려도 있다. 따라서 Image Map의 Alt-Text는 Image Map이 바로 다음에 Text 형태로 제공됨을 알려주어야 한다.

접근 4

Image Map으로 단일한 그래픽을 사용하는 대신 각각의 Alt-Text를 갖는 일련의 Image를 사용한다.

접근 5

각각의 Image Map 링크에 투명한 GIF를 만든다. 이 Alt-Text는 각각의 Image Map 옵션을 대체하는 링크로 작성할 수 있다. 이로써 그래픽을 사용하지 못하는 사용자들도 Image Map에 나타나는 모든 옵션을 볼 수 있게 되고, 그래픽을 볼 수 있는 사용자들은 보이지 않는 Image에 대해 주목하지 않을 수 있다.

다음의 예는 Bill Shackleton에 의해 제공된 것이다. 그림의 Image Map은 사용자가 클릭하는 부분에 따라 여러 가지 요소에 대한 설명 부분으로 이동할 수 있도록 연결해 주는 오토바이 그림이다(바퀴, 기름탱크 등). 보이지 않는 그래픽은 다음과 같다.

<a href="wheels.htm"><img src="invisible.gif"

alt="Description: Wheels" border=0></a>

<a href="gastank.htm"><img src="invisible.gif"

alt="Description: Gas Tank" border=0></a>

<a href="motor.htm"><img src="invisible.gif"

alt="Description: Motor" border=0></a>

라. 색상

<문제점>

배경, 그래픽, Text의 색깔, 화려한 색상은 Web 페이지의 설계에 흔히 사용된다. 이것이 시각적으로 멋있고 화려할 지는 모르나, 시각장애인들은 이로 인해 내용을 읽을 수 없게 되기도 한다.

<현재의 해결방안 >

다행히도 사용자들이 Browser 안에서 환경을 조정함으로서 어느 정도 이 문제를 극복할 수 있게 되었다. 즉 사용자들은 배경 Image를 화면에 띄우지 않을 수도 있게 되었으며, 색깔, Text, 폰트, 링크, 배경 등을 결정할 수 있게 되었다(PDF나 Style Sheet 등은 사용자들에게 이러한 기능을 제공하지 않는다). 따라서 홈페이지 설계자들은 이 부분에 주의를 기울여야 한다.

<해결 전략>

(1) 읽기 쉽게 하기 위하여 배경 패턴과 색상은 글자와 확실한 대비를 이루어야 한다. 여기서 배경이란 Image와 페이지의 배경 둘 다를 가르키는 것이다. 밝은 계열의 초록, 파랑, 노랑, 오렌지색 바탕 위에 어두운 계열의 파랑, 보라, 자주 혹은 검은색 글자를 사용하는 것이 읽기에 가장 용의하다. 유사한 색깔은 함께 사용하는 것을 피하는 것이 좋다. 예를 들어, 파랑색 배경에 진파랑 글자를 위치시키는 것은 피하는 것이 좋다. 색조에 대한 보다 자세한 정보는 이 글 뒷부분에 제시된 '참고문헌' 중 Lighthouse 팜플렛을 참조하라.

(2) 색맹 사용자들이 홈페이지를 쉽게 읽을 수 있도록 만드는 색깔을 선택하라. 이를 시험하는 좋은 방법으로는 당신의 홈페이지가 흑백 모니터에서 읽기가 용이한 지를 알아보는 것이다.

정보를 전달하는 다른 수단을 이용하여 색상 coding을 풍부하게 만든다. 예를 들어 용어해설용 단어를 빨강색 뿐 아니라, 볼드체로도 구별하여 나타내는 것이다.

또한 모든 홈페이지들이 똑같은 방법을 사용하지는 않는다는 것을 명심하라. 홈페이지의 색깔 지원에 관한 보다 심도있는 논의를 원하는 사용자들은 JQ Johnson의 전자우편(http://www.trace.wisc.edu/HTMLgide/jq.color)을 참조하라.

마. Alt-Text와 D-liknks

Text와 D-liknks에 관한 상세한 논의는 이 글 뒷부분에 수록된 '부록'을 참조하라.