Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 접근성 지원 프로그래밍 지침 >
온라인 서식 구성
온라인 서식은 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.
(1) 웹 페이지를 구성하는 온라인 서식 요소는 논리적이어야 한다.
(2) 온라인 서식에서 Tab 키에 의한 이동 순서는 논리적이어야 한다.
(3) 온라인 서식은 JavaScript 기능을 지원하지 않는 브라우저에서도 submit이 가능하여야 한다.
온라인 서식은 사용자가 입력한 값을 서버에 전달하는 역할을 하는 웹 콘텐츠이다. 온라인 서식은 form 태그를 이용하여 구성하며, 서버로 전달하기 위해서는 form의 submit 기능을 이용한다.
국가표준 항목 3.3에 따르면, 온라인 서식을 구성하는 모든 서식 제어 요소(예를 들면 편집 상자(edit box), 라디 오 버튼(radio button), 체크 박스(check box)등의 레이블과 해당 서식 제어 요소)간의 표시 순서가 논리적이어야 한다. 또한 온라인 서식은 키보드로만 사용이 가능하여야 하며, Tab 키를 이용하여 서식 제어 요소 간을 이동할 경우에도 그 순서가 논리적이어야 한다. Shift + Tab 키는 Tab 키에 의한 이동 순서의 반대이다.
뿐만 아니라 온라인 서식은 JavaScript를 지원하지 않는 경우에도 submit이 가능하도록 구성하여야 한다. 그렇지 않으면 온라인 서식을 작성하였음에도 불구하고 스크립트를 지원하지 않는 환경 때문에 그동안 입력한 결과를 submit할 수 없어서 수포로 돌아갈 수 있기 때문이다.
가) 로그인
[그림] 로그인 예제
input type="image" 이 submit에 필요한 컨트롤이다. 그런데 Form에서 입력한 값의 유효성 여부를 동적으로 검사
하기 위하여 스크립트로 코딩하게 되는데, 이 과정에서 Form의 submit 기능을 이용하지 않고 스크립트로 submit
기능을 대신하도록 코딩하는 경우가 있다. 아래의 코드는 스크립트를 이용한 submit 코드의 예제이다.
<script type="text/javascript">
function submitForm() {loginForm.submit();}
</script>
<form id="loginForm" name="loginForm" action="">
User Id <input type="text" name="loginId">
User Password <input type="password" name="loginPassword"><br><img src="login.gif" alt = "로그인" onclick="submitForm()"></form>이 경우에 Form에 submit 기능이 없기 때문에 JavaScript를 지원하지 못하는 일부 브라우저의 경우에는 submit이 불가능한 경우가 발생한다. 뿐만 아니라 submit 대신에 이미지가 들어가 있기 때문에 의미적으로도 맞지 않는다. 따라서 Form을 제작할 때에는 반드시 submit 기능을 input 태그로 구성하여야 한다. 아래의 코드는 input을 이용하여 재구성한 submit 방법의 예제이다.
<form id="loginForm" name="loginForm" action="">
<p><label for="loginId">User Id</label><input type="text" id="loginId"
name="loginId" /><br />
<label for="loginPassword">User Password</label>
<input type="password" id="loginPassword" name="loginPassword" /></p>
<p><input type="image" src="login.gif" alt="로그인" /></p>
</form>나) 유효성 검증
클라이언트 측에서 JavaScript를 이용하여 유효성을 검증하는 기능은 form의 submit 이벤트를 캐치하는 방식으로 구현해야 한다. 만일 JavaScript가 Form을 submit 하도록 하면, < 가) 로그인 >에서 이야기 한 것과 같이 브라우저에 따라서 submit이 불가능한 경우가 발생한다.
아래의 코드는 JavaScript를 이용하여 Form의 유효성을 검증하는 프로그램으로 HTML만으로는 기능이 작동하지 않는다.
<script type="text/javascript">
function submitForm(formEl) {
var errorMessage = null;
var objFocus = null;
if (formEl.loginId.value.length == 0) {
errorMessage = "아이디를 넣어주세요.";
objFocus = formEl.loginId;}
else if (formEl.loginPassword.value.length == 0) {
errorMessage = "비밀번호를 넣어주세요.";
objFocus = formEl.loginPassword;}
if(errorMessage != null) {
alert(errorMessage);
objFocus.focus();
return false;
} return true; }
</script>
<form id="loginForm" name="loginForm" action=""
onsubmit="return submitForm(this)">
<label for="loginId">아이디</label><input type="text" id="loginId"
name="loginId" />
<label for="loginPassword">비밀번호</label>
<input type="password" id="loginPassword" name="loginPassword" /><br />
<input type="image" src="login.gif" alt="로그인" />
</form>위의 프로그램에서는 onsubmit 이벤트를 이용해서 입력 필드의 유효성을 체크하고, 유효성 검사 결과를 true나 false로 리턴하는 예를 보여주고 있다. 따라서 입력 필드에 에러가 있을 경우에는 submit을 멈추고 에러가 발생한 입력 창에 초점이 주어지게 된다.
다) 게시판 기능
[그림] 게시판 기능 예제
게시판에서 JavaScript만으로 페이지 간을 이동하는 것을 종종 볼 수 있다. 아래의 프로그램은 사용자 input이 없는 빈 Form을 하나 만들고 JavaScript를 이용해서 내용을 보거나 페이지를 이동하도록 구현한 예제이다.
<form method="post" name="vars">
<input type="hidden" name="articleId" value="23" />
<input type="hidden" name="page" value="3" />
<input type="hidden" name="keysord" value="" />
<input type="hidden" name="searchType" value="" />
<!-- 등등 -->
</form>
.
.
<a href="javascript:ArticleRead()">글읽기</a>
<a href="javascript:GoList()">리스트 보기</a>이 방법은 URL이 간단하고 다루기 쉽기 때문에 개발자들이 선호하는 경향이 있으나 절대로 사용해서는 안 된다. 왜냐하면 <게시판 기능 예제 >의 프로그램과 같이 필요한 기능을 JavaScript로 구현하면, 스크립트 오류가 발생하거나 JavaScript가 정상적으로 작동하지 않을 경우 해당 기능에 접근할 수 없기 때문이다. 또한 모든 변수를 post로 전달하기 때문에 주소창에 URL이 표시되지 않아 해당 페이지를 따로 북마크하거나 저장할 수가 없다. 이때문에 해당 게시물로의 접근이 원천적으로 차단되는 현상이 발생한다. 따라서 웹 콘텐츠를 <a> 태그와 URL만으로도 수행이 가능한 웹 페이지로 만들고, 필요시에 QueryString을 이용하여 필요한 정보를 검색하도록 하는 것이 가장 좋다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)