スクリーンリーダー用のテキスト

クラス

支援技術から引き続き利用できるようにしたいテキストに、このクラスを使います。要素を無効にしたり、キーボード操作の対象から外したりするための指定ではありません。

表示の切り取りとアクセシブルな名前は別の仕組み

sr-only は要素を通常フローから外し、1px のボックスを与えて描画領域を切り取ります。display: none、visibility: hidden、aria-hidden は適用しません。そのため、テキストはアクセシブルな名前の計算に引き続き使えます。

矢印には aria-hidden="true" を指定しています。ラベルテキストは sr-only で視覚的に切り取られ、リンクのアクセシブルな名前を提供します。リンク自体は見えるままで、フォーカスできます。

テキストによる説明

1. リンクは、アクセシブルな名前の計算から除外した矢印と、Read the utility definition を含む span を持ちます。
2. span は実際の sr-only プリセットを使い、絶対配置、1px のボックス、オーバーフローの非表示、切り取りを指定します。aria-hidden は付けず、DOM に残ります。
3. 見えるリンクは引き続き 40px の正方形を占め、矢印を表示します。アクセシブルなロールは link、名前は Read the utility definition です。
4. 2 つの分岐は同じコントロールの異なる表現であり、順番に行う操作ではありません。祖先をアクセシビリティツリーから隠すと、その子孫も隠れます。

クラスはコントロール内のラベルテキストに指定し、コントロール自体は見えていてフォーカスできる状態にします。アイコンに aria-hidden="true" を指定すると名前の計算から除外され、テキストで操作内容を説明できます。

常に切り取られる領域に、フォーカス可能なコントロールを置かないでください。キーボード利用者が、見えないコントロールに移動してしまいます。スキップリンクには、フォーカス時に表示する独自のスタイルが必要です。プリセットには、表示を戻す not-sr-only ユーティリティはありません。

祖先要素がサブツリーをアクセシビリティツリーから除外すると、このテキストも除外されます。sr-only では、祖先の hidden、display: none、aria-hidden="true" を打ち消せません。実際のコントロールで、最終的なロールと名前をテストしてください。

関連項目： アクセシブルな名前.

使用例

下にあるユーティリティの定義を開く、アイコンだけのリンクに名前を付けます。

<a href="#customize">  <span aria-hidden="true">↓</span>  <span class="sr-only">Read the utility definition</span></a>

@layer utilities {  .sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    white-space: nowrap;    border-width: 0  }}

カスタマイズ

プリセットはこれらのクラスを @utility で定義しています。スタイルシートで同じ名前を定義すると、元の定義を置き換えられます。

@utility sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border-width: 0;}

関連項目： ユーティリティの定義.