Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
접근성을 고려한 입력서식 제작기법
아래 예제는 form 태그를 이용하여 Submit하는 전형적인 온라인 서식의 예제이다.
[그림] 로그인 화면 예제
앞에서 이야기한 대로 input type="image"... 태그를 이용하여 Submit 할 수 있도록 하였으며, Submit 시에 JavaScript로 ‘아이디’와 ‘비밀번호’의 유효성을 검증하는 submitForum errorMessage 함수를 호출하고 있다.
submitForum errorMessage 함수의 실행결과 ‘아이디’가 빈공간일 경우에는 errorMessage를 경고 창으로 출력한 후에 ‘아이디’ 입력창으로 초점이 이동하여 아이디를 입력할 수 있도록 한다. ‘비밀번호’가 빈 공간일 경우에도 마찬 가지 절차를 따른다.
이 프로그램에서 JavaScript는 기능을 제공하는 것에 국한되어 있으므로 Tab 키에 의한 이동순서는 ‘아이디’ 입력창, ‘아이디저장’ 체크박스, ‘비밀번호’ 입력창, ‘로그인’ 버튼, ‘회원가입’ 링크, ‘아이디/비밀번호 찾기’ 링크로 되어있다. Shift + Tab 키에 의한 이동순서는 역순이다. 화면 낭독 프로그램은 초점이 주어지는 구성요소를 읽어주어야 한다.
//HTML Document
<head>
<title>로그인</title>
<link rel="stylesheet" href="./common/style.css" type="text/css" />
<script type="text/javascript" src="./common/script.js"></script>
</head>
<body>
<div id="MemberLogin">
<div id="MemberLoginSub">
<form id="LoginForm" name="LoginForm" method="post" action=""
onsubmit=" return submitForum(this);">
<fieldset>
<legend><img src="./img/login_ti.gif" alt="회원 로그인" /></legend>
<p><label for="LoginId">아이디</label>
<input type="text" id="LoginId" name="LoginId" maxlength="15" value="" />
<span><input type="checkbox" id="LoginCheck" name="LoginCheck" value="1" />
<label for="LoginCheck">아이디저장</label></span></p>
<p><label for="LoginPass">비밀번호</label>
<input type="password" id="LoginPass" name="LoginPass" maxlength="15" value="" />
<input type="image" src="./img/login_submit.gif" class="loginbtn" alt="로그인" />
</p></fieldset></form>
<div class="MemberBox"><a href="./회원가입.html" class="point">회원가입</a>
<a href="./비밀번호.html">아이디 / 비밀번호 찾기</a></div>
</div>
</div>
</body>
// JavaScript Document
function submitForum(formEl){
var errorMessage = null;
var objFocus = null;
if(formEl.LoginId.value.length == 0 ){
errorMessage = "아이디를 넣어 주세요";
objFocus = formEl.LoginId;}
else if(formEl.LoginPass.value.length==0){
errorMessage = "비밀번호를 넣어 주세요";
objFocus = formEl.LoginPass;}
if(errorMessage != null){
alert(errorMessage);
objFocus.focus();
return false;}
return true;}
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)