React Ariaで始める、やさしいアクセシビリティ対応の基本

フロントエンド開発•
ReactJavaScript

はじめに

皆さんは、アクセシビリティという言葉を耳にしたことはありますか。 ウェブアプリを作るうえで、アクセシビリティの考慮は多くの場面で求められますね。 React で開発するときも、それは同じではないでしょうか。 しかしアクセシビリティは、専門的な用語や手法が多く、一見すると難しそうに感じる方も少なくないかもしれません。

ここで役立つのが React Aria です。 React アプリにおけるアクセシビリティ対応を支援するライブラリで、UI 要素に適切な属性や挙動を付与しやすくしてくれます。 この記事では、React Aria が何をしてくれるのか、どうやって使うのかを具体的に解説します。 実務でも活用できる形を目指しており、初心者の方にも分かりやすいように噛み砕いて説明しますので、ぜひ最後まで読んでみてください。

React Ariaとは何か

React Aria は、Adobe が提供するオープンソースのライブラリ群の一部で、React アプリケーションにおけるアクセシビリティを簡単に実装できるよう工夫されています。 UI コンポーネントに必要な WAI-ARIA 属性や、キーボード操作のためのイベント処理などをまとめてサポートし、よりスムーズにアクセシブルなアプリを作れるようになっています。

たとえば、ボタンやリンクといった基本的な要素にも、利用者が多様な状況でアクセスできるように配慮が必要です。 スクリーンリーダーなどの支援技術に正しく情報を伝えるためには、HTML の属性だけではなく、JavaScript によるキーボード操作やフォーカス管理などを考慮しなくてはなりません。 React Aria は、そういった手間を軽減してくれる便利なライブラリとして注目されています。

React Aria は設計上、コンポーネントライブラリというよりは ビヘイビア (振る舞い) を提供する側面が強いのが特徴です。 ユーザーインターフェースを直接提供するのではなく、必要なロジックや属性をフック経由で受け取り、任意のプレゼンテーション層に当てはめていくイメージです。 そのため、デザインや構造に自由度が高く、自身の好みに合わせたレイアウトを作りながら、アクセシビリティの要件を満たすことができます。

React Ariaを導入するメリット

React アプリでアクセシビリティを実装する方法は、HTML や ARIA 属性を直接記述するだけでも不可能ではありません。 しかし、ひとつひとつの要素に必要な属性を理解して適切に割り振るのは、慣れないうちは手間やミスが多くなるかもしれませんね。 ここで React Aria を導入するメリットをいくつか挙げてみましょう。

  • UI 要素に対して必要な WAI-ARIA 属性やイベントを簡単に適用できる
  • フォーカス管理やキーボード操作のロジックを統一しやすい
  • デザインと機能を分けて考えられるので、開発チーム全体での作業が整理しやすい
  • 広く活用されている React Spectrum ライブラリのコア部分を利用することで、保守性を高めやすい

これらのメリットを生かせば、実務における制作時間の短縮や品質管理に繋がります。 特にフォーカスの管理やキーボード操作の挙動は、いちから実装するとコードが複雑になりがちです。 React Aria を用いれば、その点を大幅にスムーズに扱うことができるでしょう。

React Ariaのインストール方法

React Aria は公式でいくつかのパッケージに分割されています。 たとえば、フォームまわりのフックをまとめた @react-aria/form、ボタンの挙動を提供する @react-aria/button などが存在します。 必要なパッケージだけをインストールできるので、アプリの規模に合わせて導入しやすい点も利点ですね。

インストール例 としては以下のようになります。

npm install @react-aria/button @react-aria/interactions

上記ではボタン関連の動作を提供する @react-aria/button と、キーボード操作などのインタラクションを制御する @react-aria/interactions を導入しています。 プロジェクトの要件に合わせて、使いたいパッケージを追加していきましょう。

React Ariaのパッケージは複数あり、特定のUI部品に特化したものが存在します。 まずは、基本的な操作系統のパッケージだけ導入して、慣れてから拡張するのもおすすめです。

基本的な使い方：ボタンを例に

ここからは簡単なコード例を通じて、React Aria の使い方を見ていきましょう。 今回は分かりやすい例として、ボタンをキー操作で扱えるようにする流れを確認します。

まずは、@react-aria/button が提供する useButton フックを利用したサンプルです。 このフックを呼び出すと、ボタンに必要なアクセシビリティ関連のプロパティやイベントハンドラをまとめて取得できます。

import React from "react";
import { useButton } from "@react-aria/button";

function AccessibleButton(props) {
  // コールバック関数などを取得
  let { buttonProps } = useButton(props, React.useRef(null));

  return (
    <button {...buttonProps} style={{ padding: "8px 16px" }}>
      {props.children}
    </button>
  );
}

export default function App() {
  const handleClick = () => {
    alert("ボタンがクリックされました");
  };

  return (
    <div>
      <AccessibleButton onPress={handleClick}>
        アクセシブルなボタン
      </AccessibleButton>
    </div>
  );
}

