Carousel

[hsskey]

📋 컴포넌트 정보

• 컴포넌트 이름: Carousel
• 컴포넌트 설명: 캐러셀은 콘텐츠를 순환하며 표시하는 컴포넌트로, 사용자가 이전/다음 항목으로 이동하거나 특정 항목을 선택할 수 있음
• 사용 사례: 제품 이미지, 프로모션 배너, 추천 상품 등을 순환하며 표시할 때 사용

📚 참조 및 레퍼런스

• ARIA Authoring Practices: W3C ARIA Carousel Pattern
  • 자동 회전 정지, 이전/다음 컨트롤, 슬라이드 선택 등의 접근성 고려사항 제시
• 기타 레퍼런스: Ant Design 캐러셀 컴포넌트 분석

📝 접근성 및 ARIA 적용 여부

• ARIA Pattern 적용: ARIA Carousel Pattern
  • 사용된 ARIA 속성: aria-roledescription="carousel", aria-label, aria-live="off"(자동 회전 시) 또는 aria-live="polite"(자동 회전 중지 시), aria-controls, aria-selected 등이 사용됨.
• 접근성 관련 고려사항:
  • 키보드 초점이 carousel 내부에 진입하면 자동 회전 정지
  • 이전/다음 컨트롤은 키보드로 조작 가능해야 함
  • 자동 회전 시에는 aria-live="off"를 사용하여 불필요한 업데이트 알림 방지
  • 자동 회전이 중지된 상태에서는 aria-live="polite"를 사용하여 슬라이드 변경 사항 알림
  • 슬라이드 변경 시 초점을 유지하여 스크린 리더 사용자가 컨텍스트를 잃지 않도록 함
• 접근성 기능 요약:
  • 자동 회전 제어, 이전/다음 및 특정 슬라이드로 이동, 현재 슬라이드 상태 정보 제공 등의 기능을 통해 접근성 향상

🏗️ 마크업 구조 분석

• HTML 시맨틱 태그 사용:
  • W3C Example:
    • <section> 태그로 carousel 컴포넌트 영역 표시
    • <div> 태그와 ARIA 역할(role)을 사용하여 슬라이드 목록과 컨트롤 영역 구분
  • Ant Design Example:
    • <div> 태그를 사용하여 전체 carousel 컴포넌트 구성
    • 'slick' 클래스를 사용하여 슬라이드 트랙, 컨트롤러 등 구분
• 마크업 구조 비교:
  • W3C Example:

<section id="myCarousel" class="carousel" aria-roledescription="carousel" aria-label="Highlighted television shows">
  <div class="carousel-inner">
    <div class="controls">
      <button class="rotation pause">...</button>
      <button class="previous" aria-controls="myCarousel-items">...</button>
      <button class="next" aria-controls="myCarousel-items">...</button>
    </div>
    <div id="myCarousel-items" class="carousel-items" aria-live="off">
      <div class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 6">...</div>
      <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 6">...</div>
      ...
    </div>
  </div>
</section>

• Ant Design Example:

<div class="ant-carousel">
  <div class="slick-slider">
    <div class="slick-list">
      <div class="slick-track">
        <div class="slick-slide slick-active slick-current" aria-hidden="false">...</div>
        <div class="slick-slide" aria-hidden="true">...</div>
        ...
      </div>
    </div>
    <ul class="slick-dots slick-dots-bottom">
      <li class="slick-active"><button>1</button></li>
      <li><button>2</button></li>
      ...
    </ul>
  </div>
</div>

• Web Dev Example:

<div class="gui-carousel" carousel-pagination="dots" carousel-controls="auto" carousel-scrollbar="auto"
  carousel-snapstop="auto" aria-label="Featured Items Carousel">
  <div class="gui-carousel--scroller">
    <div class="gui-carousel--snap">
      <figure class="animate-visibility captioned-image">
        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/this/1280/720.webp"
          alt="Blue ocean with a large wave">
        <figcaption>
          <a href="#">Learn more about large ocean waves</a>
        </figcaption>
      </figure>
    </div>
    ...
  </div>
</div>

