Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 접근성 지원 프로그래밍 지침 >
표준의 준수
국가표준에는 포함되어 있지 않으나 웹 콘텐츠를 개발하기 위해서는 기본적으로 표준에 따른 HTML 및 CSS 문법을 적용한다. 또한 JavaScript 표준 문법도 준수하여야 한다. 문법에 맞지 않는 스크립트가 웹 콘텐츠에 포함되어 있으면 브라우저 간의 호환성이 떨어질 뿐 아니라 접근성을 지원하지도 못한다. 스크립트에 버그가 있을 경우에도 브라우저에서 실행되지 않는 경우가 많으므로 세밀한 디버깅을 할 필요가 있다.
(1) JavaScript 프로그램은 문법에 맞도록 코딩하여야 한다.
가) JavaScript의 선언JavaScript는 HTML의 스크립트 태그를 사용하여 문서에 삽입된다. 스크립트 태그는 문서가 로딩될 때 작동한다. 스크립트가 사용할 수 있는 속성은 charset, type, src, defer 등이다. 이 중에서 type 속성은 필수 속성이기 때문에 반드시 선언이 되어야 한다. 아래 예제는 type 속성을 이용하여 스크립트를 선언하고 있다.
<script type="text/JavaScript">
//code
</script>여기서 language 속성은 폐기된(deprecated) 속성이기 때문에 language 속성을 이용하여 스크립트를 선언하는 것은 잘못된 방법이다.
스크립트 요소는 <head> ... </head> 또는 <body> ... </body> 내에만 존재하여야 한다. 스크립트 요소를 html 태그 앞이나 </head>와 </body> 사이 등, 잘못된 곳에 포함시키면 정상적인 동작을 보장할 수 없다.
HTML문서의 마지막에 스크립트를 삽입할 경우, 아래의 예와 같이 HTML을 닫는 태그 </html> 뒷부분에 삽입하지 않아야 하며, </body> 태그 앞부분에 삽입해야 한다.
...
...
...
<script type="text/JavaScript">
//code
</script>
</body>
</html>
<!-- 이곳에는 스크립트 요소가 위치할 수 없다. -->웹사이트를 이용하다 보면 Form(form)에 값을 입력하고 submit 하는 순간 클릭을 여러 차례 한 것과 같이 "따다다닥" 하는 소리가 나는 경우가 있다. 그 이유는 submit 기능을 JavaScript로 수행하기 때문이다.
<script type="text/JavaScript"> document.location.href ="redirection.html";</script>이와 같은 현상은 아래와 같이 form을 이용해서 submit 하는 경우에도 발생한다.
<form name="login_form">
<input type="hidden" name="user_id" value="myid" />
<input type="hidden" name="user_pwd" value="mypassword" />
<input type="hidden" name="redirect_url" value="http://mysite.com/login/"/>
<input type="hidden" name="somevalue" value="blahblah" />
...
</form>
<script type="text/JavaScript">
f = document.forms.login_form;
f.action = "http://login.oursite.com/login/";
...
f.submit();
</script>심한 경우 아래와 같이 전혀 의미 없는 Form을 이용하기도 한다.
<form method="post" name="sg_form"
action="http://www.qubi.com" target="_top"></form>
<script> sg_form.submit(); </script>이상의 프로그램 예제는 분명한 HTML 문법상 에러이며, 이로 인하여 필요한 기능이 작동하지 못하는 경우도 발생한다. form 태그나 script 태그는 상위의 body 나 head 태그가 있어야 하는데 위의 예에서는 이러한 태그가 없으므로 HTML 문장으로 해석이 안 되기 때문에 스크립트가 작동하지 않거나 submit이 불가능하다. 그리고 form 태그에는 submit을 위한 input 태그가 존재하지 않으므로 JavaScript로 submit을 할 수 없는 경우도 있다.
이와 같이 페이지를 이동하거나 submit이 필요할 때에 JavaScript를 이용하게 되면 클라이언트의 환경에 따라서 동작이 실패할 수 있다. 따라서 이러한 처리는 JavaScript 보다는 서버 측에서 http 헤더 정보를 이용해서 처리하는 것이 좋다.
이러한 중간과정에서의 처리는 서버 측에서 모두 처리하는 것이 가장 바람직 하지만 어쩔 수 없이 사용을 해야 할 경우에는 DTD 선언이나 html 태그, head, body와 같이 필수 태그들이 포함된 완전한 페이지로 구성한다. 또한 JavaScript가 작동하지 않는 경우를 위해서 form에 submit 버튼도 제공한다. submit 결과에 대한 메시지도 alert외에 일반 text와 a를 이용한 링크를 제공하도록 해야 한다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Redirect</title>
</head>
<body>
<script type="text/JavaScript">
/* some processes... */
alert(' ... 의 이유로 다시 돌아 갑니다.')
document.location.href="redirection.html";
</script>
<p><a href="redirection.html"> ... 의 이유로 다시 돌아 갑니다.</a></p>
</body>
</html>charset을 선언하지 않으면 브라우저는 초기 설정에 의하여 alert 기능이 작동한다. 또한 브라우저의 초기 설정을 ko-kr로 해야 한글이 깨지지 않는다. 문서의 mime-type도 text/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)