useButton フックは、ボタン要素に必要な WAI-ARIA 属性やキーボード操作をサポートするイベントを buttonProps として返します。 これをスプレッド構文で渡すだけで、視覚的には通常のボタンと変わらない見た目でも、内部的にアクセシビリティが考慮される形になります。

また、実務ではボタンに特別なスタイリングを適用する場面もありますね。 React Aria はスタイルに干渉しないので、自由にデザインを変更できます。 たとえばコンポーネントの先頭で buttonProps をフックから受け取り、その後に自前の CSS やコンポーネントライブラリを使うことも可能です。

フォーム入力への応用

ボタン以外にも、フォーム要素はアクセシビリティを意識しやすい代表的な例です。 テキスト入力やチェックボックスなどを扱う場合、スクリーンリーダーに正しいラベル情報を提供する必要があります。 また、エラー発生時にユーザーへ正確に伝えるための仕組みを持たせることも大切ですね。

React Aria には、@react-aria/form や @react-aria/checkbox といったパッケージが用意されており、類似したフックを使って実装できます。 たとえば @react-aria/checkbox の useCheckbox を使うと、チェックボックスに必要なロールやステートをまとめて管理できます。

import React, { useRef } from "react";
import { useCheckbox } from "@react-aria/checkbox";
import { useToggleState } from "@react-stately/toggle";

function AccessibleCheckbox(props) {
  let ref = useRef(null);
  let state = useToggleState(props);
  let { inputProps } = useCheckbox(props, state, ref);

  return (
    <label style={{ display: "block", margin: "8px 0" }}>
      <input {...inputProps} ref={ref} />
      {props.children}
    </label>
  );
}

export default function FormExample() {
  return (
    <form>
      <AccessibleCheckbox>利用規約に同意する</AccessibleCheckbox>
      <button type="submit">送信</button>
    </form>
  );
}

チェックボックスの状態管理には、同じく React Spectrum 系の @react-stately/toggle に含まれる useToggleState を利用しています。 React Aria は通常の DOM イベントではなく、キーボード操作やスクリーンリーダーでの読み上げを考慮したイベント処理を自動で組み込んでくれる点がポイントです。 これによって、初心者でもミスを減らしながらアクセシブルなフォームを構築できるのではないでしょうか。

実務での活用シーン

React Aria を実務で使う際は、フルスクラッチでアプリを組むときに特に効果を発揮します。 既存のデザインガイドラインやコンポーネントライブラリがある場合でも、アクセシビリティ部分だけ React Aria のフックを取り入れることが可能です。 UI とロジックが分離されているため、どのようなビジュアルデザインにも適用できる柔軟性があります。

たとえば、以下のようなシチュエーションで React Aria の導入が考えられます。

  • 企業向けの大規模管理画面で、ボタンや入力フォームが大量に存在する場合
  • React アプリケーションを世界規模で展開する予定があり、多言語対応と同時にアクセシビリティにも力を入れたい場合
  • デザインチームが別途存在し、マークアップエンジニアがアクセシビリティを実装する環境で、作業を分担しやすくしたい場合
  • SPA（シングルページアプリケーション）全体でフォーカス制御を徹底したい場合

これらの場面では、一つひとつの要素に ARIA 属性やイベントを設定するよりも、React Aria のフックを活用したほうが安定的な実装を進められるかもしれません。 UIの表現を大幅に変える必要がなく、コンポーネント内部でアクセシビリティ関連の挙動が完結するためです。

注意すべきポイント

React Aria を使うと手軽にアクセシブルなコンポーネントを構築できますが、導入時に気をつけておきたい点もいくつか挙げられます。

ARIA 属性の基本は理解しておく

React Aria は便利ですが、仕組みを完全に任せると、どうしても内部で行われていることが見えにくくなるかもしれません。 最低限の WAI-ARIA の考え方は把握しておくと、トラブルシューティングがスムーズです。

コンポーネントの複雑化に注意

React Aria はフックを返してくれるだけなので、コード上はあまり煩雑にならない印象です。 しかし、大規模な画面を作っていくときには、各コンポーネントが多種多様なフックを呼び出す可能性があります。 設計段階で分かりやすい責務分割を行いましょう。

最新バージョンの情報を確認する

React Aria は比較的新しいライブラリ群であり、バージョンアップによって使い方が変更されることもあります。 常に公式ドキュメントをチェックして、最新情報を把握しておくと安心です。

フロントエンド側だけでアクセシビリティを整えても、HTML構造そのものが不適切であれば効果が薄れる場合もあります。 土台となるマークアップの質を高めたうえで、React Aria の利点を最大限に活かすことを意識してください。

アクセシビリティ向上のための追加テクニック

React Aria を使うだけで終わりではなく、プロジェクト全体のアクセシビリティを高めるために、いくつかのテクニックが役立ちます。 特に、React 自体の機能や外部ツールと組み合わせて対策を進めると効果的です。

