Webアクセス可能寸法

ファッションショップやクーボンなどのページを見ると、割引率や購入スコアが表示されます.
通常、Webページを表示すると、購入スコアとみなされる場合がありますが、スクリーンリーダーを使用するユーザーにとって、スクリーンリーダーのみで読み取ったコンテンツは確認しにくいです.
スクリーンリーダーのユーザーの理解を容易にするために、スクリーンに表示される要素の前に説明用のタグを追加して、配送タイプ、スコア、購入コメントを提供できます.
(タグを直接追加するのが難しい場合は、Webページのタグにbefore na::after要素を追加して説明を追加できます.)

1.説明のタグを追加

<div class="product__delivery">
  <span class="sr-only">배송유형</span>
  <img src="./assets/icon/badge-rocket.svg" alt="로켓배송">
</div>
<div class="product__ratingStar">
  <span class="sr-only">구매자 평점</span>
  <span class="ratingStar score4-5" aria-label="5점 만점에 4.5점"></span>
</div>
<div class="product__review">
  <span class="sr-only">리뷰 수</span>
  <span class="review">(1,807)</span>
</div>

説明に使用するタグが追加されている場合は、画面に表示されないように処理する必要があります.
上記のコードについて、スクリーンリーダーユーザのために作成されたラベルはclass="sr-only"である.
もちろん、display:noneプロパティを使用して画面の表示されている部分を削除することもできますが、この場合、スクリーンリーダーもアクセスできないため、他のシナリオを探す必要があります.
したがって、clipプロパティを使用して、スクリーンリーダーを非表示にします.
(▶[SS]Webアクセス性に関するテキスト非表示処理は、様々な方法を提供する.)

/* Hidden Content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: polygon(0 0,0 0,0 0);
  white-space: nowrap;
}

※widthやheightの大きさは0ではなく、1 pxを残したのは、スクリーンリーダーなどのアシストデバイスが仮想カーソルを使ってスクリーンを選択したため、最小の焦点領域を残したためです.clip-path: polygon(0 0,0 0,0 0);では、画面に表示されない領域を実際にカットしたため、実際に非表示にするのと同じテクニックを生成できます.
▶クリップブックサイトのホームページを使用すると、クリップのプロパティを使用して画面上の表示領域を切り取ったかどうかを簡単に知ることができます.😊