Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 Flex 제작기법 > Flex 콘텐츠 접근성 기술지침 > 읽는 순서의 설정
콘텐츠의 읽는 순서는 논리적이어야 한다.
국가표준 항목 3.1 에 따르면, 웹 콘텐츠는 화면에 표시되는 구성요소의 나열 순서와 보조 기술을 통하여 전달되는 정보의 순서가 일치하여야 한다. 만일 그 내용이나 순서가 일치하지 않거나 논리적으로 상이할 경우에는 웹 콘텐츠를 화면을 통하여 인지하는 사람과 보조 기술을 통하여 인지하는 사람 간에 차이가 발생한다.또한 웹사이트의 사용성을 높이기 위하여 웹사이트가 제공하는 모든 웹 페이지의 구조, 형태, 사용법 등이 통일성을 가져야 한다. 필요시에는 웹 페이지의 시작 부분에 사용법이나 구도에 관한 정보를 제공한다.
(1) Flex 콘텐츠의 화면구성 요소를 읽어주는 순서는 논리적이어야 한다.
(2) 화면구성 요소의 배치와 이동 순서는 모든 웹 페이지 간에 일관성이 있어야 한다.
(3) 웹 페이지의 레이아웃, 구조, 사용법이 복잡한 Flex 콘텐츠는 사용법이나 구도에 관한 정보를 제공하여야 한다.
화면에 표시되는 콘텐츠의 배치와 이동 순서는 화면 왼쪽상단에서 화면 오른쪽 아래 방향이라는 전통적인 기준을 따라야 한다. 그러나 SWF 파일에서 보조 기술로 제공하는 콘텐츠 정보의 순서는 예상과 같이 전통적인 기준을 따르지 않는다. 단순한 Flex 콘텐츠의 경우에는 읽는 순서가 큰 문제가 되지 않을 수 있지만, 복잡한 Flex 콘텐츠의 경우에 콘텐츠의 읽는 순서를 통제하지 못하면 콘텐츠의 구조나 내용을 이해하기 어렵게 된다.
가) 단순한 사용자 인터페이스 Flex 콘텐츠의 읽는 순서를 제어하는 가장 쉬운 방법은 사용자 인터페이스를 비교적 단순하게 구성하는 것이다. 예를 들어 아코디언(accordion)이나 탭 내비게이터(tab navigator)를 사용한 콘텐츠는 사용자들이 이동하는 순서가 명확하므로 화면 낭독 프로그램이 읽어주는 순서도 명확하다.
트리 컨트롤(Tree Control), 데이터 그리드(Data Grid), 텍스트 영역(Text Area)으로 구성된 Flex 콘텐츠의 경우에 화면 낭독 프로그램은 트리 컨트롤, 데이터 그리드, 텍스트 영역의 순서로 콘텐츠를 읽어주어야 할 것이다. 실제로 화면 낭독 프로그램이 타이틀(title), 트리 컨트롤, 데이터 그리드, 텍스트 상자(text box), 그리고 링크(link)의 순서로 읽어준다면 화면에 표시된 순서와 읽는 순서가 동일하기 때문에 추가로 보완해야 할 사항은 없다. 이처럼 개발자들은 화면 낭독 프로그램을 이용하여 화면에 표시된 순서와 실제로 화면 낭독 프로그램이 읽어 주는 순서가 동일한지를 확인해야 한다.
[그림] 트리 컨트롤(Tree Control), 데이터 그리드(Data Grid),
텍스트 영역(Text Area)으로 구성된 Flex 콘텐츠 예제
복잡한 레이아웃(layout)을 가진 Flex 콘텐츠는 화t면 낭독 프로그램 사용자가 쉽게 이해하기 어렵다. 아래의 Flex 콘텐츠는 화면에 9개의 상품을 한 줄에 3개씩 3줄로 나열한 예제이다. 각 상품은 이미지와 레이블(label)로 구성되어 있다. 그런데 이미지와 레이블이 서로 다른 컴포넌트이므로 레이블의 읽는 순서와 이미지의 나열 순서가 일치하지 않는다. 따라서 Flex 콘텐츠는 읽는 순서가 화면에 표시된 순서와 일치하도록 만들어야 한다.
나) 복잡한 응용 콘텐츠
[그림] Tab 키에 의한 이동순서 예제
화면 낭독 프로그램의 읽는 순서를 제어하기 위해서는 MXML 파일의 tabIndex 속성 값을 설정해야 한다. SWF 파일에서 콘텐츠의 읽는 순서와 Tab 키에 의한 이동 순서는 동일하다. 즉 화면 낭독 프로그램은 tabIndex 목록에 열거된 순서대로 콘텐츠를 읽어주기 때문에, 텍스트 필드(text field) 뿐 아니라 초점이 주어지지 않는 모든 인터페이스 컨트롤을 포함한 모든 개체에 tabIndex 값을 제공한다.
아래의 코드는 위에 보인 예제에서 첫 번째 줄의 콘텐츠에 tabIndex 값을 지정하는 프로그램이다. tabIndex 값을 지정하는 부분은 밑줄로 표시하였다. 마찬가지 방법으로 나머지 2줄의 콘텐츠에도 tabIndex 값을 지정할 수 있다. 여기서 중요한 점은 응용 콘텐츠에 포함된 모든 개체의 tabIndex 값을 지정해야 하는 점이다. 만일 어떤 한 개체의 tabIndex 값을 지정하지 않아도 읽는 순서는 원래 상태로 돌아감을 유의하여야 한다.
<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:VBox width="100%" height="100%" paddingTop="10"
paddingLeft="10" horizontalAlign="left" verticalAlign="top"
horizontalScrollPolicy="off">
<mx:Panel title="쇼핑몰 정보소개" tabIndex="1">
<mx:HBox><mx:VBox width="120" horizontalAlign="center">
<mx:Image source="i1.jpg" toolTip="캔버스화" tabIndex="2" width="80" height="70"/>
<mx:Label text="30000원" tabIndex="3"/></mx:VBox>
<mx:VBox width="120" horizontalAlign="center">
<mx:Image source="i2.jpg" toolTip="부츠" tabIndex="4" width="80" height="70"/>
<mx:Label text="40000원" tabIndex="5"/></mx:VBox>
<mx:VBox width="120" horizontalAlign="center">
<mx:Image source="i3.jpg" toolTip="남성화" tabIndex="6" width="80" height="70"/>
<mx:Label text="60000원" tabIndex="7"/></mx:VBox>
</mx:HBox>
...
</mx:Panel>
</mx:VBox>
</mx:Application>다) 복잡한 웹 페이지의 사용법 제공방법 Flex 콘텐츠는 기존의 HTML 기반의 웹 콘텐츠와는 동작 방법에서 매우 큰 차이가 있다. 우선 HTML 기반의 웹 콘텐츠는 웹 페이지 단위로 갱신이 이루어 졌으나 Flex 콘텐츠에서는 필요한 부분만 정보가 갱신된다. 따라서 처음 접한 사용자들, 특히 화면 낭독 프로그램 사용자들은 사용방법이 기존의 웹 콘텐츠와 매우 달라 당황하게 된다. 이러한 문제점을 해결하기 위하여 Flex 콘텐츠의 시작부분에 웹 사이트의 구성, 사용하는 컨트롤, 작업을 종료하는 방법 등에 대한 정보를 제공할 필요가 있다.
(1) description 프로퍼티를 이용한 사용법 제공
사용법을 제공하는 가장 간단한 방법은 Flash 콘텐츠에서와 같이 description 프로퍼티를 사용하여 대체 텍스트를 제공하는 것이다. description 프로퍼티를 이용하여 제공한 사용법에 관한 설명은 응용 콘텐츠가 처음으로 로딩될 때마다 읽어준다. 따라서 사용법에 대한 설명은 장황하게 작성하지 않는다.
아래의 프로그램은 어떤 블로그 리더 스크립트를 Flex 콘텐츠용으로 작성한 것이다. 우선 description을 지정하는 함수(function)를 정의한다. 이 예제의 경우에 함수명은 accessibleInit()이다.
function accessibleInit() {
var desc = createObject("TextInput","desc",0);
desc.x = 0;
desc.y = 0;
desc.width = 0;
desc.height = 0;
desc.accessibilityProperties = new AccessibilityProperties();desc.accessibilityProperties.description= '사용법:Flex 블로그의 사용자가 이 콘텐츠를 사용하려면애플리케이션을 실행시킨 후에 폼 모드를 활성화 시키시오.';}이어서 mx:Application 요소에서 accessibleInit() 함수를 호출한다.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
mx:Application xmlns:mx=""
creationComplete="accessibleInit(); pageTitle="Flex 블로그리더"/>(2) 새 창을 이용한 방법 사용법이 매우 복잡한 경우에는 사용법에 관한 설명을 별도의 화면으로 구성하는 것이 바람직하다. 즉 버튼이나 링크를 클릭하면 새 창을 열고 콘텐츠의 사용법을 제공하는 것이다. 이 때 사용법을 소개하는 새 창 열기로 이동하는 버튼이나 링크는 콘텐츠를 다운로드한 후에 화면 낭독 프로그램이 첫 번째로 읽어주도록 하는 것이 좋다. 일반적으로 이러한 목적으로 쓰이는 링크나 버튼은 화면에는 보이지 않는 '숨긴 링크' 또는 '숨긴 버튼'으로 대개 콘텐츠의 첫 부분에 위치시킨다. 이들 숨긴 요소들은 화면에는 나타나지 않으나 화면 낭독 프로그램에 의하여 읽어주기 때문에 시각장애인에게 매우 편리하다.
또한 사용법 소개용 새 창 열기 링크나 버튼은 화면의 하단에 배치하여 일반인들에게도 사용법에 관한 정보를 제공할 수 있다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)