• 구조적 선택 이유:
  • W3C는 <section>, <div>, role 속성 등을 활용하여 캐러셀과 슬라이드를 구조화하고 있음. ARIA 속성을 적극 활용하여 접근성을 높임
  • Ant Design은 캐러셀을 <div> 태그의 조합으로 구성하고, 'slick' 클래스를 사용하여 구분함. 슬라이드 리스트와 인디케이터를 별도로 마크업함
  • Web Dev는 <div>와 커스텀 속성을 사용하여 캐러셀을 구성함. <figure>와 <figcaption>을 사용하여 이미지와 캡션을 의미론적으로 마크업함

💡 UI 라이브러리 비교 분석

• Ant Design: 'slick' 클래스를 활용하여 구조를 구성함. 슬라이드는 <div>로, 인디케이터는 <ul><li>로 마크업. ARIA 속성 사용이 제한적임
• Web Dev: 커스텀 속성을 사용하여 캐러셀의 동작을 제어함. 이미지와 캡션에 시맨틱 태그를 사용하여 의미론적 마크업을 구현함

⚙️ 구현 및 설계 고려사항

• 주요 설계 고려사항:
  • 캐러셀 자동 재생 시 접근성을 위해 일시정지 컨트롤을 제공하고, 초점이 컴포넌트 내부에 있을 때 자동 재생을 멈춤
  • 이전/다음 컨트롤은 키보드로 조작할 수 있어야 하며, 슬라이드 목록 밖으로 초점이 이동하지 않도록 함
  • 인디케이터를 통해 총 슬라이드 수와 현재 보여지는 슬라이드 정보를 제공
• 코드 예시:

<section class="carousel" aria-roledescription="carousel">
  <h2 id="carousel-heading" class="carousel-heading">Featured Products</h2>
  <div class="carousel-controls">
    <button class="carousel-control prev" aria-controls="carousel-items">
      <span class="icon" aria-hidden="true">&#8249;</span>
      <span class="text">Previous</span>
    </button>
    <button class="carousel-control next" aria-controls="carousel-items">
      <span class="text">Next</span>
      <span class="icon" aria-hidden="true">&#8250;</span>
    </button>
  </div>
  <div class="carousel-inner">
    <ul id="carousel-items" class="carousel-items" aria-live="off">
      <li class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 3">...</li>
      <li class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 3">...</li>
      <li class="carousel-item" role="group" aria-roledescription="slide" aria-label="3 of 3">...</li>
    </ul>
  </div>
  <div class="carousel-indicators">
    <button aria-controls="carousel-items" aria-label="Slide 1" aria-selected="true">1</button>
    <button aria-controls="carousel-items" aria-label="Slide 2">2</button>
    <button aria-controls="carousel-items" aria-label="Slide 3">3</button>
  </div>
</section>

🔍 테스트 및 검토

• 접근성 테스트:
  • 스크린 리더 사용 시 슬라이드 콘텐츠 읽기, 현재 슬라이드 정보 제공, 이전/다음 컨트롤 조작 가능한지 확인
  • 키보드만으로 컴포넌트 내 이동 및 컨트롤 조작이 가능한지 테스트
• 브라우저 호환성 테스트: 주요 데스크탑/모바일 브라우저에서 레이아웃 및 기능 동작 여부 확인
• 사용자 피드백: 다양한 사용자를 대상으로 캐러셀 컴포넌트 사용성 테스트를 진행하고, 개선 사항을 수렴

📌 추가 참고 사항

• 관련 문서: Ant Design Carousel Component, Web Dev Carousel Example
• 의견 및 제안: 각 슬라이드에 헤딩을 추가하여 내용 파악을 돕는 방안 고려

🎯 역할, 속성, 상태 및 태그 속성

• Role, Attribute, State
  • Role: aria-roledescription="carousel", role="group", aria-roledescription="slide" 등 활용
  • Attribute: aria-label, aria-controls, aria-selected 등 활용하여 컴포넌트 역할 및 상호작용 설명
  • State: aria-live="off"(자동 회전 시)와 aria-live="polite"(자동 회전 중지 시)를 사용하여 현재 상태에 따른 알림 제어
• JavaScript 및 CSS 사용 여부
  • JavaScript 사용 여부: 슬라이드 전환, 자동 재생, 인디케이터 동기화 등을 처리하기 위해 JavaScript 활용
  • CSS 적용 사항: overflow: hidden을 사용하여 보이는 영역 외 슬라이드 감춤 처리. transform과 transition을 사용하여 슬라이드 전환 애니메이션 구현