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

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

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

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

  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개의 배너 중 첫 번째 배너에 들어갑니다.

전문관

롯데마트만의 특별한 상품 제안

롯데마트몰 전문관

오늘 HOT 콕

매일 오전 9시! 단 하루 특가 상품

호주산 곡물비육 소고기 인기부위

판매가 2,000원~

최저가 1,600원~

522개 판매

맛있는 제철과일 딸기!

판매가 7,900

497개 판매

추운 날씨 달래주는
화끈한 농심 라면!

판매가 2,980

395개 판매

자동차 제설용품
(워셔액,제설기,체인)

판매가 1,900원~

최저가 1,520원~

298개 판매

코디 내추럴소프트 3겹 화장지<br>(27M*30롤*3입) 4,700 원 할인 카드 할인 매장택배 위시리스트 새창 보기 장바구니 담기

코디 내추럴소프트 3겹 화장지
(27M*30롤*3입)

판매가 24,900

최저가 18,900

10개 판매

[룸바이홈 키친]
뮤즈 테이블웨어 시리즈

판매가 3,900원~

최저가 3,710원~

2개 판매

맛이 일품!
오징어/새우

판매가 240원~

최저가 190원~

644개 판매

신선한 채소
콩나물/애호박/두부

판매가 1,000원~

최저가 790원~

322개 판매

맛있는 과일
딸기/사과/감귤

판매가 1,900원~

최저가 1,550원~

94개 판매

피치 극세사 양면이불 (S/Q)

판매가 18,130

679개 판매

하나사면 하나 더 주는 과자

판매가 2,380원~

최저가 2,150원~

331개 판매

[CJ직배송] 비비고 한섬만두 384g X4개

판매가 11,900

16개 판매

제주 삼다돈 삼겹살/목심

판매가 850원~

최저가 680원~

360개 판매

친환경 농산물!
호박고구마/감귤

판매가 1,480

166개 판매

CJ 고메 그릴 피자
크리스피 핫도그

판매가 5,980

113개 판매

비타민 가득
한라봉/석류/사과

판매가 3,900

94개 판매

프릴 주방세제 리필 (1L)

판매가 6,500원~

최저가 3,250원~

93개 판매

폴 바셋 프리미엄 원두/드립백

판매가 5,490

5개 판매

홀로그램 6공 다이어리

판매가 4,500원~

최저가 4,050원~

2개 판매

TE 크리스마스 시리즈 전단 할인행사

판매가 10,000원~

최저가 9,000원~

0개 판매

오늘핫콕 더보기
잠깐! 매번 구매하는 상품이 있으신가요? 정기배송 신청하고 5% 추가 할인 혜택도 받아보세요!

HOT PICK! 기획전 배너

픽업 선택 완료

잠실점 매장 픽업 으로
픽업쇼핑을 시작합니다.