시각장애인과 인터넷

2009.03.04 글쓴이 youknowit

컴퓨터와 인터넷은 시각장애인에게 거의 ‘혁명적’인 정보 접근 수단을 제공해 준다. 종래 시각장애인은 점자로 변환된 매우 제한된 분량의 정보에 의존하거나, 누군가가 읽어 주는 정보에 의존할 수 밖에 없었다(정보 ‘의존성’). 그러나, 인터넷과 음성합성기술이 접목된 지금은 시각장애인이 과거에 겪었던 정보 접근의 제약과 열악한(의존적) 지위를 거의 완전히 해소할 수 있는 기술적 기반이 마련된 셈이다. 어떤 정보건, 문자(text)로 된 내용이 인터넷, 이메일, 전자 파일 등의 형태로 제공되기만 하면, 그 내용을 누구의 도움도 필요없이 음성으로 변환하여 들을 수 있게 되었기 때문이다. 인터넷은 시각장애인에게야 말로 가장 중요한 매체이다.

우리 공공기관 웹사이트들이 장애인 정보 접근을 위하여 지금껏 해 온 ‘배려’는 대체로 다음 세가지로 요약될 수 있다:

  • 별도의 ‘장애인 전용’ 페이지(텍스트 페이지)를 걸어 둔다;
  • 웹사이트에 접속할 때마다, 예를 들어, “대한민국 국회 홈페이지에 오신 것을 환영합니다…”라는 음성 파일을 자꾸 틀어 준다;
  • 웹사이트를 둘러보는데 필요한 메뉴나 링크 제목 등, 글자(text)로 표현되어야 할 내용을 굳이 그림(image)으로 제시한 다음 (예를 들어 , btn_mainnav02), 이 ‘그림’을 보지 못하는 이용자를 위하여 대체 텍스트를 페이지 소스에 제공한다. 예를 들어, <img src=“min1.gif” alt=“전자민원” title=“전자민원” /> 과 같은 방식이다.

