Tailwind CSS v3.2 でよりアクセシブルなスタイル指定が可能に

こんにちは森田です。
今回は Tailwind CSS v3.2 で実装されたアクセシビリティを強化できる新機能 「ARIA attribute variants」 の紹介します。

ARIA attribute variants

参考：Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries, oh my!

ARIA attribute variants はその名の通り ARIA 属性にスタイルを設定できる機能です。
aria-*: 修飾子を使用することができます。

以下のコードは aria-checked が true の場合にスタイルを適用します。

<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">
  <!-- ... -->
</span>

JSなどで動的にARIA属性を操作すればスタイルも変更することができます。
書き方もいつもの Tailwind な感じで指定しやすいですね。

デフォルトで用意されているARIA属性

以下のよく使う ARIA 属性はデフォルトで用意されているので、aria-*: でスタイルを指定することができます。

• aria-checked
• aria-disabled
• aria-expanded
• aria-hidden
• aria-pressed
• aria-readonly
• aria-required
• aria-selected

上記以外も config ファイルで追加することもできます。よく使用するARIA属性がある場合は追加すると良いでしょう。詳しくは公式ドキュメントを参考ください。

直接ARIA属性を指定

真偽値ではない値や、あまり使わないARIA属性は aria-[] を使うことで直接任意のプロパティと値を指定できます。

以下では aria-sort="ascending" と aria-sort="descending" に対してスタイルを指定しています。

<table>
  <thead>
    <tr>
      <th
        aria-sort="ascending"
        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
      >
        Invoice #
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

サイトによって一度しか使わない ARIA 属性も多いので直接指定もよく使いそうです。

まとめ

ARIA 属性での指定は CSS を書かなければいけなかったところが今回のアップデートでそのまま Tailwindで指定できるようになりました。

他にも v3.2 は便利な機能が沢山追加されたので紹介していきたいと思っております。

関連リンク

• Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries, oh my!