スクリーンリーダー

Tailwind CSS version
v1.1.0+

スクリーンリーダーのアクセシビリティを向上させるためのユーティリティ。

Class reference

Class
Properties
.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>

デフォルトでは、これらのユーティリティに対してresponsiveおよびfocusバリアントが生成されます。 focus:not-sr-onlyを使用すると、要素をデフォルトで視覚的に非表示にしますが、ユーザーがタブで移動すると表示されます。「コンテンツにスキップ」リンクに役立ちます。

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

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive and focus バリアントはaccessibility utilitiesのために作られます。

あなたはどのバリアントがaccessibility utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのaccessibilityプロパティを修正することによってコントロールできます。

例として、この設定は also hover and active バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     accessibility: ['responsive', 'focus'],
+     accessibility: ['responsive', 'focus', 'hover', 'active'],
    }
  }

無効にする

もしaccessibility utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのaccessibility propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     accessibility: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!