Carousel 과 wai-aria

Carousel을 마크업할 때는 무엇보다 접근성에 더 신경써서 작성을 하는 것이 중요합니다.

스크린리더를 사용하는 보조기기 사용자의 경우 이미지가 바뀌었는지, 현재보여지는 이미지가 무엇인지?, 이미지안에 있는 내용은 어디인지를 명확하게 이해하기가 어려울 수 있습니다.

W3-Wai-aria에서 Carousel디자인 패턴에서 어떤 기능들이 필요하며, 키보드 인터랙선은 어떻게 제공해야하는지 그리고 wai-aria 관련한 상태, 속성, 적용방법들을 확인할 수 있으며 실제 예시를 살펴볼 수도 있습니다.(HTML Source Code도 제공됩니다.)

<div class="carousel" role="region" aria-roledescription="carousel" aria-label="생활용품 슬라이드 배너">

• role ="region"
  • 문서의 영역을 탐색하는데 도움을 줍니다.
• aria-roledescription="carousel"
  • 보조기기가 탐색가능한 영역으로 인식을 하는 것은 물론, 보조기기가 현재 탐색하는 영역이 carousel라는 정보를 전달 받을 수 있습니다.
• aria-label="생활용품 슬라이드 배너"
  • 캐러셀이 여러개인 경우 현재 영역의 정확한 정보를 보조기기가 전달 받을 수 있습니다.

인디게이터 영역

  <!-- 캐러셀 목록의 id와 인디케이터의 aria-controls 속성의 값은 고유한 이름을 가질 수 있도록 유형에 맞춰 수정이 필요함. -->
  <div class="carousel__controles">
    <button type="button" class="carousel__indicator is--active" aria-label="2개의 배너 중 1번 배너 보기" aria-controls="housewareSlideBanner"></button>
    <button type="button" class="carousel__indicator" aria-label="2개의 배너 중 2번 배너 보기" aria-controls="housewareSlideBanner"></button>
  </div>
  <!-- 연결하고자 하는 리스트 -->
  <div class="carousel__list" id="housewareSlideBanner" aira-live="off" ></div>

• button태그를 사용하는 경우 type="button"을 반드시 명시해야합니다.( 명시하지 않은 경우 submit으로 이해)
• aria-label="2개의 배너 중 2번 배너 보기"
  • 해당 버튼이 가지고 있는 기능을 명확하게 알립니다.
• controls="housewareSlideBanner"
  • 컨트롤하고자하는 영역의 id값과 동일하게 맞춰줍니다.
• aira-live="off"
  • 동상에 변화가 생겼을 떄 변화를 읽어줄지 않을지를 설정
  • 캐러셀의 이미지가 바뀔 때마다 스크린리더가 읽어주게 된다면, 다른 컨텐츠 탐색에 방해를 받을 수 있기에 off로 설정을 해줍니다.

완성예시

      <div class="categoryUnit__group">
        <!-- 캐러셀 UI -->
        <div class="carousel" role="region" aria-roledescription="carousel" aria-label="생활용품 슬라이드 배너">
          <!-- 캐러셀 목록의 id와 인디케이터의 aria-controls 속성의 값은 고유한 이름을 가질 수 있도록 유형에 맞춰 수정이 필요함. -->
          <div class="carousel__controles">
            <button type="button" class="carousel__indicator is--active" aria-label="2개의 배너 중 1번 배너 보기" aria-controls="housewareSlideBanner"></button>
            <button type="button" class="carousel__indicator" aria-label="2개의 배너 중 2번 배너 보기" aria-controls="housewareSlideBanner"></button>
          </div>
          <div class="carousel__list" id="housewareSlideBanner" aira-live="off" >
            <div class="carousel__item is--active" role="group" aria-roledescription="slide" aria-label="2개의 배너 중 1번째">
              <a href="/" class="carousel__link">
                <figure class="carousel__slide">
                  <img src="./assets/slides/houseware-downy.jpg" alt="" class="carousel__image">
                  <figcaption class="carousel__caption">
                    <strong class="carousel__caption--large">최초의 99.9% 향균</strong>
                    <span class="carousel__caption--small">세균 냄새 걱정 없이 상쾌하게!</span>
                  </figcaption>
                </figure>
              </a>
            </div>
            <div class="carousel__item" role="group" aria-roledescription="slide" aria-label="2개의 배너 중 2번째">
              <a href="/" class="carousel__link">
                <figure class="carousel__slide">
                  <img src="./assets/slides/houseware-dandruff.jpg" alt="" class="carousel__image">
                  <figcaption class="carousel__caption">
                    <strong class="carousel__caption--large">비듬완화 임상완료</strong>
                    <span class="carousel__caption--small">닥터방기원 댄드러프</span>
                  </figcaption>
                </figure>
              </a>
            </div>
          </div>
        </div>
      </div>