[HTML/CSS]CarouselとWAI-ARIA

22658 ワード
テキストリンク

CarouselとWai-aria


Carouselをマークするとき、最も重要なのはアクセス性を重視することです.
スクリーンリーダーを使用するセカンダリデバイスユーザーでは、画像が変更されていますか.現在表示されている画像は何ですか.画像の内容を明確に理解するのは難しいかもしれません.
W3-Wai-ariaでは、ホームデザインモードで必要な機能、キーボードインタラクションの提供方法、wai-ariaに関連するステータス、プロパティ、および適用方法について説明し、実際の例を参照できます.(HTMLソースコードも提供されています.)
<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"
  • 銅像が変化したときに変化を読み出すか否かを設定
    スクリーンリーダーが
  • キャッシュユニットの画像を交換するたびに画像を読み取る場合は、他のコンテンツの閲覧を妨げる可能性があるため、オフに設定されます.
    • 完了例
          <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>
    点数を求める
    青少年サメ派