배너·캐러셀(Carousel)

국내에서는 슬라이드 배너, 배너라는 명칭으로 통하며, 해외에서는 캐러셀(회전목마) 라는 명칭으로 불리는 영역으로 여러 개의 아이템 중에 하나의 아이템을 슬라이드 쇼 처럼 표시하는 형태가 대중적이다.

해외에서는 이 영역이 마치 회전목마처럼 이미지가 돌아가며 나타나기에 캐러셀이라는 명칭으로 부른다.

캐러셀의 올바른 제공 방법

캐러셀을 구현 할 때는 다음과 같은 사항을 고려해야 한다

  1. 자동 슬라이드 쇼가 기본값으로 켜져있는 영역이라면 영역에 초점이 갔을 때 재생중이던 슬라이드가 멈춰야한다.
  2. 자동 슬라이드 쇼가 기본값으로 켜져있는 영역이라면 캐러셀 아이템이 시작되기 전에 재생 또는 정지 버튼이 제공되어야 한다. 가급적이면 1번 항목과 2번 항목을 같이 제공하는 것이 좋다. 마우스 사용자나 터치 디바이스 사용자는 키보드 초점을 보낼 수 없기 때문에 손가락이나 마우스 포인터 등으로 버튼을 눌러 슬라이드를 멈출 수 있어야 한다.
  3. 현재 표시중인 배너의 인디케이터에는 aria-current 속성을 사용하여 현재 표시중인 배너의 인디케이터임을 시각효과와 함꼐 명시애햐 한다.
  4. 인디케이터나 이전, 다음 아이템 버튼을 눌렀을 때 사용자가 배너의 내용을 들을 수 있도록 aria-live를 사용하여 화면의 변화를 알려야 한다.
  5. 현재 화면에 보이는 캐러셀 아이템 외의 숨겨진 아이템에 키보드 초점 및 접근성 초점이 제공되어서는 안 된다. aria-hidden="true'와 tabindex="-1"를 통해 현재 눈에 보이는 이미지 아이템 외의 모든 아이템을 숨겨야 한다.
  6. 사용자 요청에 의한 캐러셀 전환이 아니라면 aria-live로 스크린리더에 알림을 주어서는 안 된다.

Example

접근성이 고려된 캐러셀: 인디케이터, 재생, 이전 다음 버튼 제공

접근성이 고려된 캐러셀: 재생 버튼만을 제공

접근성이 고려되지 않은 최악의 캐러셀 1

재생 버튼에 초점이 우선적으로 초점이 가지 않으며, 초점을 통한 정지가 이루어지지 않으며, 자동으로 넘겨진 슬라이드에 대해 지속적으로 불필요한 알림을 제공하고 있습니다. 또한, 현재 보이지 않는 아이템에도 초점이 이동되어 보기도 좋지 않고, 불필요한 탐색이 발생하는 것을 볼 수 있습니다.

접근성이 고려되지 않은 최악의 캐러셀 2

자동 슬라이드를 멈출 방법이 아예 존재하지 않게끔 설계된 인터페이스입니다. 역시나 위 예제처럼 알림 문제와 숨겨진 슬라라이드에 대한 탐색 문제도 있습니다.

온전히 배너의 이미지에만 시선을 집중시키고 싶다면, 키보드 사용자가 초점을 보냈을 때, 마우스 사용자가 마우스 포인터를 올렸을 때, 버튼을 표시하는 방법이 있으나, PC가 아닌 모바일 환경이라면, 두 조작방법을 사용하지 않고, 터치를 주로 사용하기 때문에 문제가 있으므로 재생 버튼을 처음부터 노출시키는 것이 좋습니다.