Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 Flex 제작기법 > Flex 애플리케이션 콘텐츠 구현 예 >
접근성을 고려한 차트 제작기법
Chart 컴포넌트는 각종 데이터를 막대 그래프(Bar graph), 파이 차트(Pie chart), 꺾은선 그래프(Line graph)를 묘사할 경우에 사용된다. Flex를 이용하여 차트를 표현하는 것은 매우 간단하다. 이 때 주의해야 할 점은 차트에서 색상을 배제하더라도(예를 들어 흑백 모니터로 화면을 확인할 경우) 충분히 인지할 수 있도록 표현되어야 한다는 것이다.
또한 Flex에서 제공하는 차트의 구체적인 내용은 보조 기술을 통하여 텍스트로 제공될 수 없다. 따라서 차트는 그 내용에 대한 대체 텍스트를 제공하여야 한다. 아래의 예제는 차트의 정보를 텍스트로 변환하여 출력하는 예제를 보여준다.
[그림] 차트 예제
<mx:Style>
Application{
backgroundColor: #FFFFFF; fontFamily: "verdana", "돋움체"; fontSize: 12;}
ToolTip{fontSize:12; fontFamily: "verdana", "돋음";}
</mx:Style>
<mx:Script>
<![CDATA[import mx.effects.Zoom; import mx.core.Container;
import mx.collections.ArrayCollection; import mx.controls.Alert;
private var opiAC :ArrayCollection = new ArrayCollection([
{OPI_NAME: '창의력', SUM_NUM: '7'},
{OPI_NAME: '어휘력', SUM_NUM: '8'},
{OPI_NAME: '의지력', SUM_NUM: '10'}]);
[Bindable]
private var accessStr : String = "";
/* chart 정보를 텍스트로 변환하는 부분*/
private function changStr(arrAC:ArrayCollection):void{var accStr :String = ""; for( var i:int = 0; i<arrAC.length; ++i){ accStr+= arrAC[i].OPI_NAME + ' ' + arrAC[i].SUM_NUM + ' 점. '; } accStr+= '입니다'; accessStr = accStr;}</mx:Script>
<mx:VBox width="100%" height="100%"
creationComplete="changStr(opiAC);">
<mx:Panel title="차트" height="75%" width="600" paddingTop="10"
paddingLeft="10"
paddingRight="10" paddingBottom="10">
<mx:BarChart id="bbb" color="0x567dbb" styleName="pageBar" width="98%"
height="100%"
showDataTips="true" fontSize="11" gutterLeft="70" fontFamily="굴림"
dataProvider="{opiAC}" >
<mx:verticalAxis><mx:CategoryAxis categoryField="OPI_NAME"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis maximum="24"/></mx:horizontalAxis>
<mx:series>
<mx:BarSeries id="xxx" yField="OPI_NAME" xField="SUM_NUM" displayName="항목" />
</mx:series>
<mx:backgroundElements>
<mx:Array>
<mx:GridLines direction="both">
<mx:verticalStroke><mx:Stroke weight="1" color="#CCCCCC"/></mx:verticalStroke>
</mx:GridLines>
</mx:Array>
</mx:backgroundElements>
</mx:BarChart>
<!-- 차트가 화면 낭독 프로그램을 지원하지 않으므로, height 값을
0으로 설정한 상태에서 차트내용을 텍스트로 변환하여 제공함-->
<mx:Label text="{accessStr}" height="0" toolTip="{accessStr}"/>
</mx:Panel>
</mx:VBox>
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)