웹표준과 웹 접근성이 부각 되기 시작하면서 자바스크립트에 대한 잘못된 견해를 보이시는 분들이 생겼습니다.
그중 하나가 자바스크립트가 접근성을 해친다는 것 입니다.
html, 브라우저 등과 함께 발전되어 온 것이 자바스크립트 입니다. 네스케이프와 익스 플로러 간의 브라우저 1차전때 부터 논란이 되어온 자바스크립트는 현재 어느정도 표준안이 제시되었고, 이제 자바스크립트 없이 웹페이지를 만들어 낸다는 것 은 사용자 환경을 배제한체 홈페이지를 만들어 내라는 말과도 같은 뜻이 될 정도로 중요하고 많이 사용되고 있습니다.
그렇다면 왜 접근성과 함께 자바스크립트가 논란이 되었는지 생각해 봐야 합니다.
구버전 스크립트의 사용
과거 브라우저 전쟁때(1996~1999 익스플로러와 네스케이프) 생겨난 라이브스크립트, j스크립트 등의 비표준 스크립트를 현재까지 사용함으로서 지원하지 않는 브라우저등이 있을수 있습니다. 예로 document.all , document.layers 등이 있겠습니다. 이때는 익스플로러와 네스케이프가 자신의 스크립트를 표준으로 만들기 위해 서로간의 호환성을 아주 떨어지게 만들어 낼 때였습니다.
innerHTML 의 사용
생각보다 많이 쓰이는 스크립트중의 하나입니다. 원하는 위치에 스크립트로 구성해놓은 태그를 삽입합니다. 하지만 이 방법은 어떻게 보면 매우 접근성을 떨어뜨리는 방법 입니다. 자바스크립트를 지원하지 않는 브라우저(물론 거의 모든 브라우저는 자바스크립트를 지원합니다.)혹은 자바스크립트를 꺼놓은 사용자의 경우 innerHTML로 구성된 내용은 확인할 수 없습니다.
자바스크립트를 이용한 url 접근
쉽고 효율적인 사이트 운영을 위해 사이트의 url을 한페이지의 js에 넣어두고 이를 함수로 호출해서 사용하는 방법이 있습니다. 유지보수 면에서 이만큼 효과적인 방법은 없습니다. 예를들어 한개의 메뉴가 바뀌면 이를 위해 수십페이지의 해당 메뉴 링크를 모두 변경해 줘야 하기 때문입니다. 그러다 보면 빠뜨리는 페이지 들도 생기게 되지요. 하지만 반면에 자바스크립트를 지원하지 않는 브라우저나 자바스크립트를 꺼놓은 사용자는 메뉴를 눌러 컨텐츠 접근을 하는데 제한이 됩니다.
특정 브라우저에 해당되는 스크립트 사용
가장 큰 예로 익스플로러에서 지원하는 미디어플레이어가 있습니다.
익스에서는 미디어플레이어 컨트롤러를 자바스크립트를 이용해 접근, 제어 할 수 있습니다.(버튼, 이미지등)
하지만 이렇게 해 놓으면 다른 브라우저에서는 해당 동영상을 볼 수 없습니다.
location.replace("")
사용자가 뒤로 버튼을 누를경우 다시 앞페이지로 이동되어 접근성을 해치며, 사용자 환경에도 좋지 않은 영향을 줍니다.
이밖에도 미처 생각하지 못했던 스크립트들이 접근성을 해치는등의 문제가 발생하여 자바스크립트는 접근성에 위배된다는 인식이 퍼지게 된것인지 모릅니다.
또한 예전에 짜 놓은 스크립트들을 무분별 하게 퍼다 쓰게 되어 생기는 문제점들도 있을 것 입니다.
css만으로도 만들어 낼 수 있는 여러가지 방법들을 무시한채 자바스크립트만으로 모든 것을 해결하는 것 또한 문제가 된다고 생각합니다.
눈에 띄지 않는 스크립트
2002년 스튜어트 랭그리지 는 '눈에 띄지 않는 스크립트'라는 용어를 만들었다고 합니다.
해당 내용은 PPK 자바스크립트 라는 책에서 일부 발췌 합니다.
- 스크립트는 사용성이 높아야 한다. 즉 스크립트는 사이트의 사용성을 눈에 띄게 높여야 한다.
- 스크립트는 접근성이 높아야 한다. 즉 웹페이지는 자바스크립트가 동작하지 않더라도 읽을 수 있고 이해할 수 있어야 한다.
- 스크립트는 구현하기 쉬워야 한다. 웹개발자가 스크립트를 웹페이지에 포함시키고 자바스크립트 훅(hook)을 추가하기만 하면 스크립트가 동작해야 한다.
- 스크립트는 분리돼야 한다. 스크립트는 HTML안에 흩어져 있는 것이 아니라 js파일에 따로 존재해야 한다.
html로 코딩을 한뒤 css로 표현을 하고, 자바스크립트로 동작되게 만들되 자바스크립트가 동작하지 않더라도 페이지를 읽는데 제한이 없어야 한다는 거죠.
접근성을 위한 스크립트...
굉장히 머리아픈 부분입니다.
첫째로 스크립트가 지원되지 않는 브라우저에서도 문제가 없어야 한다는 것입니다.
둘째는 마우스가 없을때도 웹을 돌아다니는데 제한이 없어야 합니다.
셋째로 스크린리더에 대한 접근성을 지켜 줘야 합니다.
위 세가지 만을 지키기 위해서도 굉장히 많은 공부를 해야 합니다. 또한 많은 생각을 해야 하지요.
첫번째의 가장 큰 예로 display:none 인 div 가 있고 사용자가 일정 이벤트를 호출했을때 해당 div 스타일이 block으로 바뀐다고 했을때 자바스크립트가 꺼져 있는 브라우저는 해당 내용을 확인 할 수 없습니다.
이를 해결하기 위한 간단한 방법은 자바스크립트를 이용해 해당 div의 display속성값을 none으로 잡아 주는 것입니다. 자바스크립트가 꺼져있는 브라우저는 해당 div의 속성값이 none으로 변하지 않아 페이지를 읽는데 제한이 없을 것 입니다.
둘번째의 예는 onmouseover이벤트에 onfocus이벤트도 같이 사용해야 한다는 것입니다.
세번째는 조금 길어집니다.
스크린리더기의 종류와 스펙이 상이하기 때문이죠.
제가아는 가장 큰 문제는 스크린 리더가 자바스크립트를 거의 지원하며, 페이지를 위에서 아래로만 읽고, 페이지를 줄단위로만 읽을 수 있다는 것입니다. 스크린 리더에 대한 문제 및 이를 위한 방법등은 구글링 등을 통해 알아 보시면 많은 방법들을 접하실 수 있을 것입니다.
이밖에도 많은 부분들을 생각하며 자바스크립트를 짠다면 접근성을 해치는 스크립트를 지양할 수 있을 것이라고 생각 합니다.
자바스크립트는 편리하며 보다 좋은 사용자 환경을 만들어 줍니다.
CSS가 널리 퍼지면서 가끔 무리하게 CSS만을 이용하시는 분들이 주변에 계십니다.
흔하게 사용되는 롤오버 이미지, 탭 등이 있습니다.
하지만 각각 오버되는 이미지들의 크기가 상이하고, 탭에는 시스템폰트가 전혀 사용되지 않았을때, 혹은 기타의 경우 굳이 CSS많을 고집하여 수많은 클래스와 아이디를 생성하고, 이에따라 몇십줄이 넘는 css를 추가하는것은 비효율 적이라고 생각 됩니다.
자바스크립트도 접근성을 고려하여 코딩한다면 절대 사용하지 말아야할 도구가 아닙니다.
차후에 블로그 등을 통해 몇가지 예제등을 올리도록 하겠습니다.
지금은 시간이...
긴글 읽어 주셔서 감사합니다.
댓글 없음:
댓글 쓰기