IWCAG 1.0 제대로 알기 2: 대체 텍스트의 사용

이 글은 IWCAG 1.0(이하 지침)의 이해를 돕기 위한 연재글 중 두번째 글입니다.

여인의 향기

얼마 전 여인의 향기(Scent of a Woman)라는 영화를 보게 됐다. 탱고 장면이 유명하다는 것만 알았지 내용도 전혀 모른채 보기 시작했다. 하지만 영화가 끝난 후에는 참 많은 생각을 하게 되었다. 웹 접근성을 공부하기 전에는 보이지 않았던 점들이 많이 눈에 띈 것도 그렇고.

영화 줄거리를 간단하게 요약하자면, 군인 시절에 맹인이 되어버린 프랭크(알 파치노)와 아르바이트로 며칠간 그를 돕게된 찰리(크리스 오도넬)가 만나서 서로에게 의지가 되어준다는 이야기이다. 영화의 전반부가 시각 장애인이 살아가는 방식, 그 속에서 느껴지는 고통을 보여준다면 종막에 이르러서는 바른 시각을 가진 한 인간의 면모를 잘 보여준다.

대체 텍스트 이야기를 하겠다고 글을 시작해두고 영화 이야기를 이렇게 풀어놓는데는 나름 이유가 있다. 지침을 두고 어떻게 대처해야 하는가에 대해서는 많은 질문이 나오지만 왜 그래야 하는가에 대한 질문은 사실 많지 않다. 이는 달리 말하면 장애에 대한 이해를 요구하는 일임에도 불구하고 그런 시도조차 쉽게 이루어지지 않는다는 뜻이기도 하다.

다시 영화 이야기로 잠시 돌아가보자. 내가 처음 충격을 받았던 장면은 프랭크가 찰리에게 화를 내던 때였다. 화를 낸 이유가 재밌는데, 공항 앞에서 찰리가 프랭크를 부축하려 하자 프랭크는 '너 장님이야? 그런데 내 팔을 네가 왜 잡아, 내가 널 잡아야지!'라고 말한다.¹

많은 비장애인들이 장애인에 대해 많은 오해를 안고 살아간다. 어떤 배려가 도움이 될 수 있는지를 아는 것도 중요하겠지만 정말 그들에게 필요한 일이 무엇인지를 알기 위해서는 그들이 어떻게 살아가는지를 이해할 필요가 있지 않을까.

대체 텍스트

웹 접근성 관련 교육을 나가거나 하면 흔히 이야기하는 내용 중 하나가 '대체 텍스트만 제대로 넣어도 웹 접근성 제고 작업의 70%는 한 것이다'라는 말이다. 이런 이야기를 하는 이유는 웹 사이트에서 텍스트를 제외하고 가장 빈번하게 사용되는 것이 이미지이기 때문이다. 일반적으로 사이트에서 사용하는 이미지는 페이지 개수의 10배수 이상, 아니 페이지별로 다루는 콘텐츠가 많다면 기하급수적으로 늘어난다. 물론 이것은 사이트를 운영하는 측에서 원하는 디자인에 따라 달라지는 거겠지만 인터넷 회선이 빨라지고 브라우저의 멀티미디어 지원이 확대되면서 이미지의 사용은 아주 보편적인 일이기도 하다. 다만, 이미지를 이용하는 것만큼 대체 텍스트를 잘 제공하는 것이 시각 장애인을 위한 제작자의 최소한의 에티켓이라 할 수 있겠다.

그렇다면 대체 텍스트를 어떻게 제공하는 것이 도움이 될 것인가를 살펴보자. 이에 관한 항목은 지침의 제일 처음에 나온다.

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

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

이미지에 alt(alternate text)라는 속성을 이용해 이미지와 동일한 내용을 텍스트로 전달할 수 있도록 작성하라는 뜻²이지만, 실제로 사용하는 이미지의 종류가 워낙 많다보니 아무래도 좀 막연한 구석이 있다.

사용자를 배려하는 일

대체 텍스트는 단순히 스크린리더 사용자에게 이미지의 내용을 알려주기 위해서만 존재하는 것은 아니다. 저사양 PC나 저속회선을 이용하는 경우, 또 텍스트 브라우저 사용자 등 이미지가 로딩되기 어렵거나 이미지를 출력하지 않는 상황에도 대응할 수 있도록 존재하는 속성이라 할 수 있다. 어떤 조건에서도 콘텐츠를 사용자에게 전달하는 것, 그것이 대체 텍스트나 대체 콘텐츠를 제공하는 가장 근본적인 이유라 하겠다.

따라서 이미지와 대체 텍스트가 전달하고자 하는 바는 같아야 한다. 텍스트를 이미지로 작성한 경우에는 물론이거니와, 그래프나 그림(사진)이라도 설명 가능한 이미지는 그 설명이 대체 텍스트로 제공되는 것이 바람직하다.

스크린을 이용한다면 정보는 평면(2차원)적으로 배열되고 이를 시각적으로 인식하는 사람들은 배치 면적에 따라 중요도의 차이를 알 수 있다. 그러나 음성이나 브레일 장치³로 출력되는 내용은 시각에 의한 인식과는 달리 1차원에 가깝다. 온 동네가 정전인데 배터리로 작동하는 라디오만 한 대 있다고 생각해보라. 음성 정보가 연속적으로 나열되기 때문에 언제 뭐가 나올지 알 수가 없다. 다행히도 웹 사이트는 사용자 입력을 통한 상호 작용이 가능하며, 스크린리더는 가상커서모드⁴를 지원한다. 그러니 이미지를 문맥상에 사용할 경우에는 대체 텍스트 제공에 더욱 주의하는 것이 좋겠다.

