Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 Flex 제작기법 > Flex 애플리케이션 콘텐츠 구현 예 >
접근성을 고려한 입력서식 제작기법
회원가입 시 각 입력항목에 대한 유효성 검증은 Validator 컴포넌트를 이용하여 수행할 수 있다. 만일 입력창에서 요구하는 값이 정해진 값이 아닐 경우에는 Validator 컴포넌트가 경고창을 이용하여 경고할 수 있다. Validator 컴포넌트가 제공하는 경고창의 텍스트는 보조 기술로 제공된다.
Form컴포넌트를 이용하는 경우에 해당 FormHeading 항목을 입력화면의 제목으로 사용하지 않는다. FormHeading을 사용하면 FormItem 컴포넌트 간의 이동 시에 보조 기술을 통하여 FormHeading이 반복적으로 제공되므로 주의하여야 한다.
아래 예제에서 기본정보 탭에서 Tab 키를 누르면 초점이 입력창을 순차적으로 이동한다. '다음' 버튼을 스페이스 바로 누르면 다음 탭인 '연령/생년월일' 탭의 첫 항목으로 초점이 이동한다.
[그림] 로그인 창의 예제
아래의 프로그램은 Accordion 컴포넌트와 Form 컴포넌트를 이용하여 작성한 회원 가입 창의 구현 예제이다.
<mx:Panel title="회원가입" height="75%" width="75%" paddingTop="10"
paddingLeft="10"paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue" text="회원가입에 필요한 정보를 입력하여 주십시오"/>
<mx:Accordion width="100%" height="100%" id='accrd'
keyUp="dgKey(event)" >
// 첫 번 째 판넬
<mx:VBox label="기본정보">
// Form 컴포넌트를 이용한 항목 구현
<mx:Form width="100%" height="100%">
<mx:FormItem label="성명"><mx:TextInput id="fname" width="200"/></mx:FormItem>
<mx:FormItem label="아이디"><mx:TextInput id="idData" width="200"
keyUp="ddd(event)"/>
</mx:FormItem>
<mx:FormItem label="비밀번호"><mx:TextInput id="passwdData"
displayAsPassword="true"
width="80"/></mx:FormItem>
<mx:FormItem label="비밀번호 확인"><mx:TextInput id="passwdData2"
displayAsPassword="true"
width="80"/></mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="right">
<!-- Accordion을 사용하는 경우에 키보드를 이용하여 다음화면으로
이동하도록 다음 판넬의 첫 번째 입력창에 초점을 준다. -->
<mx:Button label="다음" click="{accrd.selectedIndex=1; dob.setFocus();}"/>
</mx:HBox>
</mx:VBox>
// 두 번째 판넬
<mx:VBox label="연령 / 생년월일"><mx:Form width="100%" height="100%">
<mx:FormItem label="생년월일 (mm/dd/yyyy)"><mx:TextInput id="dob" width="200"/>
</mx:FormItem>
<mx:FormItem label="연령"><mx:TextInput id="age" width="200"/></mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Buttonlabel="이전" click="{accrd.selectedIndex=0;
fname.setFocus();}"/>
<mx:Button label="다음" click="{accrd.selectedIndex=2;
email.setFocus();}"/>
</mx:HBox>
</mx:VBox>
// 세 번째 판넬
<mx:VBox label="연락처"><mx:Form width="100%" height="100%">
<mx:FormItem label="E-mail"><mx:TextInput id="email" width="200"/>
</mx:FormItem>
<mx:FormItem label="전화번호"><mx:TextInput id="phone" width="200"/>
</mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Buttonlabel="이전" click="{accrd.selectedIndex=1;
dob.setFocus();}"/>
</mx:HBox>
</mx:VBox>
</mx:Accordion>
</mx:Panel>
//Validator 컴포넌트를 이용한 텍스트는 경고창고 함께 보여줌.
<mx:StringValidator source="{fname}" property="text" minLength="4"
maxLength="12" tooLongError="정상적인 이름이 아닙니다."/>
<mx:PhoneNumberValidator source="{phone}" property="text"
invalidCharError="잘못된 연락처 정보입니다.."/>
<mx:DateValidator source="{dob}" property="text" wrongDayError="올바른
날짜형식이 아닙니다."/>
<mx:EmailValidator source="{email}" property="text" missingAtSignError=
"올바른 e-mail형식이 아닙니다."/>
<mx:NumberValidator source="{age}" property="text" minValue="18"
maxValue="100" domain="int" invalidCharError="숫자만 사용할 수 있습니다."/>입력해야 하는 정보를 몇 개의 그룹으로 나누고 각 그룹을 Accordion이나 TabNavigatior 컴포넌트의 패널이나 탭으로 구성하는 경우에, 패널간의 이동이나 탭의 전환이 용이하도록 단축키를 제공하거나 패널 전환 또는 탭 전환용 버튼을 추가한다. 위의 예제에서 '다음' 버튼을 누르면 다음 패널('연령/생년월일')로 이동한다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)