부산시 홈페이지, 접근성 체크

LINK : 부산시 홈페이지
이래놓고 이벤트 페이지를 걸어놓는 용기에 대해서 일종의 경외심마저 품게 된다.

A. 일단, 친절하게 다운로드 받으라고 되어있는 접근성 체크 항목들부터 보자.

1. 대체텍스트의 사용.
충실하게 대체텍스트를 사용.... 이라기보다는, 쓸 데 없는 잡설을 늘어놓는다는 느낌이다. 애초에, IMG 태그란 "비텍스트 컨텐트"를 위해 사용해야 하는 것인데, 대체텍스트를 사용하는 취지자체를 이해하지 못하고 있다.
http://www.busan.go.kr/open_content/busan/general/basic/6260000-arc-2.0-001.jsp?nSelected=1
위 링크에 걸린 페이지 중간에 기상현황 이미지를 예로 들어보자.
이 이미지는 장식용 그림도 아니고, 엄연히 정보를 전달하기 위한 "비텍스트 컨텐트"이다.
물론 이렇게 이미지만 사용하면 접근성에 문제가 생기기 때문에 접근성 제고를 위해 대체텍스트를 사용해야 한다.
그런데 걸려 있는 대체텍스트는 이렇다.

부산의 10년간 년도별 기온, 상대습도, 강수량, 바람을 나타낸 4개의 그래프

시각장애인이 이 대체텍스트를 보고 아아, 그렇구나, 그런 그래프 이미지구나... 라고 고개끄덕거릴거라 생각하려나? 천만에, 제대로 된 대체텍스트라면 다음과 같은 내용이 들어가야 한다.

기온변화 (섭씨, 92년부터 04년까지 13년간의 기온변화)
최고기온 : 35.6도, 30.7도, 35.8도, 32.8도, 34.9도, 34.1도 ...
...

이래야 비텍스트 컨텐트를 대신하는 올바른 대체텍스트가 된다.
물론, 이러면 너무 길다. 따라서 이럴 경우에는 처음처럼 짧게 쓰되, longdesc 속성을 이용하여 그 내용이 담겨있는 별도의 페이지를 기술해줘야 한다. 물론 전혀 그런 면이 고려되어있지 않다.

한편
http://www.busan.go.kr/open_content/busan/cultural_assets/6260000-arc-2.0-001.jsp?nSelected=4&doc_num=90
이 페이지 본문 중간의 사진에는

문화재란?

이란 대체텍스트가 쓰였다. 과연 이 사진이 "문화재란?"이라는 의문을 전달하는 비텍스트컨텐트인가?
실은 이 이미지는 컨텐트도 아니다. 그저 장식적 요소로 사용되었을 뿐, 여기에 대체텍스트를 덧붙이는 건 오히려 낭비라 할 수 있다. TTS로 웹페이지를 읽을 때 저런 비컨텐트 요소가 얼마나 짜증나게 들리고 웹페이지 이용에 방해가 되는지 확인해보길.

홈인덱스야 말로 이런 짜증요소의 집합체라 할 수 있다.
모든 링크마다 "엔터키를 치시면 ~~ 페이지로 연결됩니다."라는 타이틀을 붙여놓았다. 세상에나, 이 페이지를 TTS로 읽을 때 어떻게 들릴지 생각하고 작성한 것일까?

2. 프레임 사용
굳이 프레임을 사용할 이유가 없는 사이트임에도 프레임 사용을 하고 있는데, 그 이유는 아마도, 브라우저의 URL입력창을 깔끔하게 보이고픈 욕구이리라. 덕분에, 해당 페이지의 주소를 알아보기 어려워 링크등을 연결하기 어렵다.
프레임의 사용은 또한 시각장애인들에게 네비게이션의 어려움을 안겨준다.
게다가, 모든 창의 타이틀이 "부산시청 홈페이지에 오신 것을 환영합니다."는 시각장애인들에게는 좌절 그 자체. 시각장애인들은 여러 윈도우들의 구분을 윈도우타이틀을 이용해 구별하고 있는데, 모든 페이지의 타이틀이 똑같기 때문에 시각장애인들의 네비게이션에 혼란을 초래할 수 있다. 기껏 문서별로 타이틀을 부여해도 프레임안에 갇혀버림으로 인해 효과를 전혀 볼 수 없다.
마지막으로 bottom frame은 불필요하다.

3. 키보드 운용성
중간중간에 보이는 플래시메뉴들은 키보드 접근이 아예 불가능하다.
일부 자바스크립트 버튼들은 키보드 네비게이션시 이상한 동작을 보인다. 예를 들어 FF브라우저를 이용할 때, 현재 모든 페이지 하단에 붙어 있는 사용편의성 평가폼의 경우, 버튼으로 포커스를 옮겼다가 나올 경우 "로그인하셔야 사용할 수 있습니다."라는 alert창을 보이고, 로그인 페이지로 이동시킨다. 마우스를 이용할 수 없는 환경도 고려해야 한다.
상단의 메인메뉴의 경우에도, Tab이동시에는 서브메뉴가 표시되지 않는다. 물론 표시로 끝나면 안되고, 각 서브메뉴에도 적합한 순서로 Tab네비게이션이 가능해야 한다.

