상품 카테고리 드롭다운 요소를 키보드로 탐색하는 방법
상품 카테고리 드롭다운 요소의 구조 및 이동법
롯데마트의 상품 카테고리는 최대 3단계까지의 하위 분류 메뉴를 가지고 있습니다.
모든 상품 리스트 화면의 상단에는 상품 카테고리 드롭다운 요소가 존재합니다.
이 드롭다운 요소를 통해 현재 보고있는 페이지가 어떤 카테고리에 속해있는지를 알 수 있으며,
해당 페이지와 연관이 있는 1단계, 2단계, 3단계에 메뉴들을 한눈에 확인하고 곧바로 이동 할 수도 있습니다.
이를 유용하게 이용하면 GNB 전체 메뉴를 전부다 탐색하지 않아도 자유롭게 상위 메뉴, 혹은 하위메뉴로 이동이 가능합니다.
이 드롭다운 요소는 페이지별로 카테고리가 존재하는 수 많큼 존재하게 됩니다.
예를 상품이 3계층까지 분류되어있다면 드롭다운 요소는 가로로 총 3개까지 표시되고,
그 이하라면 존재하는 분류만큼의 내용만이 표시 될 것 입니다.
요소의 첫 상태값은 언제나 지금 로딩된 페이지가 속해있는 카테고리의 이름입니다.
- 홈 화면 링크에 초점이 머문 상태에서 TAB 키를 누르면 1차 메뉴 드롭다운 버튼으로 초점이 이동됩니다.
- 드롭다운 버튼의 내용은 현재 보고있는 상품들이 속해있는 카테고리 이름입니다.
- 해당영역에서 ENTER 키를 누르면 1차 메뉴들의 리스트가 열립니다. 반복해서 ENTER 키를 누르면 리스트는 다시 닫힙니다.
- 리스트가 열린 상태에서 TAB키를 누르면 리스트의 첫 번째 요소로 초점이 이동되며 지속적으로 탐색이 가능합니다.
- 리스트의 탐색을 원치 않으면 ESC 키를 누르면 리스트가 곧바로 닫히며 다시 드롭다운 버튼으로 초점이 이동됩니다.
- 리스트가 닫힌 상태에서 TAB키를 누르면 현재 영역을 벗어나 다음 요소로 초점이 이동됩니다.
- 현 카테고리 하위에 2차 메뉴와 3차 메뉴가 존재할 시에는 2차 메뉴 드롭다운 버튼으로 초점이 이동됩니다.
- 드롭다운 요소에서의 탐색법은 위에 서술한 바와 같습니다.
상품 카테고리 드롭다운 요소를 키보드로 탐색하는 방법
상품 카테고리 드롭다운 요소의 구조 및 이동법
롯데마트의 상품 카테고리는 최대 3단계까지의 하위 분류 메뉴를 가지고 있습니다.
모든 상품 리스트 화면의 상단에는 상품 카테고리 드롭다운 요소가 존재합니다.
이 드롭다운 요소를 통해 현재 보고있는 페이지가 어떤 카테고리에 속해있는지를 알 수 있으며,
해당 페이지와 연관이 있는 1단계, 2단계, 3단계에 메뉴들을 한눈에 확인하고 곧바로 이동 할 수도 있습니다.
이를 유용하게 이용하면 GNB 전체 메뉴를 전부다 탐색하지 않아도 자유롭게 상위 메뉴, 혹은 하위메뉴로 이동이 가능합니다.
이 드롭다운 요소는 페이지별로 카테고리가 존재하는 수 많큼 존재하게 됩니다.
예를 상품이 3계층까지 분류되어있다면 드롭다운 요소는 가로로 총 3개까지 표시되고,
그 이하라면 존재하는 분류만큼의 내용만이 표시 될 것 입니다.
요소의 첫 상태값은 언제나 지금 로딩된 페이지가 속해있는 카테고리의 이름입니다.
- 홈 화면 링크에 초점이 머문 상태에서 TAB 키를 누르면 1차 메뉴 드롭다운 버튼으로 초점이 이동됩니다.
- 드롭다운 버튼의 내용은 현재 보고있는 상품들이 속해있는 카테고리 이름입니다.
- 해당영역에서 ENTER 키를 누르면 1차 메뉴들의 리스트가 열립니다. 반복해서 ENTER 키를 누르면 리스트는 다시 닫힙니다.
- 리스트가 열린 상태에서 TAB키를 누르면 리스트의 첫 번째 요소로 초점이 이동되며 지속적으로 탐색이 가능합니다.
- 리스트의 탐색을 원치 않으면 ESC 키를 누르면 리스트가 곧바로 닫히며 다시 드롭다운 버튼으로 초점이 이동됩니다.
- 리스트가 닫힌 상태에서 TAB키를 누르면 현재 영역을 벗어나 다음 요소로 초점이 이동됩니다.
- 현 카테고리 하위에 2차 메뉴와 3차 메뉴가 존재할 시에는 2차 메뉴 드롭다운 버튼으로 초점이 이동됩니다.
- 드롭다운 요소에서의 탐색법은 위에 서술한 바와 같습니다.