이미지를 잘 만드는 일부터

대체 텍스트를 제대로 제공하는 것도 중요하지만 그 전에 고민해야할 점이 있다면 이미지를 만들 때부터 신경써야 한다는 것이다. 텍스트로 표현 가능한 내용을 이미지로 표현하는 것은 그 형상을 통해 전달하고 싶은 것이 있거나, 이미지를 이용했을 때 훨씬 더 쉽게 전달할 수 있는 내용⁵이 있을 경우라고 볼 수 있다.

그러나 많은 사이트에서는 이미지를 사용하는 본래의 의도를 망각하고 습관적으로 이미지를 사용하고 있는 것이 사실이다. 그 이유는 이미지를 활용하여 사이트의 형태적 아름다움을 추구하기 때문이 아닐까 한다. 물론, 형태적 아름다움을 추구하는 것이 나쁜 것은 아니다. 다만, 단순히 예쁘게 만들기 위하여 내용을 인식하기 어렵게한다면 그것은 본말이 전도된 경우가 아니라 할 수 없다.

콘텐츠가 아니라 장식으로 사용되는 이미지는 alt=""와 같이 빈 대체 텍스트를 제공하는 방법도 있겠지만, 웹 표준 이야기에서 누누히 다루듯이 가급적이면 CSS 등을 이용해서 배경 처리하는 것이 좋은 방법이 될 수 있다.

대체 텍스트가 너무 길다면

지침은 alt로 설명하기에는 너무 많은 내용이 제공되어야 한다면 img 태그에 longdesc(long description)라는 속성을 이용하여 대체 콘텐츠를 포함한 페이지 URI를 참조하도록 하는 것을 권장하고 있다.

longdesc 속성에 대한 논란⁶이 있는 것은 사실이나 지난해 12월 발표된 WCAG 2.0에서는 여전히 longdesc 사용을 다루고 있다. HTML이나 XHTML의 다음 표준안이 제정되기까지 걸리는 시간, 그리고 브라우저에서 새 표준안을 수용하는 시간, 새로운 브라우저를 사용자들이 보편적으로 사용하게되는 시간까지 고려한다면 longdesc는 쉽게 버릴 수 있는 속성이 아닌듯 하다. 정보 제공자의 입장에서 longdesc를 이용하여 대체 콘텐츠를 제공하는 것이 불편하다면 콘텐츠를 좀 더 작은 단위로 쪼개어 표시할 수 있도록 설계하는 것은 어떨까 한다.

longdesc를 사용할 때 흔히 하는 실수라면 URI 값을 제공하지만 실제로는 해당 주소가 가리키는 페이지가 없다거나, longdesc만 제공하고 alt를 제공하지 않는 경우 등이 있다. 기왕 제공하는 대체 페이지라면 꼼꼼하게 작업해서 필요한 사람들이 쓸 수 있도록 하는 것이 좋지 않겠는가.

프랭크가 아니라 찰리

여인의 향기는 뭐니뭐니해도 탱고 장면으로 유명한 영화다. 사람들은 앞을 볼 수 없지만 그 체취와 분위기로 상대를 파악하는, 여인에게 당당히 탱고를 신청하는, 또 발을 밟거나 밟히거나 꿋꿋히 춤을 춰내는 프랭크를 기억한다. 하지만, 웹 사이트를 제작하는 우리가 주목해야 할 점은 탱고를 출 줄 아는 맹인 프랭크가 아니라, 춤을 시작하기 전에 플로어의 배치를 설명해주는 찰리의 배려가 아닐까 한다.

또한 우리가 프랭크에 대해 기억해야 할 것은 찰리를 누구보다도 열심히 변호한, 학생들에게 무엇을 가르쳐야 하는지에 대해 열변을 토했던 한 '인간'이라는 점일 것이다. 시력을 상실했다는 사실이 지적 수준의 저하를 의미하는 것은 아니다. 그는 단순히 앞을 볼 수 없을 뿐이지 그 외의 능력은 똑같은, 아니 외려 더 뛰어날지도 모르는, 나와 같은 인간임을 잊지 말아야 할 것이다.

지침에 대한 설명을 한다고 시작한 글이 영화 감상처럼 변한 감이 다소 있지만 잔소리가 아니라 이해를 돕기위해 든 예라고 생각해주시면 좋겠다 (이 연재를 시작한 후에 보게된 영화라 엔딩 크레딧이 올라갈 때가 되니 어느새 장애를 소재로 다룬 영화⁷를 목록으로 작성하고 있더라는...). 꼭 장애인이 주인공이여서가 아니라 보편적 감동을 주는 영화기에 아직 안보신 분이 계시다면 꼭 한번 보시길 권하고 싶다.

참고

• 웹 접근성 연구소의 대체 텍스트 관련 사례
• Techniques for WCAG 2.0
• HTML 4.01: the IMG element
• W3C schools: HTML <img> alt attribute
• W3C schools: HTML <img> longdesc attribute
• CSS 2.1: Recognized media types

연재 목록