css) carousel 캐러셀/스라이드쇼/이미지로케이터. 스크린리더 사용자를 위한 접근성. carousel wai-aria. 이미지카드-figure, figcaption

캐러셀, 슬라이드쇼, 이미지로케이터 모두 이미지가 회전하는 패턴을 의미하는 표현이다.

캐러셀은 이미지 > 이미지 캡션 > 인디케이터 영역으로 구분된다. 

• wai-aria의 
  • role="region" => 탐색 가능함.
    •  role="region"은 배너,컨턴트인포같은 랜드마크 역할에는 적절하지 않지만 
    • 해당 영역을 탐색할때 도움을 받을 수 있는 일반적인 랜드마트 역할이다.
    • region은 문서의 영역을 식별하는데 도움을 준다.
  • aria-roledescription="carousel" => role에 대한 상세한 설명.
    • 보조기기가 region을 탐색가능한 영역으로 인식하고 carousel이라고 정확한 정보를 전달받게 됨.
    • carousel이 여러개일 경우 aria-label="생활용품 슬라이드 배너" 처럼 aria-label속성을 이용해서 상세히 설명해야함.
  • aria-controls="slideBanner" / id="slideBanner" => aria-controls 속성은 slideBanner라는 id를 가지고 있는 태그영역을 컨트롤함. 
    • id와 aria-controls 속성의 값은 고유한 이름을 가져야함 중복되면 안됨. 여기서는 사진2장이라 중복됨.
  • aria-lives="off"  => 동작의 변화가 생겼을때 변화를 바로 읽어줄지 아닐지 결정하는 속성.
    • 계속 읽으면 다른 컨텐츠 탐색에 방해가됨.

 

      <article class="categoryUnit houseware">

        <div class="categoryUnit__group">

          

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

            <div class="carousel__controls">

              <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" aria-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의 alt에 이미지설명을 쓰는 대신 figcaption에 큰글자strong 작은글자span 태그로 설명을 적음. -->

                    <img src="./assets/slides/houseware-downy.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 class="carousel__item" role="group" aria-roledescription="slide" aria-label="2개의 배너 중 2번째">

                <a href="/" class="carousel__link">

                  <figure class="carousel__slide">

                    <!-- img의 alt에 이미지설명을 쓰는 대신 figcaption에 큰글자strong 작은글자span 태그로 설명을 적음. -->

                    <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>

      </article>

 

 

 

내가 작성한 코드

캐러셀은 wrap > article > ul.carousel 

구조로 되어있다.

[ article css ]

 

  .wrap {

    width: 102rem;

    height: 148rem;

    margin: 10rem 13rem 42rem;

  }

 

 

[ html ]

 

  <!-- 캐러셀 -->

      <!-- aria-live="off 동작의 변화가 생겼을때 정보를 바로 읽을지 말지 정하는 속성 -->

      <!-- 캐러셀 목록의 id와 인디케이터의 aria-controls 속성의 값은 고유한 이름을 가져야함. -->

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

        <li id="carousel_1" class="carousel_item is--active" id="housewareSlideBanner" aria-live="off" role="group"

          aria-roledescription="slide" aria-label="2개의 배너 중 1번">

          <a href="/" class="carousel_list_link">

            <figure class="carousel_slide">

              <img class="carousel_img" src="./assets/slides/houseware-downy.jpg" alt="" />

              <figcaption class="carousel-text-box">

                <strong class="carousel_title">최초의 99.9% 항균</strong>

                <span class="carousel_content">세균 냄새 걱정 없이 상쾌하게!</span>

              </figcaption>

            </figure>

          </a>

        </li>

        <li id="carousel_2" class="carousel_item" role="group" aria-roledescription="slide" aria-label="2개의 배너 중 2번">

          <a href="/" class="carousel_list_link">

            <figure class="carousel_slide">

              <img class="carousel_img" src="./assets/slides/houseware-dandruff.jpg" alt="" />

              <figcaption class="carousel-text-box">

                <strong class="carousel_title">탈모케어 최대 74%</strong>

                <span class="carousel_content">즉시 할인에 쿠폰 할인까지!</span>

              </figcaption>

            </figure>

          </a>

        </li>

        <!-- 인디케이터 -->

        <section class="carousel-indicator">

          <a href="#carousel_1" role="button" class="indicator_link is--active" aria-label="2개의 배너 중 1번 배너 보기"

            aria-controls="housewareSlideBanner">

          </a>

          <a href="#carousel_2" role="button" class="indicator_link" aria-label="2개의 배너 중 2번 배너 보기"

            aria-controls="housewareSlideBanner">

          </a>

        </section>

      </ul>

      <!-- // 인디케이터 -->

 

 

 

[ css ]

/* 캐러셀 */

