메인 비주얼 슬라이드 배너를 키보드로 이용하는 방법

메인 비주얼 슬라이더 영역은 이중 슬라이드의 구조입니다. 상단에 주요 상품을 홍보하는 페이지로의 링크가 걸려있는 대형 이미지 컨텐츠 영역이 있습니다. 하단에는 이미지에 매칭되는 제목이 기입된 슬라이드 배너가 있습니다.

상단 이미지 슬라이드 구조 내에서 키보드 촛점 이동 방식

메인 비주얼 슬라이드는 복잡한 구조와 많은 양의 컨텐츠를 담고 있습니다. 접근성을 높이기 위하여 초점이 진입한 순간부터 무한 롤링기능이 멈추게 됩니다. 메인 비주얼 슬라이드의 우측에는 왼쪽에서부터 차례대로, 좌측 화살표 모양, 일시정지, 우측 화살표 모양의 컨트롤 버튼이 나열되어 있습니다.

1. GNB 메뉴의 마지막 요소인 트렌드 링크에서 TAB 키를 누르면, 메인 비주얼 슬라이드 영역의 탐색이 시작됩니다.
2. 제일 첫 번째로는 좌측 방향 컨트롤 버튼 초점을 받습니다.
3. TAB 키를 이용하여 다음 요소로의 진행이, SHIFT + TAB 키를 이용하여 이전 요소로의 역진행이 가능합니다.
4. 좌측 화살표 버튼에 촛점이 간 상태에서, ENTER 키를 누르면 이전 슬라이드로 한 장 이동됩니다.
5. 우측 화살표 버튼에 촛점이 간 상태에서, ENTER 키를 누르면 다음 슬라이드로 한 장 이동됩니다.
6. 일시정지 버튼에 촛점이 간 상태에서, ENTER 키를 누르면 슬라이드의 자동 롤링이 멈추게 됩니다. 다시 한 번 반복해서 ENTER 키를 누르면 자동 롤링이 실행됩니다.

하단 인디케이터 배너 슬라이더 영역내에서 키보드 촛점 이동 방식

하단의 배너 슬라이드 구조는 이미지 영역가로 길이 만큼의 슬라이드 화면과 좌, 우 양옆의 방향 컨트롤 버튼으로 이루어져있습니다. 하나의 슬라이드 화면에 5개의 배너가 한 세트로 노출되며, 5개가 넘어가는 배너는 컨트롤 버튼을 이용하여 넘겨 볼 수 있습니다.

1. 상단 이미지 슬라이드의 마지막 요소인 우측 화살표 버튼에서 TAB 키를 누르면, 하단 인디케이터 배너 슬라이더 영역의 탐색이 시작됩니다.
2. 제일 첫 번째로는 좌측 방향 컨트롤 버튼 초점을 받습니다. ENTER 키를 누르면 이전 슬라이드로 넘어가며, TAB 키를 누르면 우측 방향 컨트롤 버튼으로 초점이 이동합니다.
3. 우측 방향 컨트롤 키에 초점이 머문 상태에서 ENTER 키를 누르면 다음 슬라이드로 넘어가며, TAB 키를 누르면 배너 리스트 요소로 초점이 이동합니다.
4. 현재 보여지는 컨텐츠와 무관하게 항상 인디케이터 배너의 첫번째 요소부터 초점을 받습니다.
5. 인디케이터 배너 리스트에서는 TAB 키를 이용하여 다음 배너 요소로의 진행이, SHIFT + TAB 키를 이용하여 이전 배너 요소로의 역진행이 가능합니다.
6. 인디게이터 배너와 상단 슬라이드의 이미지 링크는 1:1 매칭이 되어있습니다. 인디게이터 배너에 초점이 있는 상태로 ENTER 키를 누르면 매칭되는 이미지가 화면에 나타납니다.
7. 마지막 배너 요소에서 TAB 키를 누르면 TODAY 영역의 첫번째 탭 요소로 초점이 이동됩니다.
8. 사용자의 편의를 돕기 위하여 키보드 상의 좌, 우 화살표 키를 누르면 슬라이딩 기능이 작동되도록 제작하였습니다. 우측 화살표 키를 눌러 마지막 배너 요소까지 빠르게 도달할 수 있으며, 원치않는 정보를 스킵하고 다음 영역으로 편리하게 진입 할 수 있습니다.
9. 키보드 상의 좌, 우 화살표 키를 이용한 슬라이딩 기능이 작동될 경우, 초점은 항상 화면에 나타나는 5개의 배너 중 첫 번째 배너에 들어갑니다.