Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > 웹 접근성과 JavaScript >
접근성 있는 JavaScript 코딩 방법
점진적 향상 방법은 결국 웹 콘텐츠를 내용, 표현, 기능의 세 가지로 분리하여 내용과 표현을 먼저 구현하고, 여기에 구현 기능을 추가하게 된다. 극단적으로는 이들 세 가지 웹 콘텐츠 구성요소를 완전히 분리하여 접근성을 높이려는 시도가 바로 겸손한 구현 방법이다. 따라서 1.2.2절에서 설명한 점진적 향상 기법을 기술적인 관점, 특히 JavaScript의 관점에서 해석한 것이 겸손한 구현방법이라고 볼 수 있다.
JavaScript는 DOM 메쏘드를 사용해서 동적으로 HTML이나 CSS 코드를 수정, 추가 또는 삭제할 수 있다. HTML 코드에 들어있는 이벤트 핸들러를 모두 JavaScript로 옮기는 것도 가능하다. 이렇게 기능과 관련한 JavaScript 이벤트 핸들러나 HTML 문서 내에 삽입된 JavaScript를 모두 분리해 낼 수 있다. HTML과 JavaScript가 완전히 분리된 상태에서는 HTML 문서가 독립적으로 의미를 갖고 기능을 할 수 있다. 이 상태에서 JavaScript는 HTML 문서 안에 포함되어 있지도 않고 지나친 개입도 하지 않는다. 자신의 역할이 필요할 때에만 HTML 문서와 기능적으로 교류하게 된다. 따라서 JavaScript가 지나치게 개입하지 아니하므로 이를 겸손한 구현방법이라고 부른다.
아래의 코드는 마우스를 이미지 위에 올렸을 때 이미지가 바뀌는 기능을 JavaScript로 구현한 것이다. 스크립트에서 먼저 함수를 선언하고 이를 HTML의 onmouseover 이벤트 핸들러를 이용하여 연결하였다. 여기서 이벤트는 JavaScript가 제공하는 기능이고 링크는 HTML이 제공하는 기능이다. HTML 속성 내에서 이벤트를 부여하였기 때문에 JavaScript 코드가 HTML내에 포함되어 있다.
<script type="text/JavaScript">
function changeImage(img) {
img.src = img.src.replace(".gif", "_on.gif");}
</script>
<p><a href="about.html">
<img src="introduction.gif" onmouseover="changeImage(this)"
alt="소개"></a></p>위의 예제를 겸손한 구현 방법을 이용하여 구현하려면, 우선 HTML 부분과 JavaScript 부분으로 구분한다. 다음은 HTML 코딩 부분으로 스크립트를 완전히 분리해 내었음을 알 수 있다. HTML 코딩 부분에서는 연결자(about-image)와 스크립트를 불러오는 구문만을 넣고 나머지 모든 기능은 아래와 같이 JavaScript 파일인 changeImage.js로 분리하여 구현하였다.
<script type="text/JavaScript" src="changeImage.js"></script>
<p><a href="about.html"><img src="introduction.gif" id="about-image"
alt="소개"></a></p>changeImage.js는 다음과 같다. JavaScript 부분에는 아무런 HTML 코드가 포함되어 있지 않음을 알 수 있다.
window.onload = function () {
document.getElementById("about-image")
.onmouseover= function changeImage() {
this.src = this.src.replace(".gif", "_on.gif");
}
}JavaScript 코딩시에 간단한 기능을 수행하는 스크립트를 위의 예와 같이 분리하는 작업이 오히려 번거로울 수 있지만, 기능이 많아지고 복잡할수록 점차 장점이 늘어난다. 기능을 구별함으로써 각각의 코드들이 간단해지고 웹 콘텐츠의 크기도 줄어들게 된다. 그리고 HTML 자체적으로 모든 기능을 할 수 있기 때문에 자연히 접근성도 향상된다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)