ravixUI がアクセシビリティ対応の参考になりそう

まえがき

Astro のブログではコミュニティ発のライブラリも紹介されているのですが、What's new in Astro - June 2024 で

An open-source, accessibility-focused component starter kit built with Tailwind CSS and optimized for Astro

と紹介されていた ravixUI がアクセシビリティに配慮したマークアップの参考になりそうだったので紹介します。

ravixUI とは

Tailwind CSS によってスタイリングされ、特に Astro 用に最適化された、アクセシビリティ重視のコンポーネントスターターキットです。

なお HTML 版と Astro 版が提供されているため、Astro を使っていない人でも使えます。
（Astro コンポーネントを書いたことがある方はお察しのことと思いますが、HTML 版と Astro 版はほとんど同じです。）

良さそうだと思った点の紹介

アクセシビリティに関する部分の説明が書いてある

Button を見てみました。
下記が ravixUI によるアイコンだけのボタンのマークアップです。

<button
  aria-label="Add to favorites"
  title="Add to favorites"
  type="button"
  class="rounded-lg text-xl font-semibold text-rose-600 outline-offset-2 outline-black hover:text-rose-500 focus:outline-2 dark:outline-white"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="48"
    height="48"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <path
      fill="currentColor"
      d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
    ></path>
  </svg>
</button>

アクセシビリティに関係しそうな部分について、下記のような説明が添えられており参考になります。

Note: We use title="" attribute to create a tooltip to give additional information to the user when they hover over the button and aria-label="" attribute for screenreaders. Most screenreaders will only callout aria-label attribute or the title attribute . aria-hidden=true is added to the svg icons as an attribute to hide it from screen readers to prevent duplicate callouts.

マークアップそのものを公開し、更に aria-label 等を付けている意図を説明してくれる理由は Introduction に書いてあります。

ravixUI embraces the belief that accessibility is contextual. By providing the source code directly, we empower you to tailor the components to your unique use cases.

アクセシビリティは文脈によるので、実際にコンポーネントを使用するユースケースに応じて適切に書き換えてほしいということなんですね。

個人的には最近 Skeleton の実装で悩んでいたため、Loaders で Skeleton の実装があったのがとても参考になりました。

スクリーンリーダーでの読み取りテストの結果を公開してくれている

先ほどのボタンのページの一番下に "Accessibility Testing Status" が公開されています。
これはスクリーンリーダーによるテスト結果です。

自分でマークアップするときもなるべくスクリーンリーダーでの読み取り結果を確認したほうがいいとは思いますが、特に複数のスクリーンリーダーでのテストまではなかなか手が回らないことも多いです。

そのため「どのスクリーンリーダーでテストして問題がなかったのか」という情報を公開してくれているのは安心感があります。

特定ライブラリへの依存度が低い

前述の通り素の HTML 版も公開してくれているので、Astro を使っていなくてもマークアップの参考にできます。

Tailwind CSS は使っていないという方もいらっしゃるでしょうが、Tailwind CSS でのスタイリングを他の CSS ライブラリ等で置き換えるのはそう難しくはないです。
それに ravixUI はあくまでもカスタマイズ前提のスターターキットですし、アクセシビリティとしてより重要なのはマークアップの部分なので、それほど大きな障壁ではないと思います。

また Accordion などの一部コンポーネントには JavaScript が必要ですが、React 等の特定のライブラリに依存していません。

そのため ravixUI を広くおすすめできる点は良い点だと思いました。

おわりに

アクセシビリティ重視のコンポーネントスターターキットである ravixUI を紹介しました。
うまく活用して誰にとっても使いやすい Web サイト構築を目指していきましょう！