접근성을 떨어뜨리는 웹사이트 구현 사례
accessibility | 2006-11-02
우리가 별 생각없이 관용적으로 구현하는 상당히 많은 경우가 접근성을 저해하고 있습니다. 남들도 다 그렇게 하니까 따라하기 보다는 아래의 항목들이 정말로 사용자에게 도움이 되는 것인지를 곰곰히 생각해 보고 구현을 할 필요가 있습니다.
컨텐츠 이미지를 배경 이미지로 사용한 경우
이미지 텍스트를 사용함에 있어서 이미지에 대체 텍스트를 사용하는 방법으로 접근성을 고려해서 제작을 해야 하는데 제목 이미지 텍스트와 같은 컨텐츠 텍스트 이미지를 배경 이미지로 처리하는 경우가 있습니다. 배경 이미지이기 때문에 대체 텍스트 제공도 불가능하고 이미지를 껐을 때에는 컨텐츠를 전혀 인식 할 수 없게 구현하는 경우입니다.
* 참고 : 이 방법은 이미지 대체기법(Image Replacement Technique)과는 구별해야 합니다. 이미지 대체 기법은 코드상에있는 텍스트를 스타일로 감추고 배경으로 이미지 텍스트를 제공하는 방법인데, 이 기법은 코드상에는 해당 컨텐츠(텍스트정보)가 존재하기 때문에 접근성이 떨어지지는 않습니다. 하지만 스타일은 켜져있고 이미지는 꺼져 있을 경우 접근성을 떨어뜨릴 수 있기 때문에 무분별하게 사용하면 안되고 반드시 필요한 경우 - 스타일 만으로 컨텐츠 이미지도 제어해야 하는 경우 - 에만 사용해야 합니다.
과도하게 많은 프레임을 사용하는 경우
외국과는 다르게 우리나라는 페이지가 프레임 구조가 아닌데도 불구하고 많게는 20개 가까이의 과도한 프레임을 사용해서 페이지를 구성하는 경우가 있습니다. 페이지가 프레임구조가 아닐 경우에는 프레임을 사용하지 말아야 하고, 프레임 구조일 때나 외부 컨텐츠(서버가 다른 경우)를 페이지에 포함하는 경우에만 프레임을 사용해야 합니다.
과도한 움직임이 있는 플래시 네비게이션
메뉴의 화려한 동작을 너무나 중시하여 일반인이 마우스로 사용할 경우에도 이용이 불편한 플래시 네비게이션을 제공하는 경우가 있습니다. 가장 좋은 것은 웹사이트 이용에 굉장히 중요한 역할을 하는 네비게이션에는 플러그인인 플래시를 사용하지 않는 것입니다. 네비게이션 제작하는 노력으로 비주얼 플래시를 제작한다면 훨씬 창의적인 아이디어가 나올 수 있을 것입니다.
흐르는 텍스트
웹사이트 메인 페이지에 흐르는 텍스트를 사용하는 경우가 많은데 그 정도가 심한 경우가 많습니다. 특히나 국정브리핑에서 이러한 흐르는 텍스트를 강제로 모든 공공기관 웹사이트에 삽입하게 내려보내고 있기 때문에 보통 적어도 3가지 정도의 움직이는 텍스트를 제공하는 공공기관이 매우 많습니다. 많은 정보를 제공하려다보니 텍스트를 움직이게 하는데 오히려 정보 인식도 떨어지고 실제로 그 움직이는 텍스트를 보고있는 사용자도 없습니다. 차라리 페이지가 갱신될때마다 서버에서 랜덤하게 데이터를 추출하여 보여주는 것이 훨씬 더 효율적일 것입니다.
과도한 팝업창 사용
팝업창 사용이 문제라는 것은 대부분 공감하고 있지만 많은 경우 관행적으로 팝업창을 사용하고 있는 것이 현실입니다. 메인페이지에서 사용자의 동작없이 임의로 발생하는 팝업도 그러한 예입니다. 그리고 회원 가입 폼의 경우 주소의 우편번호를 입력 할 때에 강제로 팝업을 통해서 주소를 검색해서 입력 하게 하는 경우도 접근성을 떨어뜨립니다. 실제로 주소와 우편번호를 완벽하에 외우고 있는 사용자의 경우 팝업창에서 주소를 새로 검색할 필요가 없습니다.
너무 많은 메인 컨텐츠
국내의 대부분의 사이트들이 메인페이지에서 과도하게 많은 - 거의 사이트맵을 방불케 하는 - 컨텐츠를 보여주려고 하고 있습니다. 과도하게 많은 컨텐츠는 사용자의 불편과 서버 트래픽을 일으키게 됩니다. 그리고 이러한 현상은 정말로 사용자에게 많은 정보를 제공하고자 하는 목적 보다는 각 소속 하위 단체들간의 알력싸움으로 벌어지는 경우도 많습니다. 정말로 사용자에게 도움이되는 핵심정보 만을 제공할 필요가 있습니다.
불필요하게 입력 폼을 나누는 경우
대다수의 사이트가 전화번호나 핸드폰 번호등의 입력을 받을 때 입력 필드를 세개로 나누고 "-"와 같은 문자를 입력하지 못하게 자바스크립트로 막는 등의 구현을 해 놓고 있습니다. 하지만 전화번호를 굳이 사용자가 지역번호, 국번, 전화번호로 나눠서 입력할 필요는 전혀 없습니다. 입력만 불편하게 만든 경우이고 실제로 "-"나 ")"와 같은 기호를 걸러내는 기능은 사용자를 괴롭히는 것 보다는 프로그램 언어로 아주 간단하게 구현이 됩니다. 그리고 정말로 전화가 없는 사람은 "없음"이라고 입력하는 것이 가장 좋을 것입니다. 하지만 그러한 정보를 숫자만 입력할 수 있게 필수항목으로 지정해 놓으면 사용자 입장에서는 가짜 전화번호를 입력할 수 밖에 없습니다. 자바스크립트로 거는 입력 제한은 절대로 데이터의 무결성을 보장할 수 없습니다.
자바스크립트 링크
외국에서 거의 찾아볼 수 없지만 우리나라에서 흔하게 볼 수 있는 현상이 자바스크립트의 오용입니다. 링크를 자바스크립트로 건다든가, 폼 액션을 자바스크립트로 처리를 한다든가 화면에 출력되는 HTML태그를 자바스크립트(document.write)로 출력한다든가 하는 스크립트의 오용이 매우 심합니다. 어떤 게시판은 클릭되는 모든 글과 버튼을 href="javascript:articleView('12')"와 같은 형태로 구현해 놓는 경우도 있습니다. 접근성과 상호 운용성을 위해서 자바스크립트의 오용은 피해야 합니다.
Comments
주소입력 받을 때 필수로 체크를 하는 것은 물론 불편은 한데, 외우는 사람이라도 오기입을 막고자 거의 모든 사이트가 이런식으로 해왔을테지.... 그러고 보면 기획에서 하는 설계가 참 깊이도 없고 무엇보다 습관이 참 무서운 것이군... 그냥 검색안하고 서교동 몇번지 입력했을 때 textbox에서 자동으로 실제의 우편번호와 틀리면 알려주면 좋을텐데.... 왜 나도 그렇고 아무도 그런방법은 생각을 못해봤는지? 구현하기가 힘든가?
구현하기 귀찮은 것이겠지. 문화적인 차이도 있고. 외국과는 다르게 한국사람은 앞단에서 제약을 많이 만들어 놓고 일단 통과하면 믿는 주의잖어. 대입도 그렇지. 외국은 진입은 일단 쉽게하고 들어온 다음에 거르지
현석 씨 글은 아주 많은 생각을 하게 만들어. 앞으로도 좋은 글 부탁할께.
엇, 박부장님? 안녕하세요~ :) (likejazz님 아니죠? ㅎㅎ)
그랴..시도우 옛 전우 박상길이야. 현석 씨 글은 올라올 때마다 빠짐없이 읽고 많은 도움을 받고 있어. 고마워... 화이팅
트랙백 달아 보았어요~호호 박상길 부장님도 오시네..ㅋ
현석님.. 질문있는데요. 자바스크립트를 쓰지 않고 싶은데 아직 내공이 부족해서그런지 새창 띄우거나 버튼같은경우엔 자바스크립트를 쓰게되는데 쓰지 않는 방법도 있는 것인가요?
새창 띄우기 : 새창을 열지 현재창에서 볼지는 사용자가 제어하는 기능이기 때문에 사이트 측에서 고민할 필요가 없는 사항입니다. 제일 좋은 것은 새창을 안띄우는 것이죠. 버튼 : 무슨 기능을 하는 버튼이냐에 따라서 다를 수 있겠지만, 폼의 버튼은 서밋버튼을 이용하시면 되겠죠. 폼을 HTML만으로 작동하게 만드는 것이 중요합니다.
맞는 말씀입니다. 잘 모르는 분야라서 저도 알게 모르게 오용하기도 했지만 방문객 입장이 되면 확실히 불편해지더라구요.
2006년도에 쓰신 내용이지만 2009년 현재에도 친숙한(;) 사항들이네요. 끙... -_ㅜ...
흠....훈훈하네요 글 잘보고 갑니다. 개발자로서 너무 간과하지 않았을까 라는 생각이드네요 웹접근성에 대해서 좀 더 깊이 있는 공부가 필요하네요