Skip to content

Latest commit

 

History

History
115 lines (77 loc) · 5.38 KB

Carousel.md

File metadata and controls

115 lines (77 loc) · 5.38 KB

Carousel

캐러셀은 하나 이상의 슬라이드 하위 집합을 순차적으로 표시하여 항목 세트를 나타다

일반적으로, 한 번에 하나의 슬라이드가 표시되며, 사용자는 현재 슬라이드를 숨기고 다음 또는 이전 슬라이드를 순환시키는 컨트롤을 활성화 할 수 있다

일부 구현에서, 페이지가 로드 될 때 슬라이드가 자동으로 시작되고, 모든 슬라이드가 표시되면 자동으로 중지 될 수도 있다

슬라이드는 모든 유형의 콘텐트를 포함할 수 있지만, 각 슬라이드가 단일 이미지 외에는 포함하지 않는 이미지 캐러셀이 일반적이다

모든 사용자가 쉽게 제어할 수 있고 슬라이드로 인한 악영향을 받지 않도록 하는 것은 캐러셀을 접근 가능하게 만드는데 중요하다

캐러셀 접근성 가이드

  • 캐러셀 항목 간 탐색을 포함한 모든 기능은 키보드 로 작동할 수 있어야 한다

    • 스크린 리더를 사용하는 사람들은 현재 표시된 항목 간 탐색 방법을 이해할 수 있어야 한다
    • 보드 탐색 및 음성 입력 소프트웨어를 사용하는 사용자는 개별 항목 사이를 탐색할 수 있어야 한다

  • 키보드의 위치나 포커스가 합리적이고 이해하기 쉬운 방식으로 관리되어야 한다

  • 항목 사이에 전환 애니메이션을 추가하고, 사용자가 애니메이션을 중지 및 재시작을 할 수 있어야 한다

    • 슬라이드가 너무 빠르면 텍스트를 읽기 어려울 수 있으므로 유저가 슬라이드를 일시 중지할 수 있어야 한다
      • 움직임에 주의가 산만해진 사람 (distracted by movement)
      • 읽는 데 더 많은 시간이 필요한 사람
    • 5초 이상 지속되며, 다른 콘텐츠와 병행하여 표시되는 정보는 사용자가 일시 중지, 중지 또는 숨길 수 있는 메커니즘이 있어야 한다

  • 캐러셀 항목 변경은 스크린 리더 사용자를 포함한 모든 사용자에게 알려야 한다

    • 자동 업데이트는 사용자가 일시 중지, 중지 또는 숨길 수 있는 메커니즘이 있어야 한다
      • 업데이트가 필수가 아니라면 하지 않아야 한다
      • 자동업데이트인 경우에는 중지와고 재시작 버튼을 가져야 한다 (이는 키보드 초점이나 마우스를 이동하지 않는 모드에서 보조 기술 중요하다) - 키보드 초점이 케러셀로 들어가는 경우 슬라이드를 멈춘다 - 마우스가 캐러셀 위에 있을 때 마다 슬라이드를 멈춥니다

  • 모든 사람이 사용하고 읽을 수 있는 스타일을 지정해야 한다

캐러셀은 콘텐츠를 찾기 어려워서 사용성 관점에서 어느정도 논란이 있다 때문에 접근성을 보장하면 사용성이 향상 된다는 것을 의미 하기도 한다

Attribute

  1. aria-label 을 통해 현 슬라이드 애니메이션 순환 상태를 표기하고 컨트롤 할 수 있어야 한다
<button type="button" aria-label="Start automatic slide show">
	{...}
</button>

자동 순환이 일시 정지 된 경우, 레이블이 "자동 슬라이드 쇼 시작",
캐러셀이 자동으로 순환 중인 경우, 레이블이 "자동 슬라이드 쇼 중지"로 변경되게 해야 한다
  1. aria-roledescription="carousel"
<section aria-roledescription="carousel" aria-label="컨텐츠 설명">
	{...}
</section>

영역을 시멘틱하게 표현하기 위해 <section>을 사용하며,
aria-roledescription="carousel"를 통해 보조 기술이 section보다는 캐러셀로 인식하게 만든다
  1. aria-live
// 자동으로 변화가 이루어지는 컨테이너
<div aria-live="off">
	{...}
</div>

aria-live 속성을 사용하면, 사용자가 실시간으로 업데이트되는 콘텐츠(채팅, 알림, 검색 결과 등)를 쉽게 감지하고 인식할 수 있다 이는 장애를 가진 사용자들이 웹 사이트를 더 쉽게 이용할 수 있도록 돕는 역할을 한다

aria-live의 값은 off, polite, assertive 중 하나이다

  • off: 업데이트되는 내용을 알리지 않는다
  • polite: 업데이트되는 내용이 있을 때, 사용자가 현재 집중하고 있는 작업이 중단되지 않도록 조용하게 알린다
  • assertive: 업데이트되는 내용이 있을 때, 즉시 사용자의 주의를 끌고 우선순위가 높은 메시지임을 알린다
  1. aria-selected
<button {...} aria-selected="true">
	{...}
</button>

true: 탭 컨트롤이 활성화 되고 연관 패널이 노출 됨을 나타낸다 (탭이 포커스 될 때 설정)
false: true의 반대
  1. aria-controls
`aria-controls` 속성은 HTML 요소에 추가되며, 연결된 ID 값을 가지는 요소의 컨트롤을 관리한다

<button {...} aria-controls="carousel-item-1">
	{...}
</button>
  1. details
  • aria-roledescription="slide" 를 통해 div 엘리먼트가 "tabpanel"보다는 "slide"로 식별되도록 보조 기술에 알릴 수 있다
  • aria-label="X of Y"를 통해 길이의 몇 번째인지를 보조 기술에 알릴 수 있다

간단 요약

모든 사용자가

  • 키보드로 제어할 수 있어야 한다
  • 변화에 대해 인지하고 제어할 수 있어야 한다 (일시정지 및 index에 관하여)
  • aria-roledescription, aria-live, aria-selected, aria-controls