슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제

예제 옵션

캐러셀 뷰(view)와 동작 옵션

이미지 외부에 컨트롤과 캡션 표시

이 옵션은 이미지 내에 컨트롤과 캡션을 렌더링 하는 것보다 컨트롤을 인식하기 쉽고 캡션이 뒤에 있는 순환하는 이미지 없이도 읽기 쉽기 때문에 더 쉽게 접근할 수 있습니다.

로드 시 자동 순환 일시 중지 (새로고침 필요)

이 옵션은 캐러셀이 페이지 로드 시에 일시 중지 또는 재생 여부를 제어합니다. 일시 중지 옵션은 시각 장애가 있는 사용자와 자동 순환으로 이해 산만해지거나 혼란스러워지는 사람들에 대해 접근성을 향상시키지만, 사용자가 시작/중지 버튼을 사용하여 자동 순환을 시작할 수 있도록 합니다.

주의: 사용자가 시스템 설정에서 움직임 감소를 선택한 경우, 자동 순환은 로드 시 항상 일시 정지 됩니다.

자동 순환 비활성화

이 옵션은 시각 장애가 있는 사용자와 자동 순환 기능을 비활성화 시키고 유저 인터페이스에서 시작/중지 버튼을 제거하여 자동 순환으로 인해 산만해지거나 혼란스러워지는 사람들에 대한 접근성을 향상시킵니다. 사용자는 슬라이드를 수동으로 탐색하기 위해 이전/다음 버튼을 사용할 수 있습니다.

접근성 특성

자동 슬라이드 순환 제어

사용자는 슬라이드 순환을 중지하고 시작할 수 있으며, 이는 장애를 가진 다양한 사람들에게 캐러셀 접근성의 필수 요소입니다. 시각 처리나 읽는 것에 영향을 미치는 저시력 또는 인지 장애를 가진 사람은 슬라우드 순환을 제어할 수 있도록 하는 것이 슬라이드 콘텐츠를 탐색할 충분한 시간을 가질 수 있으므로 이점이 있습니다. 마찬가지로, 스크린리더 사용자는 자동 순환을 인식할 수 없기 때문에, 페이지를 읽는 것을 혼란스럽고 방향을 잃게 만들 수 있습니다. 예를 들어, 슬라이드가 자동으로 순환 하는 경우, 스크린리더 사용자가 슬라이드 1의 엘리먼트를 읽고, 다음 엘리먼트를 읽기 위한 스크린리더 명령을 실행하면, 슬라이드 1에 있는 다음 엘리먼트를 듣는 대신, 방금 낭독 된 엘리먼트가 완전히 새로운 컨텍스트의 것이라는 것을 알지 못한 채 슬라이드 2의 엘리먼트를 들을 수도 있습니다.

이 예제는 사용자가 슬라이드 순환을 제어할 수 있는 다음 기능들을 포함합니다:

• 운영체제 설정에 동작 감소 또는 애니메이션 비활성에 대한 설정이 된 경우, 자동 순환은 초기에 일시 중지됩니다..
• 캐러셀 콘텐츠 위로 마우스를 가져가면 자동 순환이 일시 중지됩니다. 키보드 초점 같이 순환을 차단하는 조건들이 트리거 되지 않는 한 캐러셀로부터 마우스를 치우면 자동 순환이 재시작 됩니다.
• 탭 엘리먼트를 포함하여, 캐러셀 콘텐츠로 키보드 초점을 이동하는 것은 자동 순환을 일시 중지합니다. 사용자가 명시적으로 재생 버튼을 활성화 시킬 경우에만 자동 순환이 재개됩니다.
• 캐러셀은 또한 자동 순환을 중지/시작 할 수 있는 순환 제어 버튼을 포함합니다.
  • 순환 제어 버튼은 스크린리더 읽기 순서에서 첫 번째 엘리먼트입니다.
  • 순환 제어 버튼은 마우스, 키보드, 보조 기술, 터치를 통해 상호 작용하는 모든 사용자가 사용할 수 있으므로 항상 시각적으로 표시됩니다.
  • 캐러셀이 순환 중인 경우, 버튼의 접근 가능한 이름은 스크린리더 사용자에게 슬라이드가 변경 되고 있고 변경을 중지하는 방법을 제공하는 것을 알리는 "자동 슬라이드 쇼 중지"입니다.
  • 캐러셀이 순환 중이 아닌 경우, 버튼의 접근 가능한 이름은 "자동 슬라이드 쇼 시작"입니다.
  • 사용자가 순환을 시작하기 위해 순환 제어 버튼을 활성화 한다면 사용자가 자동 순환이 즉시 시작되는 것을 원한다고 가정되고 캐러셀 내의 초점 또는 호버 상태는 무시됩니다. 순환 제어 버튼이 다시 활성화 될 때에만 순환이 중지 될 것입니다.