たとえば、以下のような取り組みを検討すると、さらに質の高いアクセシビリティが実現できるでしょう。

キーボードナビゲーションのテスト

画面上の要素をすべてキーボードだけで操作できるか確認するのは、とても大切です。 フォーカスの移動順序や、エラー時に画面がどのように反応するのかなどを定期的にチェックしてみてください。

色のコントラスト比の確認

メインとなるテキストと背景のコントラスト比が適切かどうかも見落としがちです。 React Aria とは直接関係しませんが、UI全体のデザイン面でもアクセシビリティを意識すると、より多くの人が利用しやすくなります。

国際化 (i18n) との連携

多言語対応を行う場合は、言語切替時のラベルやエラー文言が正しく反映されているかチェックしましょう。 React Aria はテキスト内容には干渉しませんが、翻訳テキストが適切に読み上げられるかどうかを意識する必要があります。

スクリプトやビルドの最適化

パフォーマンスが極端に低いと、補助技術を使った操作でもレスポンスが悪くなり、利用者の体感が落ちる恐れがあります。 React Aria 自体が重いわけではありませんが、全体として最適化を図ることが重要です。

アクセシブルなタブUIの例

もう少し複雑な実装例として、タブのある画面を React Aria を使って構築するケースを紹介します。 タブ切り替えは画面の構造が入り組みやすく、アクセシビリティ対応が後回しになりがちなパターンかもしれません。

以下の例では、@react-aria/tabs の useTabs や useTabList、useTab などのフックを組み合わせ、キーボード操作や適切なロール属性を付与しています。 擬似的なコード例になりますが、タブUIがどのように組めるかの参考としてご覧ください。

import React, { useRef } from "react";
import { useTabList, useTab, useTabs } from "@react-aria/tabs";
import { useTabListState } from "@react-stately/tabs";

function TabItem({ item, state }) {
  let ref = useRef(null);
  let { tabProps } = useTab({ key: item.key }, state, ref);
  let isSelected = state.selectedKey === item.key;

  return (
    <div
      {...tabProps}
      ref={ref}
      style={{
        display: "inline-block",
        padding: "8px 12px",
        marginRight: "4px",
        borderBottom: isSelected ? "2px solid blue" : "2px solid transparent",
        cursor: "pointer",
      }}
    >
      {item.rendered}
    </div>
  );
}

function TabList(props) {
  let state = useTabListState(props);
  let ref = useRef(null);
  let { tabListProps } = useTabList(props, state, ref);

  return (
    <div {...tabListProps} ref={ref}>
      {[...state.collection].map((item) => (
        <TabItem key={item.key} item={item} state={state} />
      ))}
    </div>
  );
}

export default function TabsExample() {
  let { tabsProps, tabPanelProps } = useTabs({
    label: "サンプルタブ"
  });

  // デモ用に項目をベタ書きしています
  let items = [
    { key: "tab1", name: "タブ1", content: "これはタブ1の内容です" },
    { key: "tab2", name: "タブ2", content: "これはタブ2の内容です" },
    { key: "tab3", name: "タブ3", content: "これはタブ3の内容です" },
  ];

  return (
    <div {...tabsProps}>
      <TabList items={items}>
        {(item) => <>{item.name}</>}
      </TabList>

      <div {...tabPanelProps} style={{ marginTop: "16px" }}>
        {items.find((it) => it.key === tabPanelProps["aria-labelledby"])?.content}
      </div>
    </div>
  );
}

上記のように、タブリスト・タブ要素・タブパネルをそれぞれフックで制御し、WAI-ARIA に準拠した属性を自動的に設定できます。 キーボードの上下左右キーでタブ移動できるなど、利用者にとって扱いやすいインターフェースが自然と実装される点が React Aria のメリットです。

まとめ

ここまで、React Aria を利用したアクセシビリティ対応の基本的な考え方や実装例を紹介しました。 React アプリ内の各種 UI 要素をアクセシブルにするには、WAI-ARIA 属性やキーボードナビゲーションのロジックなど、さまざまな要素を考慮する必要があります。 しかし、React Aria を使えば、多くのケースで複雑なコードを書かずに済むのではないでしょうか。

アクセシビリティは見落としがあっても表面に現れにくい場合がありますが、利用者の多様性を支えるうえで重要です。 実務で活用する際には、最低限の ARIA の知識と、React Aria のフックが提供する機能をうまく組み合わせることがポイントです。 また、色のコントラストや国際化対応など、アプリ全体としての配慮を並行して進めることで、より多くの人が使いやすいウェブアプリを目指せます。

初めて触れる方でも扱いやすい仕組みが豊富にあるため、まずは小さな機能から React Aria を試してみると良いかもしれません。 無理なく導入できる範囲を見極めながら、アクセシビリティのレベルを一歩ずつ高めていきましょう。 きっと、実務でも役立つ確かな知識とテクニックが身に付くはずです。

Reactをマスターしよう

この記事で学んだReactの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

Reactの人気講座ランキングを見る筆者おすすめ No.1 講座！「React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説