어떤 분이 이런 ‘기상천외’한 아이디어를 처음 생각해 냈는지 그저 궁금할 따름이지만, 세계 어디에도 이런 황당무계한 일을 하는 곳은 없다. 웹페이지 소스를 국제 표준[*]에 맞게 작성하면, ‘별도의’ 텍스트 전용 페이지는 애초부터 필요가 없다. 하나의 웹페이지를 그래픽 웹브라우저로 접속하면 그림이 포함된 페이지가 화면에 나타나고, 텍스트 기반 웹브라우저로 접속하면 텍스트로 된 내용만이 이용자의 화면에 나타나는 것이 웹페이지와 웹브라우저 소프트웨어의 기본적 기능이다.
[*]현재 인터넷 기술에 관한 국제 표준은 World Wide Web Consortium (http://www.w3.org)과 Internet Engineering Task Force 라는 단체(http://www.ietf.org)가 주축이 되어 형성되고 있다.

‘별도의’ 장애인 전용 페이지를 부끄러운 줄도 모르고 걸어 둔다는 것 자체가 웹페이지 제작 기술을 전혀 모른다는 것을 만천하에 드러내 보이는 것이다. 그 뿐 아니라, 이른바 ‘장애인 전용’ 페이지는 일반인이 사용하는 페이지에 비하여 형편 없이 부실한 내용만이 담겨 있고, 그것마저도 업데이트가 전혀 안되고 방치되는 그야말로 아무짝에도 쓸모 없는 페이지에 불과하다.

더욱 난해한 점은, 홈페이지 한켠에 이른바 ‘텍스트 전용’ 페이지로 갈 수 있는 링크가 있긴 하지만, 정작 홈페이지 그 자체가 ‘그래픽 전용’으로 설계되어 있다는 점이다. 시각장애인이 사용하는 텍스트 기반 웹브라우저로는 아예 시작(홈) 페이지부터 이용하지 못하기 때문에 우리 공공기관 사이트들이 저마다 걸어 두는 ‘텍스트 전용’ 페이지는 실은 그래픽 웹브라우저 이용자들만이 사용 가능한 텍스트 페이지인 셈이다. 시각 장애가 없는 자만이 그 페이지 링크가 어디에 있는지를 ‘눈으로 보고, 마우스를 클릭하여’ 찾아갈 수 있는 페이지인 것이다. 웹페이지 납품 업자의 시각에서 말하자면, ‘장애인 전용 페이지’는 시각장애인이 ‘들을 수 있는’ 것이 아니라, 눈은 멀쩡하고 웹 기술은 전혀 모르는 공무원들에게 ‘보여주기 위한’ 페이지일 뿐이다.

웹사이트가 음성 파일을 ‘들려주는’ 것 역시 ‘展示(보여주기) 행정’의 일종이지만, 이것은 ‘장애인 전용’ 텍스트 페이지보다 더욱 구체적이고 직접적인 ‘피해’를 시각장애인에게 가하는 행위이다. 시각장애인은 어차피 웹페이지에 접속할 때, 페이지 중 텍스트로 된 내용을 즉시 음성으로 변환하여 읽어 주는 소프트웨어를 스스로 마련하여 사용하고 있다. 따라서 웹사이트가 별도의 음성파일을 틀어 버리면, 페이지 내용을 이미 읽기 시작한 부분과 웹사이트가 틀어대는 음성파일의 소리가 뒤섞여 나오기 때문에 페이지 앞 부분에 있는 내용이 무엇인지를 알아듣기가 어렵게 된다. 따라서 웹페이지가 자동 출력하는 음성은 시각장애인의 인터넷 이용을 확실하게 방해하는 역할만 하고 있다. 시각장애인을 위한답시고 음성파일을 틀어대는 것은 그야말로 무식의 극치를 드러내 보이는 것이다.

멀쩡한 한글을 굳이 그림으로 바꾸어 제시하는 우리 업계의 ‘디자인 관행’은 웹페이지를 ‘이쁘게’ 만들어 납품하고자 하는 욕구와 CSS (Cascading Style Sheet) 기술에 대한 무지가 합쳐져서 생겨난 것이다. 메뉴 항목의 위치, 글자 색상, 배경 색상, 배경 장식, 글자 크기, 폰트 종류, 폰트 장식 등은 CSS기술을 제대로 구사하면 매우 정확하고 미려하게 만들 수 있다. 그러나, 그 기술을 알지 못하는 업체는 <table> 태그를 페이지 소스에 사용하여 눈에 보이지 않는 ‘표’를 만들어 각 메뉴 항목의 위치를 고정한 다음, 글자는 아예 그림으로 바꾸어 게시하는 ‘편법’을 사용해 온 것이다. 페이지 하나를 보려면 수십 개의 그림 파일을 내려받아야 하는 이런 비효율적인 편법은 ‘초고속 인터넷 망’ 덕분에 국내에서 접속하는 경우에는 그리 문제가 되지는 않으나, 외국에서 한국의 페이지를 접속하려면 실제로 큰 어려움을 겪게 된다. 휴대폰으로 이런 웹페이지에 접속할 경우에는, 국내에서도 적지 않은 문제를 불러일으킬 것이다.

메뉴와 링크의 제목(text)을 이렇게 ‘그림’으로 바꾸어 다는 편법을 사용하게 되면 그 그림을 시각장애인이 볼 수 없게 되는 것은 당연하다. 그래서 그림마다 ‘대체 텍스트’를 페이지 소스에 일일이 기입해 주고 있는 실정이다. 그렇게 해 두면 텍스트 기반 웹브라우저로 접속했을 때 그림 대신 대체 텍스트가 화면에 나타나게 되는 것은 맞다. 문제는 웹페이지 자체가 텍스트 기반 웹브라우저로는 아예 접속이 불가능하다는 데 있다.

대체 텍스트는, 텍스트 기반 웹브라우저로 접속했을 때 불편 없이 그 웹사이트의 내용을 둘러볼 수 있게(들을 수 있게) 하기 위한 것인데, 텍스트 기반 웹브라우저로는 접속 조차 불가능한 페이지를 만들어 놓고, 그 페이지 안에 대체 텍스트를 일일이 써넣고 있는 우리 업계의 현실은 엽기성 코메디 수준이라고 할 수 밖에 없다.

웹페이지를 어떻게 작성해야 일반인은 물론, 시각장애인도 아무 불편 없이 이용할 수 있게 되는지에 대하여는 전세계의 전문가들이 자세한 기술 표준을 이미 마련해 두고 있다. Web Content Accessibility Guideline (WCAG)이라는 것이 그것이다. 한국정보문화진흥원 또한 웹접근성 향상을 위한 상세한 지침을 마련해 두고 있다. 이러한 지침들을 차근차근 공부할 시간이 없는 바쁜 개발자들이나, 그런 전문 기술을 모르는 것이 당연한 웹사이트 발주자나 공무원들은, 다음과 같은 간단한 몇가지 원칙만 지키더라도 시각장애인의 인터넷 이용에는 획기적인 개선이 있게 될 것이다.

  • 첫째, 시각장애인 전용 페이지를 만들지 말 것. 텍스트 전용 페이지도 만들지 말 것.
  • 둘째, 웹사이트 자체를 텍스트 기반 웹브라우저로 접속했을 때 불편이 없도록 할 것(웹사이트가 텍스트 기반 웹브라우저에서 정상작동 하는지는 http://www.seo-browser.com/ 에서 확인 가능).
  • 셋째, 메뉴나 링크 제목을 ‘그림’으로 만들지 말 것. ‘글자’로 된 내용은 ‘글자’로 제시할 것.
  • 넷째, 음성안내 파일을 제발 좀 틀어대지 말 것.

“시각장애인 전용” 페이지?
그야말로 “쪽팔려서” 견딜 수가 없다.

2 Pingbacks/Trackbacks

  • 삐돌이

    좋은 글 감사합니다. 참고로 웹 접근성 관련 지침에 대한 주요 문서를 알려 드립니다.

    인터넷 웹 콘텐츠 접근성 지침 : 웹 접근성 관련 국가표준

    인터넷 웹 콘텐츠 접근성 지침 : 웹 접근성 관련 국가표준 : 웹 접근성 구축 사례 설명 자료

    감사합니다.

  • remainderone

    “메뉴 항목의 위치, 글자 색상, 배경 색상, 배경 장식, 글자 크기, 폰트 종류, 폰트 장식 등은 CSS기술을 제대로 구사하면 매우 정확하고 미려하게 만들 수 있다.”

    이 부분은 디자이너로서 약간의 딜레마가 생기는 부분입니다.
    웹 페이지를 만들다 보면 디자인상 어쩔 수 없이 링크에 글자가 들어간 그림을 사용해야만 할 때가 있습니다. 가장 큰 문제가 폰트 종류(글꼴) 때문인데, CSS에서 글꼴을 선언하더라도 클라이언트 측에 해당 글꼴이 설치되어있지 않다면 다른 기본 글꼴로 대체되는데다, OS 마다 기본 글꼴 모음이 다르기 때문에 그림을 사용하지 않을 경우 웹 디자이너가 안심하고 사용할 수 있는 글꼴은 매우 적은 수로 제한됩니다. 물론 이 문제는 CSS3에 표준 웹폰트 기술이 포함되면서 해결될 예정이지만, 현재로서는 CSS로 그림을 완벽히 대체할 수 없는게 사실입니다.

  • http://openweb.or.kr youknowit

    예, 기술적으로 그런 문제가 있다는 점은 저도 동의합니다. 따라서 대문에 걸리는 로고, 회사 명칭 등 가장 두드러진 요소들은 당연히 그림으로 처리하는 것이 옳을 것입니다.

    그러나, 내비게이션 메뉴, 링크 텍스트까지도 웹사이트가 모든 콘트롤을 독점하고 이용자에게는 자신이 선호하는 글씨체로 페이지를 볼 수 있는 가능성마저 박탈하는 것이 현명한 선택인지는 잘 모르겠습니다.

    페이지 사이즈가 매우 커지는 것도 …

  • Pingback: 영국의 은행들은 어떻게 하나? « Open Web

  • http://publy.tistory.com/ publy

    저는 이부분을 기획단계에서 적절하게 필터링 하면 문제없는 것이라고 생각합니다. 웹접근성에 문외한 기획자가 클라이언트와 미팅을 하고 프로젝트를 진행하는 관행이 지금까지 계속되어오고 있고, 또한 기획자 다운 기획자의 부재로 인해 웹접근성이 있는지 조차 모르는 사람들이 많다고 생각합니다. 표준정의서를 생성할때 이와 같은 부분에 대한 코멘트를 확실히 달아주고 디자이너 들에게도 충분히 인지시켜주는 과정이 필요하다고 생각합니다. 또한 클라이언트들의 고정관념을 바꿔 주는 것도 기획자(미팅담당자)의 몫이라고 생각합니다. 아무리 퍼블리셔가 텍스트기반으로 작업하고 싶어도 디자인상의 문제, 클라이언트의 이해도 부족으로 인해 현재로서는 이미지에 대체문자를 최대한 알기쉽게 넣어주고 구조적인 마크업을 하는 것 이외에는 달리 대안이 없다고 생각합니다. 법적으로 이미지 갯수를 지정할 수도 없는 노릇이구요 ㅋㅋ

    • http://openweb.or.kr youknowit

      “이미지에 대체문자를 넣는” 것은 시각장애자에게 큰 불편을 가하는 것입니다. 화면 읽는 소프트웨어는 그 항목이 그림이라는 사실을 매번 “그래픽”이라는 소리로 알려줍니다. 즉, 메뉴 항목 text를 그림으로 만들고 대체문자를 넣어주면, 메뉴를 그냥 읽는 것이 아니라, 매 항목마다 “그래픽”, “그래픽”, “그래픽”이라는 말이 메뉴 항목 대체text를 읽기 전에 끝없이 반복됩니다.

      실제로 시각장애인이 어떻게 컴퓨터를 사용하는지 아시면, 도저히 그런 해법을 선택하기는 어려울 듯…

      “alt” 텍스트만 넣어주면 된다는 (국내에서 떠도는) 잘못된 디자인 관행은 제발 중단되었으면 좋겠습니다.

  • http://snowall.tistory.com snowall

    개인 홈페이지나 사기업 등의 홈페이지에 쓰이는건 뭐 홍보의 문제이지 강제할 사항은 아니죠. 표준대로 만들면 좋지만 만들지 않는다고 해서 뭐라 할 수는 없는 거고. 하지만 세금으로 만들어지는 공공기관의 홈페이지라면 시각장애인 뿐 아니라 국민 모두가 이용할 수 있어야 합니다.

    공공디자인이라는 개념을 웹 디자인에도 적용할 수 있는데, 그냥 디자인은 이쁘기만 해도 좋을 수 있겠지만 공공 디자인이라면 사용성을 고려해야죠.

    요즘들어 도시 미관을 아름답게 한다고 많은 곳에 공공디자인이 적용되고 있는데요 (특히 서울시…) “이쁜 척” 하는건 보이는데 “편리함”이나 “사용성”이라든가 “접근성”과는 거리가 멀어서 많이 아쉽더군요.

  • http://www.imsoo.net misol

    이미지 부분은 웹 접근성 검사 항목에서 “이미지가 제공하는 정보와 동일한 내용을 대체텍스트로 제공해야 한다”라고 되어 있지 “이미지를 가능하면 줄여라”라고 되어있지는 않은 것으로 알고 있어요. 제가 잘못 알고 있는 건가요?!

    • http://openweb.or.kr youknowit

      말씀하신 접근성 검사항목의 의미가, text 로 된 내용을 “굳이 이미지로 변환한 다음에”, 그 이미지에 대한 대체텍스트를 제공하라는 뜻은 아니겠지요. ㅎㅎ

      • http://www.imsoo.net misol

        youknowit님의 의견은 이미지를 “쓰지말자”가 아니라 “쓸곳에만 쓰자”라는 것이지요? ^^ 그렇게 알고 가겠습니다~

        그리고 이건 주제랑은 좀 벗어난 이야기긴 하지만, 이미지 태그를 쓰지 않고 이미지 메뉴를 만들 수 도 있어요. CSS를 통해서 삽질이긴 하지만, 만들 수 없는 건 아니에요^^; CSS를 지원하지 않는 브라우저에서는 텍스트로된 내용만 보게 되겠지만요~.

        아! 그리고, 교수님이 제일 싫어할만한 사이트 하나를 발견했습니다!

        http://www.korea.ac.kr
        플래시로 도배된 메뉴를 가졌어요!
        http://portal.korea.ac.kr
        IE가 아니면 로그인이 안된답니다! ^^

        올때마다 재미난글 보여주셔서 고맙습니다~
        좀 편향되었다는 느낌도 가끔 들지만 재미있는 글이라 좋습니다~! ^^

      • http://www.imsoo.net misol

        처음에는 댓글에 왜 사람들이 ‘교수님 교수님’하는지 몰랐어요, 몰라뵈서 죄송합니다~ ^^;;
        제가 무식해서요… 아무튼 그래요~^^; 다음에 또 올게요~

  • http://abnormalweb.blogspot.com/ 불편한웹

    메뉴 또는 글자의 경우 이미지보다는 TEXT로 표현하는 것이 좋겠죠. 이미지로 만들어 놓으면 글자가 뿌였기 때문에 눈이 피로해집니다. 확대했을 때 각이 지고요.
    글자를 왜 이미지로 만드는지는 도무지 이해가 되질 않습니다.
    이미지로 만들면 시간도 더 걸릴텐데요.

  • http://abnormalweb.blogspot.com/ 불편한웹

    http://www.nhic.or.kr 국민건강보험공단
    여기 사이트를 보면 메뉴가 이미지로 되어 있어요.
    뿌옇지요. 이거를 TEXT로 만들면 더 좋겠죠.
    메뉴를 보면 가로로 펼쳐지는 항목이 한두개도 아닌데
    풀다운(pull-down) 메뉴로 만들면 더 좋을 거에요.

    정상적인 풀다운 메뉴
    http://www.cans21.co.kr/

    가로로 펼쳐지는 메뉴
    http://www.gjcity.go.kr/

    어느 것이 더 편리한지 직접 경험해보세요.

    그리고 풀다운 메뉴와 가로로 펼쳐지는 메뉴에 대한 연구 논문이 있습니다.
    웹 디자인 하시는 분들은 직접 찾아서 필히 참고하기 바랍니다.

  • Pingback: 홈페이지 음성 서비스 논란 – 디지털타임스(5월 28일) « 삐돌이의 웹 접근성 & IT Transformation

  • webSearch

    인터넷 신문기사에서 봤는데요…
    http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&sid1=102&oid=001&aid=0003370391

    기사내용에 보면
    “봉화군은 텍스트 전용사이트를 별도로 구성하지 않고 변환도구에 의해 사이트의 모든 내용을 동일하게 텍스트로 제공하는 방식을 도입해 ….” 라고 되있습니다.

    기사를 보고 봉화군 사이트(http://www.bonghwa.go.kr)에 들어가 봤는데 모든 페이지에서 텍스트페이지로 변환이 되는거 같습니다.

  • http://openweb.or.kr youknowit

    봉화군 홈페이지 정말 깔끔하게 잘 꾸며두었네요. 안동(http://andong.go.kr)에 이어 봉화! 사이버 문화를 선도하는 군요.

    • hancho

      아~ 나의 고향 봉화.