【Tailwind和訳】ACCESSIBILITY/Screen Readers

この記事について

この記事は、ACCESSIBILITY/Screen Readersの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Screen Readers

スクリーンリーダーによるアクセシビリティ向上のためのユーティリティ

クラス	プロパティ
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;
not-sr-only	position: 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>

カスタマイズ

バリアント

デフォルトでは、レスポンシブバリアント、フォーカスウィズインバリアント、フォーカスバリアントのみがアクセシビリティユーティリティ用に生成されます。

tailwind.config.js ファイルの variants セクションにある accessibility プロパティを変更することで、アクセシビリティ・ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定では hover と active のバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       accessibility: ['hover', 'active'],
      }
    }
  }

無効化

プロジェクトでアクセシビリティ・ユーティリティーを使用する予定がない場合は、設定ファイルの corePlugins セクションでaccessibility・プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js

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