전국 동시 지방선거가 있기 며칠 전…
수도권의 주요 후보 6명의 홈페이지에 대한 접근성 테스트를 진행했습니다.
테스트를 진행하고 결과를 보니 의외의 부분도 많았고 참 답답하기도 했습니다.
예민한 부분이라 특정 후보를 거론하지 않으면서 후보자 홈페이지에 대한 얘기를 해보려고 합니다.
구체적인 페이지주소와 캡쳐이미지를 생략하고, 포괄적으로 적는 것이기 때문에 표현이 부정확할 수 있습니다.
일단!!
대부분의 홈페이지에서 시각장애인에 대한 배려는 거의 없었습니다.
이미지에 가장 기본적인 대체 텍스트 조차 달지 않았더군요.
사례1. 플래시 메뉴(네비게이션)의 접근성 부재
플래시 개체의 경우 접근성을 보장하는 방법들이 이미 나와있습니다. Adobe사는 접근성 관련 페이지(www.adobe.com/accessibility)를 통해 관련 문서를 제공하고 있고, 웹접근성연구소(www.wah.or.kr)의 자료실에 는 이미 해당 부분에 연구 보고서가 등록되어 있습니다. 또한 많은 업체에서 이에 대한 내용을 알고 있고, 제작해본 경험들을 가지고 있습니다.
후보자 홈페이지 6곳 중 5곳이 플래시 메뉴를 사용하고 있었고, 이 중 단 1곳만 접근성을 보장하는 메뉴를 제공하고 있었습니다.
상식적으로 생각해봐도 다른 항목들에 비해 메뉴는 상당히 중요한 비중을 차지합니다. 메뉴를 이용할 수 없다면 해당 홈페이지에서 접근할 수 있는 항목은 상당히 줄어들게 됩니다. 메인 페이지에 최근 글 목록이나 핫링크로 제공되지 않은 항목들은 아예 들어가 볼 수가 없게 되죠. 메뉴를 제외한 모든 항목에 대체 텍스트를 제공한다고 하더라도 메뉴를 이용할 수가 없다면 거의 무용지물이 되고 맙니다. 메뉴의 접근성은 이래서 매우 중요합니다.
예> 접근성을 보장하는 플래시 메뉴
www.xvtech.com / www.thinkforbl.com
사례2. 정보를 포함하는 이미지에 대한 대체 텍스트 제공 부재
선거 후보자 홈페이지에서 가장 중요한 부분은 후보자 프로필과 공약입니다. 많은 후보자 홈페이지에서 프로필과 공약을 감각적으로 꾸미기 위해 이미지를 사용하고, 하나의 이미지에 모든 내용을 넣어서 이미지 파일 하나로 올리곤 합니다. 이 방법 자체는 전혀 문제가 되지 않습니다. 텍스트 정보까지 이미지로 넣은 경우 대체 텍스트를 분명하게 제공해줘야 하는데 그렇지가 않다는 것이 문제입니다.
후보자 홈페이지 6곳 중 4곳은 프로필과 선거공약을 담은 이미지에 대한 대체 텍스트를 전혀 제공하지 않았습니다. 접근성 테스트 툴로 확인해보면 대체텍스트 제공률이 90%를 넘지만 실제 제공되는 대체 텍스트는 <01.gif>, <profile.gif>, <01-1.gif>, <공약최종.gif>, <사용자정의이미지> 같은 식이었습니다. 모두 에디터에서 자동으로 입력해주는 대체텍스트지요. 이런 경우 시각장애인이 스크린리더로 접근한다면 해당 후보의 프로필과 공약에 대한 내용은 전혀 확인을 할 수 없습니다.
후보자 홈페이지 중 1곳은 부분적으로 대체 텍스트를 제공해서 완전하지는 않지만 조금이라도 공약이나 프로필 정보를 얻을 수 있었습니다. 또 다른 후보의 홈페이지 1곳은 이미지와 함께 일반 텍스트로도 공약과 프로필 정보를 제공하고 있어서 시각장애인이 정보를 접하기 매우 수월했습니다.
단순한 이미지의 경우 대체 텍스트 제공에 “alt”값을 사용하지만, 공약과 프로필처럼 많은 내용을 담은 경우 “longdesc”속성을 사용해서 별도로 정보를 제공해주는 것이 좋습니다. longdesc는 대체 텍스트를 제공하는 별도의 페이지를 구성하기 때문에 많은 내용을 시각장애인이 쉽고 정확하게 확인할 수 있습니다.
사례3. 동영상에 소리 없이 나오는 텍스트 정보.
후보자 홍보동영상을 보면 밝고 빠른 분위기의 음악을 배경으로 여러 문구들이 화려한 effect를 뿜어내면서 나타났다 사라지고, 효과음과 함께 움직이고 지나갑니다.
시각장애인의 경우 동영상 플레이어에 대한 접근성 제공이 부족하기 때문에 동영상 재생하기조차 힘들지만 동영상을 재생하더라도 성우의 목소리나 동영상에 대한 정보를 제공하는 텍스트 정보가 없기 때문에 해당 동영상의 내용을 인지할 수가 없습니다.
동영상에서 성우가 멋진 목소리로 문구들을 읽어나갈 경우는 그나마 다행이지만 후보자 홈페이지 6곳 중 4곳은 동영상에 대한 텍스트(음성) 정보를 전혀 제공하지 않았습니다. 후보자 홈페이지 중 2곳은 동영상을 제공하는 페이지 안에 (완전하진 않지만) 동영상에 나타나는 글자와 대화 내용을 텍스트로 제공하고 있어서 시각장애인은 물론 청각장애인에 대한 접근성을 보장하고 있었습니다.
시각장애인에게 동영상의 어떤 부분에 텍스트 정보가 필요한지 궁금하시면, 동영상을 틀어놓고 눈을 감고 소리만 들어보시면 쉽게 아실 수 있습니다. ^^
사례4. 스킵 네비게이션과 체계적인 헤딩 정보의 제공
처음 테스트를 진행할 때만 해도 후보자 홈페이지에서 스킵 네비게이션은 기대도 하지 않았습니다. 대다수의 후보자 홈페이지는 선거를 앞두고 새로 만들어지기 때문에 전혀 기대하지 않았죠. 역시나 후보자 홈페이지 6곳 중 5곳은 스킵 네비게이션은 물론 논리적인 헤딩 구조 조차 제공하지 않았습니다.
홈페이지에서 시각장애인에게 중요한 것 중 하나가 페이지 내의 빠른 이동입니다. 웹페이지를 눈으로 보는 경우 메뉴항목와 정보를 제공하는 내용 부분을 한 번 바라보는 것(시선을 보내는 것)만으로 확인할 수 있지만, 스크린리더를 사용하는 경우 방향키나 탭키 등을 하나씩 누르고 소리를 들어서 내용을 확인하고 이동해야 합니다. 시간이 매우 많이 걸리는 작업입니다. 간단히 말해서 눈으로 스치듯이 보면서 지나가는 항목 하나하나를 키보드를 일일이 눌러가면서 확인해야 하는 것입니다. 이런 반복작인(매우 소모적인) 작업을 피하고 원하는 항목으로 빠르게 이동하기 위해 필요한 것이 스킵 네비게이션과 논리적인 헤딩구조 입니다.
스킵네비게이션은 현재 페이지 링크를 통해 메뉴나 메인컨텐츠 부분으로 빠르게 이동하는 기능을 제공합니다. 또한 논리적인 헤딩 구조는 페이지내의 구조(depth)를 알 수 있도록 하며, 스크린리더의 기능으로 헤딩의 구조를 따라서 손쉽게 원하는 항목으로 이동하는 것이 가능합니다.
주목할만한 점은 후보자 홈페이지 1곳은 <본문으로 바로가기> 스킵네비게이션과 논리적인 헤딩 구성으로 시각장애인이 홈페이지안을 이동하는데 큰 도움을 주고 있었습니다.
참고> 스킵네비게이션에 대한 설명
http://naradesign.net/wp/2010/03/13/1221/
http://www.jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/
테스트 진행 후 결론
후보자 홈페이지 접근을 시작할 때는 매우 부정적인 결과를 예상하고 답답한 마음으로 테스트를 진행했습니다. 물론 예상대로 대부분의 페이지에서 접근성을 보장하지 않고 있었지만…. 일부 후보자의 홈페이지는 (전혀 기대하지 않았던) 생각보다 높은 수준의 접근성을 보장하고 있었습니다.
이번 테스트는 현실을 알려보자는데 목적이 있었습니다. 테스트 결과는 부정적이었지만, 부분적으로나마 웹에서 시각장애인의 사용성을 고려하는 움직임이 일고 있다는 것을 확인했다는 것에 큰 의미를 두고 싶습니다.
테스트 기간 : 2010.5.17~24 (약 7일간)
Trackback URL : http://www.haeppa.kr/trackback/52
Trackback RSS : http://www.haeppa.kr/rss/trackback/52
Trackback ATOM : http://www.haeppa.kr/atom/trackback/52
-
Tracked from haeppa's me2DAY 2010/06/03 00:14
개표방송 보면서 후보자 홈페이지 접근성 관련 글을 또 썼습니다. 아무리 봐도 저번에 링크해드린 보도자료는 제 스타일이 아니라서… 소심한 글이지만 참고 삼아서 함 보세요 ^^ 어쩌면 다들 아는 내용일지도 ;;; [해빠 스타일 글 보러가기]
당신의 의견을 작성해 주세요.
열이아빠 2010/07/02 09:39 편집/삭제 댓글 작성 댓글 주소
조만간 업데이트를 통해 다른 운영체제에서도 지원이 될것입니다.
아마 오늘 업데이트된 플렉스 4.0.1 SDK에 포함된것 같은데 좀 더 찾아봐야 하구요. ㅠㅠ
http://blogs.adobe.com/accessibility/2010/03/flash_player_and_flex_support.html
액츠원과의 작업된 내용은 외부에 공개하시는 건가요?
해빠 2010/07/03 13:44 편집/삭제 댓글 주소
흠.. .그게 2009년 11월 웹 접근성 기술동향 및 향상방안 세미나에서 발표가 됐어요.
http://www.wah.or.kr/Board/brd_view.asp?page=2&brd_sn=5&brd_idx=534
요기에서 Flex의 접근성.ppt 파일이에요.
액츠원과 검토한 내용은 여러 컨트롤을 배치하고 키보드를 이용한 사용성과 스크린리더의 접근성을 지원하는지 여부에 대한 테스트였습니다. 그 중 스크린리더의 버그로 음성출력에 문제가 있는 부분들은 수정을 했구요.
현재 스크린리더에서 문젣가 되고 있는 부분은 2가지에요.
1. 위즈윅 편집기 같은 편집창에서 음성출력이 원활하지가 않다.
2. 이동 방법에 대한 고민이 필요하다. 스크린리더의 인터넷환경(가상커서)에서 사용하는 이동/음성출력 키들과 플렉스 컨트롤 사이를 이동/동작하는 키가 중복되서 사용성이 보장되지 않고 있습니다. 이에 대해 여러 방안을 검토했지만 명확한 결론을 내리지 못해 수정이 잠정 보류되어 있어요.