• 예제는 자동 슬라이드 순환을 완전히 비활성화하는 옵션을 포함합니다. 이 옵션이 선택 된 경우, 시작/중지 버튼은 렌더링 되지 않고 슬라이드는 탭 컨트롤의 활성화를 통해서만 순환 될 수 있습니다.

텍스트와 순환 컨트롤의 색상 대비

이미지 내부에 컨트롤과 캡션이 표시되는 이 캐러셀의 뷰에서, 배경 이미지가 컨트롤과 텍스트에 대한 색상 대비를 불충분하게 만들 수 있습니다. 하지만, 이 뷰는 이 잠재적 문제를 방지하고 WCAG 2.1 색상 대비 요구사항을 만족시키기 위한 다음 기능을 포함합니다:

• 슬라이드의 렌더링을 조작하는 탭이 이미지 내부에 있는 경우, 탭은 WCAG 2.1 색상 대비 요구사항을 만족하는 전경색과 배경색을 가집니다. 게다가, 컨트롤이 키보드 초점을 얻을 때 초점 스타일은 초점 표시기가 높은 가시성을 가지도록 만드는 SVG 이미지를 사용합니다.
• 캡션 텍스트가 WCAG 2.1 색상 대비 요구사항을 만족시키도록 캡션 영역의 투명도가 감소합니다.

이미지 내부에 컨트롤과 텍스트가 표시되는 것으로 색상 대비 이슈가 발생하는 것을 방지하는 한 가지 방법은 그것들을 이미지 밖으로 배치하는 것입니다. 컨트롤과 텍스트를 단색 배경으로 옮기는 것은 작성자가 컨트롤 색상 대비를 제어하기 쉽게 하고 사용자에게 그것들을 인식하기 쉽게 합니다. 이 기술의 예는 뷰 옵션 중 하나입니다.

탭목록과 탭의 초점 스타일링

• 탭이 초점을 얻을 경우, 사용자에게 그룹 내 컨트롤 사이를 탐색하는데 방향키가 사용됨을 나타내는 어포던스로 전체 탭 목록 또한 테두리로 강조 됩니다.
• 운영체제 고대비 옵션이 활성화 된 경우 초점의 가시성을 지원하기 위해 컨트롤이 초점을 얻을 때 초점 스타일링에 사용 되는 CSS 테두리 너비는 0에서 2 픽셀로 변경됩니다.

슬라이드 변경에 대한 스크린리더 낭독

자동 순환이 꺼져 있다면, 캐러셀 슬라이드 콘텐트는 라이브 영역(live region)에 포함됩니다. 이것은 스크린리더 사용자가 캐러셀 슬라이드를 훑어보기 쉽게 만듭니다. 스크린리더 사용자가 새로운 탭을 활성화 하는 경우, 사용자에게 콘텐트와 상호 작용을 할지 여부를 결정하는 데 도움이 되는 피드백을 즉각 제공하도록 새 슬라이드 콘텐트가 낭독됩니다. 매우 중요한 것은, 자동 순환이 켜진다면, 라이브 영역은 비활성 됩니다. 그렇지 않은 경우, 지속적으로 변경되는 콘텐트의 알림이 사용자가 읽고 있는 다른 것을 끊임없이 방해하기 때문에 페이지는 사용할 수 없게 됩니다.

탭 패널을 실시간으로 만드는 것은 일반적인 탭에 권장되지 않음에 주의하세요. 주 목적이 빠르고 가벼운 콘텐츠 훑어보기 인 캐러셀 사용 예에서, 라이브 영역(live region)은 스크린리더 비사용자가 자동 순환에 대해 가지는 경험의 유형을 시뮬레이션 하는데 사용됩니다.

키보드 지원

Role, Property, State, Tabindex 어트리뷰트

Javascript와 CSS 소스 코드

• CSS: carousel-tablist.css
• Javascript: carousel-tablist.js

HTML 소스 코드