Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 Flex 제작기법 > Flex 애플리케이션 콘텐츠 구현 예 >
사용자 UI를 고려한 제작기법
Flex 콘텐츠는 이미지의 확대/축소 기능을 제공한다. 이 기능은 시각을 사용하는 경우에는 유용하지만 전맹인 시각장애인에게는 불필요한 기능이다.
따라서 아래와 같은 Flex 콘텐츠의 경우에 '컨텐츠 확대' 및 '컨텐츠 축소' 버튼은 Tab 키로 이동이 불가능해야 한다. 그러나 비장애인에게는 이들이 버튼과 같은 역할을 하여야 한다.
[그림] 콘텐츠의 축소/확대 예제
이 예제를 Flex로 구현할 때 Button 컨트롤을 이용하면 Tab 키에 의하여 초점이 주어지므로 버튼의 Label 속성을 화면 낭독 프로그램이 읽어주게 된다. 위의 예제와 같이 '컨텐츠 확대' 또는 '컨텐츠 축소' 버튼으로 초점이 이동하지 않게 하려면, image 컨트롤을 이용하여 버튼을 대신하여야 한다. 또한 이미지 위에 마우스 포인터가 위치할 때에 마우스 포인터가 손바닥 모양으로 변화하도록 하면, 초점이 제공되지 않으나 마우스 사용은 가능하므로 시각장애인과 비장애인 모두가 편리하게 이용할 수 있다.
화면 낭독 프로그램을 실행하더라도 Tab 키나 Shift + Tab 키에 의하여 초점이 버튼으로 이동하지 않아야 한다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
Application{backgroundColor: #FFFFFF; fontFamily: "verdana", "돋움체"; fontSize: 12;}
ToolTip{ fontSize: 12; fontFamily: "verdana", "돋음";}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.effects.Zoom;
private var originWidth:Number=1;
private var originHeight:Number=1;
// 콘텐츠를 확대 / 축소 한다.
public function contentZoom(flag:String):void{
var zoom:Zoom = new Zoom();
zoom.originY=0;
if (flag == 'zoomIn'){
originHeight += 0.1;
originWidth += 0.1;
} else if (flag == 'zoomOut') {
originHeight -= 0.1;
originWidth -= 0.1;
if (originHeight < 1){
originHeight=1;
}
if (originWidth < 1){
originWidth=1;}
}
zoom.zoomHeightTo = originHeight;
zoom.zoomWidthTo = originWidth;
zoom.target = Application.application.kado;
zoom.play();
}
]]>
</mx:Script>
<!--컨텐츠 확대 축소 시작-->
<mx:Panel title="KADO 위치안내소개" tabIndex="1">
<mx:Label text="콘텐츠 축소 / 확대" fontWeight="bold" fontSize="14" color="#343434"
tabIndex="2"/>
<mx:Label text=" - 콘텐츠의 확대 축소기능은 zoom 기능을 통해 구현한다."
color="#343434" tabIndex="3"/>
<mx:Label text=" - 콘텐츠의 확대 축소버튼은 tabIndex 속성으로 버튼 이동 순서를 정하여
순서대로 버튼이 이동하게 구현한다." color="#343434" tabIndex="4"/>
<mx:HBox width="650" height="480" id="targetBox"
verticalScrollPolicy="off"
horizontalScrollPolicy="off" paddingTop="10" paddingLeft="10">
<mx:Box width="638" height="463" paddingLeft="0" paddingRight="0"
paddingBottom="0" paddingTop="0" id="kado" borderStyle="solid"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image width="330" toolTip="한국정보화진흥원 약도" source="map.gif"
creationComplete="event.target.accessibilityProperties
=new AccessibilityProperties();
event.target.accessibilityProperties.description = '한국정보문화진흥원 약도
- 대표전화 02-3660-2500, 홈페이지담당전화 02-3660-2745 지하철 5호선 발산역에서
강서 보건소 사이 백석초등학교 옆(등촌중학교 건너편) 한국정보문화진흥원'" tabIndex="5"/>
</mx:Box>
</mx:HBox>
<mx:HBox width="650" verticalAlign="bottom" horizontalAlign="right">
<mx:Button label="확대" click="contentZoom('zoomIn')"
buttonMode="true" <mx:Button label="축소" click="contentZoom('zoomOut')"
buttonMode="true"
tabEnabled="true" tabIndex="7"/>
</mx:HBox>
</mx:Panel>
<!-- 콘텐츠 확대 축소 종료 -->
</mx:Application>
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)