4. 링크 스킵
이렇게 정형화된 페이지들로 이루어진 사이트에서 특히 "상단"메뉴와 "좌단"메뉴들을 이용할 경우에는 컨텐트 본문으로 바로 포커스를 옮겨주는 "Link Skip" 링크를 제공해야 한다. 물론 부산시 사이트에는 없다.
정상인들은 2차원적으로 페이지를 파악해서 페이지마다 반복되는 상단과 좌단을 무시하고 컨텐트에 바로 집중할 수 있지만, 시각장애인들이 TTS를 이용하는 경우 이런 Link Skip이 없으면 모든 페이지마다 반복해서 상단메뉴와 좌단메뉴를 줄줄이 읽어주는 걸 들어야 한다. 노이로제걸릴 정도로 짜증나는 일이다.
적절한 링크 스킵의 위치는 body태그 바로 밑에서 컨텐트 본문영역을 가리켜주면 된다. 작은 배려가 높은 접근성을 만들어낼 수 있다.

5. 팝업창
MyLink를 반가와하는 사람이 과연 있는지나 궁금하다. RSS를 제공하니 굳이 MyLink는 없어도 되지 않을까? 게다가 첫 화면부터 팝업창을 들이대는 건 매우 짜증나는 일이다.
각 페이지의 메뉴에서도 JavaScript를 이용한 새창띄우기를 하는 곳들이 있다. 이부분들도 문제.

6. 레이아웃
TABLE을 사용한 레이아웃. 더이상 말할 필요도 없다.

7. Form
label을 사용하라는 소리는 잔소리로 들리나보다. label을 무시해주는 대담함이 멋지다.
한편, form의 submit을 JavaScript를 이용한다. onkeypress등의 이벤트를 사용해줌으로써, Tab네비게이션을 방해하는 한 편, JavaScript를 사용할 수 없는 환경을 완벽하게 씹어주신다. JavaScript가 disabled되면 로그인도 못하는 사이트라... JavaScript는 부가요소이지, 필수요소가 아니다. 브라우저에 따라 JavaScript를 쓸 수 없는 브라우저들(음성브라우저, 점자브라우저, 텍스트브라우저, 모바일브라우저)이 있다는 것을 잊지 말자.

B. 다른 부분도 좀 보자.
1. 시맨틱 마크업
전혀 되어있지 않다. 실은 HTML Validator조차 통과하지 못하고 있다.

2. JavaScript
document.getElementById()를 쓰는 것이 그리 어려운가? JavaScript는 Copy&Paste로 끝이라는 발상을 가진 개발자(혹은 코더)의 문제겠지만.
DOM에 관한 공부가 필요한 듯 싶다.

3. CSS
CSS에러가 한다발... IE전용 CSS문법을 쓰고 있는 건 그렇다 치고... CSS를 쓰려면 전부 External로 쓰던가, 군데군데 inline CSS는 코드의 효용을 떨어뜨린다.

4. Java Framework
Java 프레임워크에 과문한 탓으로 VSKIP이라는 태그를 쓰는 프레임워크가 뭔지 잘 모르겠다. 허나, 저런 프레임워크용 템플릿태그가 해석되지 않은 채 소스안에 보이는 것은 문제가 아닌가? 프레임워크 자체의 버그로 보인다. 최소한 프레임워크용 템플릿 태그가 소스중에 노출되어야만 한다면 주석처리라도 해주는 게 옳다.

5. 장애인 홈페이지
장애인 홈페이지에 플래쉬 네비게이션이라는 센스가 멋지다. 물론 새로 나온 플래쉬로 얼마든지 접근성이 높은 무비를 만들 수 있다고 한다. 아르바이트 플래셔에게는 힘든 요구일지도. 어쨌든간에... 접근성 제로다.
장애인을 위한 홈페이지라는데, 정작 장애인에게 이용될 수 없는 홈페이지라니 뭔가 인생의 아이러니를 보여주는 듯 하다.
(솔직히 분석하는게 짜증나서 말투가 아까부터 씨닉해지고 있음.)

6. 품질검사.
http://valet.webthing.com/view=Asis/access/htnorm?url=http%3A%2F%2Fbusan.go.kr%2Fopen_content%2Fmain_page%2F6260000-arc-2.0-001.html&suite=SECTION508&xslt=compact
첫페이지만 따서 webthing의 Section508 검사를 한 결과이다.
몇가지만 짚어보자.
* iframe에 대체텍스트가 빠져있다.
* 플래쉬 무비등의 대체텍스트 사용이 잘못되어있다.
* CSS가 없이도 충분히 정보전달이 가능해야 하는데, 미흡하다.
* textarea안에 flash object라니....
* onmouseover같은 마우스이벤트에 의존하는 스크립트를 사용했다.
기타등등 기타등등...

Watchfire의 WebXact 검사기를 이용해 굿모닝시장실 페이지를 돌려보았다. ()안은 WCAG 1.0기준의 접근성 체크목록의 중요도이다.
* img에 대체텍스트가 없는 경우가 14건. (중요도 1)
* DOCTYPE의 잘못된 사용 (중요도 2)
* 절대사이즈 및 포지셔닝 사용 (중요도 2)
* 마우스 의존적인 이벤트 핸들러 사용 (중요도 2)
* 테이블 레이아웃 사용(중요도 3)
에러건수만 총 5종 81건.
실은 메인인덱스페이지를 대상으로 하려했으나 WebXact 검사기를 뻗게 만들 정도라서 그나마 문제가 적은(?) 시장실 페이지를 대상으로 했다.

이정도라...
흠, 열화와 같은 참여를 위해 일부러 엉망으로 만들고 이벤트를 걸었나...
아니면 딴에는 자신있다고 생각하고 이벤트를 한 것일까...

이벤트... 하고 싶을까?

....