3.2.3 스크롤 버튼을 이용한 배너

스크롤 버튼을 이용한 배너는 <버튼을 이용한 스크롤 배너>의 경우와 달리 배너의 이동을 위하여 좌우 이동 버튼을 제공하는 방법이다. 또한 좌우 이동 버튼을 클릭할 때마다 배너가 반 시계방향 또는 시계방향으로 회전하면서 나타난다. 만일 어떤 배너로 이동하고자 할 경우에는 해당 배너 상에 마우스 포인터를 위치시키고 마우스 버튼을 클릭하면 된다.

이러한 스크롤 배너를 Tab 키를 이용하여 조작하는 경우에는 다음과 같은 순서로 초점이 이동한다. 처음에는 좌측 버튼에 초점이 제공되며, 또한번 Tab 키를 누르면 첫 번째 배너로 초점이 이동한다. 이후로 Tab 키를 누를 때마다 계속해서 다음 배너로 초점이 이동한다. 마지막 배너에서 Tab키를 누르면 배너를 빠져나와 초점이 우측 이동 버튼으로 이동한다.

그런데 Tab 키를 이용하여 초점을 이동하는 경우에 좌우 이동 버튼으로 초점이 이동하는 과정은 불필요한 과정이다. 따라서 스크롤 버튼을 이용한 배너를 구현할 때에 키보드 사용자는 좌우 이동 버튼으로 초점을 이동할 수 없으나, 마우스 사용자의 경우에는 좌우 이동 버튼을 사용할 수 있도록 구현한다면 접근성이 매우 좋은 콘텐츠를 제작할 수 있다.

Flash에서 배너는 무비클립 또는 버튼으로 구성하고, 각 배너에 링크를 제공한다. 또한 대체 텍스트를 제공하여 이동할 주소가 어디인지를 화면 낭독 프로그램으로 읽어줄 수 있도록 한다. 이 과정은 <자동 스크롤 배너>와 같다.

좌우 이동 버튼은 버튼의 모습을 가진 이미지로 표현하여 Tab 키로는 초점이 이동할 수 없도록 한다. 그러나 마우스 사용자는 좌우 이동 버튼 이미지를 실제 버튼으로 사용할 수 있도록 프로그래밍한다. 즉 좌우 이동 버튼 이미지 위에 마우스 포인터를 위치시키면 마우스 포인터가 손바닥 모양으로 변경되도록 설정한다. 또한 이 상태에서 마우스 클릭을 하면 실제로 좌우 이동 버튼을 클릭한 것과 같이 처리되도록 ActionScript를 작성한다.

이렇게 구현된 좌우 이동 버튼은 키보드 사용자에게는 초점이 이동하지 않는 화면 구성요소이나, 마우스 사용자는 좌우 이동 버튼으로 사용할 수 있으므로 모두가 편리하게 사용할 수 있는 스크롤 배너를 만들 수 있다. 아래의 예제는 마우스 사용자나 키보드 사용자가 모두 사용할 수 있도록 구현한 스크롤 버튼을 이용한 배너의 모습이다.

이미지 위에서 마우스 포인터의 모양을 변경하는 방법과 마우스를 클릭하였을 때에 지정된 동작을 수행하도록 ActionScript를 작성하는 과정은 Flash 제작 기법에 관한 사항이므로 이 문서에서는 설명을 생략한다.