Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 Flex 제작기법 > Flex 애플리케이션 콘텐츠 구현 예 >
접근성을 고려한 입력서식 제작기법
기본적으로 로그인 기능은 ID와 비밀번호를 TextInput 컴포넌트를 통해 입력 받아, 해당 계정의 유효여부를 판단하고, 그 결과에 따라 다음으로 진행하는 동작을 수행한다.
Flex에서 화면을 구성할 경우에 Form 컴포넌트를 이용하면, 보조 기술 사용자에게 필요한 정보를 용이하게 제공할 수 있다. 그러나 디자인 측면에서는 Box 컴포넌트나 Canvas 컴포넌트를 이용하는 것이 좋다.
Box 컴포넌트나 Canvas 컴포넌트를 이용하여 화면을 구성할 경우에 입력창 간에 이동하는 순서를 고려하여야 한다. 즉 입력창에 초점이 주어지면, 입력창의 Title이 보조 기술로 제공되므로 입력창의 배치와 순서가 사용자의 예상에 적합하여야 한다. 입력창의 순서는 tabIndex 속성에 의하여 결정된다. Tab 키로 초점을 이동시키는 경우에 tabIndex 값이 작은 컴포넌트로 먼저 이동하므로 초점 이동 순서가 정확한 순서를 유지하도록 한다.
아래 예제의 프로그램은 아이디 입력창, 비밀번호 입력창 및 확인 버튼으로 구성된 로그인 창의 구현 예제이다.
[그림] 로그인 창의 예제
아래 프로그램에서 보면, 아이디 입력창, 비밀번호 입력창 및 확인 버튼의 tabIndex 값이 각각 1, 2, 3으로 설정되었음을 알 수 있다. 또한 아이디와 비밀번호를 입력한 후에 Enter 키를 누르면 제출되도록 하기 위하여, 비밀번호를 입력하는 TextInput 컴포넌트의 키보드 이벤트 속성을 enter="submitForm()"으로 설정한다.
<mx:Panel title="로그인" height="75%" width="75%" paddingTop="10"
paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Form width="100%" height="100%">
<mx:HBox width="300" height="300">
<mx:VBox width="200" height="101">
<mx:FormItem label="아이디">
// Form을 통해 텍스트 입력창의 title을
// 바로 읽어들일 수 있도록 구성함
// 키보드 이동순서는 tabIndex를 이용함.
<mx:TextInput id="idData" width="135" tabIndex="1"/></mx:FormItem>
<mx:FormItem label="비밀번호">
// enter 키입력시 바로 실행되도록 enter 속성을 이용함
<mx:TextInput id="passwdData" width="135"
tabIndex="2" displayAsPassword="true" enter="submitForm()"/>
</mx:FormItem>
</mx:VBox>
<mx:VBox verticalAlign="middle">
<mx:Button label="확인" height="56" tabIndex=" click="submitForm()"/>
</mx:VBox>
</mx:HBox>
</mx:Form>
</mx:Panel>
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)