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-checkedtrue の場合にスタイルを適用します。

<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 は便利な機能が沢山追加されたので紹介していきたいと思っております。


Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

関連リンク


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。