.carousel {

  width: 32rem;

  flex-shrink: 0;

  position: relative;

  display: flex;

  overflow-x: auto;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

  /* hide scrollbar but allow scrolling */

  -ms-overflow-style: none;

  /* for Internet Explorer, Edge */

  scrollbar-width: none;

  /* for Firefox */

  overflow-y: scroll;

}

/* for Chrome, Safari, and Opera */

.carousel::-webkit-scrollbar {

  display: none;

}

.carousel .carousel_item {

  flex: 0 0 100%;

  scroll-snap-align: start;

  width: 32rem;

  position: relative;

}

.carousel .carousel_img {

  width: 100%;

  height: auto;

  object-fit: cover;

}

.carousel-text-box {

  position: absolute;

  bottom: 0rem;

  width: 21.6rem;

  margin: 48.3rem 3rem 5.8rem;

  color: var(--color-white);

  display: flex;

  padding: 1.9rem 2.2rem 2rem 2.3rem;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  line-height: 120%;

  gap: 8px;

}

.carousel-text-box .carousel_title {

  font-size: 18px;

  font-weight: 700;

}

.carousel-text-box .carousel_content {

  font-size: 14px;

  font-weight: 400;

}

/* 캐러셀-인디케이터 */

.carousel-indicator {

  position: relative;

  top: -3.5rem;

  left: -32rem;

}

.indicator_link:first-child,

.indicator_link:last-child {

  position: absolute;

  bottom: -3.6rem;

  left: -17.5rem;

  width: 1.2rem;

  height: 1.2rem;

  border-radius: 50%;

  background-color: var(--color-gray-600);

}

.indicator_link:last-child {

  left: -15.5rem;

}

.indicator_link:first-child::before,

.indicator_link:last-child:after {

  content: '';

  position: absolute;

  top: 0rem;

  left: 31.5rem;

  width: 1.2rem;

  height: 1.2rem;

  border-radius: 50%;

  background-color: var(--color-gray-600);

}

.indicator_link:hover::before,

.indicator_link:focus::before,

.indicator_link:hover::after,

.indicator_link:focus::after,

.indicator_link:hover,

.indicator_link:focus {

  content: '';

  background-color: var(--color-gray-700)

}

/* 캐러셀 텍스트박스 */

article:nth-of-type(1) .carousel-text-box {

  background: var(--color-brown-300);

}

article:nth-of-type(2) .carousel-text-box {

  background: var(--color-green-700);

}

 

 

 

 

 

---

이미지카드 만들기

여러개 일때

ul > li > a > figure > img+figcaption{이미지에대한 설명을쓴다} 

그리고 가격 설명은  figure와 같은 라인에 div로 감싸 만든다.

 

간단하게

figure > img > figucaption

 

html 이미지카드 emmet

ul.category_list>li.category_item>a.category_link>div.product_box>figure.product_card>img.product_img+figcaption.product_caption{이미지에대한 설명을쓴다}^div.price_detail>span.sr-only{판매가}+em.price[role="text"]{10,000}>span.price_won{원}^span.price_sale{할인율}+span.price_percent{50}>span{%}

      <ul class="category_list">

        <li class="category_item">

          <a href="" class="category_link">

            <div class="product_box">

              <figure class="product_card">

                <img src="" alt="" class="product_img">

                <figcaption class="product_caption">이미지에대한 설명을쓴다</figcaption>

              </figure>

              <div class="price_detail"><span class="sr-only">판매가</span>

                <em class="price" role="text">10,000<span class="price_won">원</span></em>

                <span class="price_sale">할인율</span>

                <span class="price_percent">50<span>%</span></span>

              </div>

            </div>

          </a>

        </li>

      </ul>

 

 

 

클래스 이름 없는 버전 emmet

ul>li>a>div>figure>img+figcaption{이미지에대한 설명을쓴다}^div>span.sr-only{판매가}+em.price[role="text"]{10,000}>span{원}^span{할인율}+span{50}>span{%}

      <ul>

        <li>

          <a href="">

            <div>

              <figure>

                <img src="" alt="">

                <figcaption>이미지에대한 설명을쓴다</figcaption>

              </figure>

              <div>

                <span class="sr-only">판매가</span>

                <em class="price" role="text">10,000<span>원</span></em>

                <span>할인율</span><span>50<span>%</span></span>

              </div>

            </div>

          </a>

        </li>

      </ul>

 

emmet 에밋사용법

html에서 에밋을 사용할때는 모두 붙여서 빈칸없이 사용해야 한다. aria-label="order" 같이 속성을 사용하고 싶다면 

[ ] 대괄호를 이용한다. 사용하면 간편하고 쉽다.

• 자식: >
• 형제: +
• 조상: ^
• 속성: [ ~~ ]
• 텍스트: {~~}

 

 

 

 

 

 

 

 

 

참고

나

캐러셀 - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/