Tailwind CSS ホームページ
  1. アクセシビリティ
  2. スクリーンリーダー

クイックリファレンス

クラス
プロパティ
sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
not-sr-onlyposition: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

基本的な使い方

スクリーンリーダー専用要素

sr-onlyを使用して、要素をスクリーンリーダーから隠さずに視覚的に非表示にします。

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

スクリーンリーダー専用要素の取り消し

not-sr-onlyを使用してsr-onlyを取り消し、要素を視覚ユーザーとスクリーンリーダーの両方に表示します。これは、例えば小さな画面では何かを視覚的に隠し、大きな画面では表示したい場合に便利です。

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

条件付きで適用する

ホバー、フォーカス、その他の状態

Tailwindでは、バリアント修飾子を使用して、異なる状態のユーティリティクラスを条件付きで適用できます。たとえば、以下を使用してください。 focus:not-sr-only not-sr-onlyユーティリティを適用する場合のみfocus.

<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>

利用可能なすべての状態修飾子の完全なリストについては、以下を確認してください。 ホバー、フォーカス、およびその他の状態のドキュメント。

ブレークポイントとメディアクエリ

また、バリアント修飾子を使用して、レスポンシブブレークポイント、ダークモード、プリファーズ・リデュースド・モーションなどのメディアクエリをターゲットにすることもできます。たとえば、md:not-sr-onlyを使用して、中サイズの画面以上でのみnot-sr-onlyユーティリティを適用します。

<div class="sr-only md:not-sr-only">
  <!-- ... -->
</div>

詳細については、以下のドキュメントを確認してください。 レスポンシブデザイン, ダークモードおよび その他のメディアクエリ修飾子.