React Ariaとは
Adobeが作成したアクセシビリティに特化したオープンソースのライブラリです。
アップデートも定期的に行われており、直近のリリースには日本人のエンジニアの方もコミットされています。
Introduction
アクセシビリティとは、障がい者を含むすべての人がアプリケーションを使用できる機能です。これには、視覚、聴覚、運動、認知障害など、あらゆる種類の障がいが含まれます。
React Aria は、スクリーン リーダーとキーボード ナビゲーションのサポートを通じて、視覚障害と運動障害の側面に対処します。レンダリングやスタイル設定は提供されないため、他の種類の障害については設計プロセスでさらに考慮する必要があります。 詳細については、Spectrum Web サイトのインクルーシブデザインページを参照してください。
アクセシビリティ機能は、障害のないユーザーにも役立ちます。たとえば、上級ユーザーの場合、マウスやタッチ スクリーンではなくキーボードを使用してアプリケーションを操作する方が速いと感じるかもしれません。特に、大量のデータ入力を伴うアプリケーションの場合、優れたキーボード ナビゲーション サポートによってユーザーの生産性が大幅に向上します。
（React Aria Accessibilityのページより）
React Ariaのコンポーネントを見る限り、ボタンやセレクトボックス、ツールチップやダイアログなど様々なコンポーネントが用意されてあり、そのすべてがアクセシビリティに対応されているようです。
対応ブラウザ
2024年6月現在ですと以下のブラウザが対応されているようです。
- Google Chrome
- Firefox
- Safari
- Edge
コンポーネント
Button
ボタン、トグルボタン、ファイルトリガー（input type="file")
トグルボタンに関してはaria-pressedがデフォルトで付与されており、ボタンを押したことを教えてくれます。
Pickers
コンボボックス、セレクト。
コンボボックスに関してはHTML要素のdatalistも使えますが、CSSによるスタイリングが困難なためカスタマイズしやすい作りになっているようです。
（コンボボックスという名前を今回初めて知りました）
Collections
メニュー、リストボックス、グリッドリスト、テーブル、タググループ。
それぞれが、矢印キーでの移動やEnter（return）キーもしくはSpaceキーでの選択が可能で、Escキーで選択を全解除できるようになっています。
Date and time
日付ピッカー、日付範囲ピッカー、日付フィールド、タイムフィールド、カレンダー、範囲カレンダー。
このコンポーネントもコンボボックス同様にデフォルトの<input type="date">要素は機能的に制限があり、国際化機能が欠けているので、国際化機能に対応しスタイルもカスタマイズできる作りになっているようです。
ブラウザのサイト優先言語を英語にした場合の日付ピッカー(mm/dd/yyyyの順になっている)
同じくブラウザのサイト優先言語を英語にした場合のinput type="date"はこちら（ブラウザの言語設定を英語にしても和暦が表示されている）
これはPCの設定をいじれば変更される？
Overlays
ダイアログ、ポップオーバー、ツールチップ。
このダイアログもHTMLのdialogを使用すれば問題ないのですが、アニメーションなどまだまだCSSのみでは困難な部分もあります。
【参考】
dialogタグのアニメーションはstating-styleを使えば良いらしいが、JavaScriptでのアニメーションが現時点ではベターのようです。
そこでReact Ariaはアクセシブルなdialogでいて、アニメーションにも対応しています。
Forms
チェックボックス、チェックボックスグループ、ラジオグループ、スイッチ、テキストフィールド、検索フィールド、数値フィールド、スライダー、フォーム
チェックボックスやラジオボタンはCheckBoxGroupやRadioGroupなどのコンポーネントで囲って、一つのグループとして紐づけてあげるとVoiceOverなどの読み上げも適切な読み上げにしてくれるとのことです。
<CheckboxGroup>
<Label>Favorite sports</Label>
<Checkbox value="soccer">
<div className="checkbox" aria-hidden="true">
<svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
</div>
Soccer
</Checkbox>
<Checkbox value="baseball">
<div className="checkbox" aria-hidden="true">
<svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
</div>
Baseball
</Checkbox>
<Checkbox value="basketball">
<div className="checkbox" aria-hidden="true">
<svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
</div>
Basketball
</Checkbox>
</CheckboxGroup>
色々な状況に応じてコンポーネントも使い分けができそうです。
実際の使用例
Exampleにも様々な例が用意されています。
そこでタブで切り替えられているコンポーネントを見てみましょう。
コードを見てみるとMyTabとMyTabPanelのidが重複してますね。
これ大丈夫か？と思って開発者ツールを開いてみると、実際は重複していませんでした。
タブのaria-controlsとパネルのidが紐づいて良い感じになっています。
終わりに
実際に実務で使ってみないことにはライブラリの恩恵を受けることはできないのですが、機会があれば個人開発などで使ってみるのもありなのかなと思いました。
React AriaのライセンスがApache2.0とのことで、MITと何が違うんだろう？と思って調べたのですが、MITよりは厳格とのことで、とりあえず明記しておくだけで良いのか…？という気持ちになってます。